Home >Software >React Development with the MERN Stack

React Development with the MERN Stack

Date post:23-Jan-2018
Category:
View:291 times
Download:4 times
Share this document with a friend
Transcript:
  • React Development with the MERN StackCowork South Bay 22 + 23 April 2017

  • Troy Miles Troy Miles aka the RocknCoder

    Over 38 years of programming experience

    Speaker and author

    bit.ly/rc-jquerybook

    [email protected]

    @therockncoder

    Now a lynda.com Author!

    http://lynda.com

  • Agenda Introduction

    MERN cli

    Node.js & Express

    MongoDB & Mongoose

    React

    Redux

    React-Router

    Ajax

    React-Bootstrap

    Summary

  • Tools

    install Git

    install Node.js

    upgrade npm npm install npm -g

    install the MERN CLI, npm install -g mern-cli

  • Versionsapp command my version

    git git version 2.12.2

    node.js node -v v7.9.0

    npm npm v 4.2.0

  • ECMAScript VersionsVersion Date

    ES1 June 1997

    ES2 June 1998

    ES3 December 1999

    ES4 DOA 2006

    ES5 December 2009

    ES6/ES2015 June 2015

    ES2016 2016

  • Array Operators .isArray()

    .every()

    .forEach()

    .indexOf()

    .lastIndexOf()

    .some()

    .map()

    .reduce()

    .filter()

  • forEachlet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // forEach iterates over the array, once for each element, but there is no way to // break outnums.forEach(function (elem, index, arr) { console.log(index + ': ' + elem); });

  • maplet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // map iterates over all of the elements and returns a new array with the same // number of elementslet nums2 = nums.map((elem) => elem * 2); console.log(nums2);

  • filterlet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // filter iterates over the array and returns a new array with only the elements // that pass the testlet nums3 = nums.filter((elem) => !!(elem % 2)); console.log(nums3);

  • reducelet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // reduce iterates over the array passing the previous value and the current// element it is up to you what the reduction does, let's concatenate the stringslet letters2 = letters.reduce((previous, current) => previous + current); console.log(letters2); // reduceRight does the same but goes from right to leftlet letters3 = letters.reduceRight((previous, current) => previous + current); console.log(letters3);

  • everylet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}]; let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']; let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; console.log(nums); // every makes sure that all the elements match the expressionlet isEveryNumbers = junk.every((elem) => typeof elem === 'number'); console.log('Are all members of junk numbers: ' + isEveryNumbers);

  • let

    let allows us to create a block scoped variables

    they live and die within their curly braces

    best practice is to use let instead of var

  • let// let allows us to create block scoped variables// they live and die within the curly braceslet val = 2; console.info(`val = ${val}`); { let val = 59; console.info(`val = ${val}`); } console.info(`val = ${val}`);

  • const

    const creates a variable that can't be changed

    best practice is to make any variable that should not change a constant

    does not apply to object properties or array elements

  • constconst name = 'Troy'; console.info(`My name is ${name}`); // the line below triggers a type errorname = 'Miles';

  • Template strings

    Defined by using opening & closing back ticks

    Templates defined by ${JavaScript value}

    The value can be any simple JavaScript expression

    Allows multi-line strings (return is pass thru)

  • Template strings let state = 'California'; let city = 'Long Beach'; console.info(`This weekend's workshop is in ${city}, ${state}.`); // template strings can run simple expressions like addition let cup_coffee = 4.5; let cup_tea = 2.5; console.info(`coffee: $${cup_coffee} + tea: $${cup_tea} = $${cup_coffee + cup_tea}.`); // they can allow us to create multi-line strings console.info(`This is line #1.this is line #2.`);

  • Arrow functions

    Succinct syntax

    Doesnt bind its own this, arguments, or super

    Facilitate a more functional style of coding

    Cant be used as constructors

  • Arrow functions

    When only one parameter, parenthesis optional

    When zero or more than one parameter, parenthesis required

  • Arrow functionlet anon_func = function (num1, num2) { return num1 + num2; }; console.info(`Anonymous func: ${anon_func(1, 2)}`); let arrow_func = (num1, num2) => num1 + num2; console.info(`Arrow func: ${arrow_func(3, 4)}`);

  • this this is handle different in arrow functions

    In anonymous function this is bound to the global object

    In arrow

    One important difference between anonymous and arrow functions is

  • import

    Imports functions, objects, or primitives from other files

    import from ;

  • Destructuring

  • Object Destructuring16// this is a demo of the power of destructuring 17// we have two objects with the same 3 properties 18 const binary = {kb: 1024, mb: 1048576, gb: 1073741824}; 19 const digital = {kb: 1000, mb: 1000000, gb: 1000000000}; 20// We use a ternary statement to choose which object 21// assign properties based on their property names 22 const {kb, mb, gb} = (useBinary) ? binary : digital;

  • Spread syntax

    Expands an expression in places where multiple arguments, elements, or variables are expected

  • Vital Definitions

    state

    mutation

    immutable

    pure functions

  • Application Root Directory

    All of the commands, for all of the tools are designed work on the application root directory

    If used anywhere else bad things will happen

    be sure you are in the app root

    double check that you are in the app root

  • Webpack

  • Webpack

    Module bundler

    Replaces System.JS

    Works with JS, CSS, and HTML

    Minifies, concatenates, and bundles

  • How?

    Webpack starts at your apps entry point

    It makes a graph of all of its dependencies

    It then bundles them together into an output file

  • Loaders

    Goal: Webpack handler loading of all of your apps assets

    Every file is a module

    Webpack only understands only JavaScript

    Loaders transform files into modules

  • Rules

    test: Identifies the files type

    use: Transform the file with a plugin loader

  • Example #1 module: { rules: [ { test: /\.json$/, loader: 'json-loader', },

  • Example #2 module: { rules: [ { test: /\.jsx*$/, exclude: [/node_modules/, /.+\.config.js/], loader: 'babel-loader', },

  • Example #3 { test: /\.css$/, use: [ { loader: 'style-loader', options: { sourceMap: true } }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[path]___[name]__[local]___[hash:base64:5]' } }, { loader: 'postcss-loader' } ], },

  • Babel

  • Babel

    The compiler for writing the next generation JavaScript

    current version 6.23.0

    works better with Webpack

  • Babel

    It is modular, with a small lightweight core

    Functionality comes from plugins

    All plugin are opt-in

  • Presets

    You might need a dozen plugins

    Keep track of them would be burdensome

    Presets are groups of related plugins

    Two popular ones are babel-preset-es2015 and babel-preset-react

  • React

  • React A JavaScript library for building user interfaces

    Created by Facebook & Instagram

    Initial release March 2013

    Current version 15.4.2

    (Highly recommend reading their license)

  • React

    Virtual DOM

    One-way data flow

    JSX - JavaScript eXtension allows in HTML generation

    Component-based

  • Component

    Fundamental building block of React

    Can be created with a JS Class or Function

  • React.PropTypes

    React.PropTypes is deprecated

    It will be deleted in React 16

    Use the npm package prop-types instead

    importPropTypesfromprop-types;

  • Flux

    Application architecture for building user interfaces

    A pattern for managing data flow in your app

    One way data flow

    4 main parts: Dispatcher, Store, Action, & View

  • The 4 main parts

    Disp

Click here to load reader

Reader Image
Embed Size (px)
Recommended