ave time learning on your own. Start Building with React, MongoDB, Express, & Node. The MERN Stack. Learning a new JavaScript framework is difficult. You can spend weeks learning new concepts. If an online example doesn’t work, you may spend countless hours Googling, searching Stack Overflow and blogs for the solution. Take the fast track and learn from an experienced Senior Software Engineer and professional instructor! About this Course  This highly interactive course features a large amount of student labs and hands-on coding. You will be taught how to assemble the complete stack required to build a modern web app using React.js, MongoDB (a NoSQL database) and Express (a framework for web application servers). This course will also cover many other tools that go into building a complete web application: React Router, React-Bootstrap, Redux, Babel, and Webpack.  What You Will Learn • How to use modern JavaScript features • Webpack • Node & Express • Reading and writing data to a MongoDB database • Babel • React • State Management with Redux • Mongoose • And More!

1. React Development with the MERN Stack
Cowork South Bay 22 + 23 April 2017

2. Troy Miles
• Troy Miles aka the RocknCoder
• Over 38 years of programming
experience
• Speaker and author
• bit.ly/rc-jquerybook
• rockncoder@gmail.com
• @therockncoder
• Now a lynda.com Author!

4. Agenda
• Introduction
• MERN cli
• Node.js & Express
• MongoDB & Mongoose
• React
• Redux
• React-Router
• Ajax
• React-Bootstrap
• Summary

5. Tools
• install Git
• install Node.js
• upgrade npm npm install npm -g
• install the MERN CLI, npm install -g mern-cli

6. Versions
app command my version
git git —version 2.12.2
node.js node -v v7.9.0
npm npm —v 4.2.0

7. ECMAScript Versions
Version Date
ES1 June 1997
ES2 June 1998
ES3 December 1999
ES4 DOA 2006
ES5 December 2009
ES6/ES2015 June 2015
ES2016 2016

8. Array Operators
• .isArray()
• .every()
• .forEach()
• .indexOf()
• .lastIndexOf()
• .some()
• .map()
• .reduce()
• .filter()

9. forEach
let 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 out
nums.forEach(function (elem, index, arr) {
console.log(index + ': ' + elem);
});

10. map
let 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 elements
let nums2 = nums.map((elem) => elem * 2);
console.log(nums2);

11. filter
let 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 test
let nums3 = nums.filter((elem) => !!(elem % 2));
console.log(nums3);

12. reduce
let 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 strings
let letters2 = letters.reduce((previous, current) => previous + current);
console.log(letters2);
// reduceRight does the same but goes from right to left
let letters3 = letters.reduceRight((previous, current) => previous + current);
console.log(letters3);

13. every
let 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 expression
let isEveryNumbers = junk.every((elem) => typeof elem === 'number');
console.log('Are all members of junk numbers: ' + isEveryNumbers);

14. 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

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

16. 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

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

18. 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)

19. 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.`);

20. Arrow functions
• Succinct syntax
• Doesn’t bind its own this, arguments, or super
• Facilitate a more functional style of coding
• Can’t be used as constructors

21. Arrow functions
• When only one parameter, parenthesis optional
• When zero or more than one parameter,
parenthesis required

22. Arrow function
let 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)}`);

23. 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

24. import
• Imports functions, objects, or primitives from other
files
• import <name> from “<module name>”;

25. Destructuring

26. Object Destructuring
16// 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;

27. Spread syntax
• Expands an expression in places where multiple
arguments, elements, or variables are expected

28. Vital Definitions
• state
• mutation
• immutable
• pure functions

29. 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

30. Webpack

31. Webpack
• Module bundler
• Replaces System.JS
• Works with JS, CSS, and HTML
• Minifies, concatenates, and bundles

32. How?
• Webpack starts at your app’s entry point
• It makes a graph of all of its dependencies
• It then bundles them together into an output file

33. Loaders
• Goal: Webpack handler loading of all of your app’s
assets
• Every file is a module
• Webpack only understands only JavaScript
• Loaders transform files into modules

34. Rules
• test: Identifies the file’s type
• use: Transform the file with a plugin loader

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

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

37. 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'
}
],
},

38. Babel

39. Babel
• The compiler for writing the next generation
JavaScript
• current version 6.23.0
• works better with Webpack

40. Babel
• It is modular, with a small lightweight core
• Functionality comes from plugins
• All plugin are opt-in

41. 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

42. React

43. 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)

44. React
• Virtual DOM
• One-way data flow
• JSX - JavaScript eXtension allows in HTML
generation
• Component-based

45. Component
• Fundamental building block of React
• Can be created with a JS Class or Function

46. React.PropTypes
• React.PropTypes is deprecated
• It will be deleted in React 16
• Use the npm package “prop-types” instead
• import PropTypes from ‘prop-types’;

47. 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

48. The 4 main parts
• Dispatcher: receives actions & dispatches them to
stores
• Store: holds the data of an app
• Action: define app’s internal API
• View: displays the data from stores

50. Redux

51. Redux
• A predictable state container for JS apps
• Works well with React Native
• An alternative to & inspired by Flux
• Single store for the entire app
• Makes it easier to hot-load your app
• Created by Dan Abramov

52. 3 Fundamental Principals
• Single Source of Truth
• State is Read-Only
• Changes are Made with Pure Functions

53. React-Redux
• Provides binds to React bindings to redux
• npm i -S react-redux
• Separates presentational and container
components

54. Container Components
• A React component which uses store.subscribe
• Could be created by hand, but easier using
connect()
• All containers need to access to the Redux store
• React-Redux includes <Provider> component for
store access

55. React Router
• A complete routing library for React
• Keeps UI in sync with URL

56. Node.js

57. Don’t use sudo
• Using sudo with npm is not a best practice
• sudo chown -R $USER /usr/local
• The command makes you the owner of your local
directory
• That enables apps your in that directory like npm,
able to work without more permissions

58. Node 7
• New version of Chrome V8
• Supports ES6
• Faster
• node -v

59. Express

60. Express
• Web framework for Node.js
• Like Rails is to Ruby
• We will use for routing and first page

61. mLab
https://mlab.com/

62. mLab
• Sign up for the Sandbox plan
• It comes with 0.5 GB of space
• Support is included

63. Connection Info
• From the home page
• Click on your db
• In the upper left is your info
• Copy the shell connect info

64. MongoDB

65. Who Uses MongoDB
• Craigslist
• eBay
• Foursquare
• SourceForge
• Viacom
• Expedia
• Parse
• LinkedIn
• Medtronic
• eHarmony
• CERN
• and more

66. Features
• Document Database
• High Performance
• High Availability
• Easy Scalability
• Geospatial Data

67. Document
• An ordered set of keys and values
• like JavaScript objects
• no duplicate keys allowed
• type and case sensitive
• field order is not important nor guaranteed

68. Mongo Shell Remotely
• mongo ds045054.mlab.com:45054/quiz -u <dbuser> -p <dbpassword>
• <dbuser> is your database user name
• <dbpassword> is your database password

69. Shell Commands
• show dbs
• use <database name>
• show collections
• db.<collection name>.drop()

70. Queries
• db.<collection name>.find(<query>)
• skip()
• limit()
• sort()
• pretty()

71. Insert & Delete Data
• insert()
• remove(<query>)

72. Environment Variables
• process.env object holds environment vars
• Reading: var dbConnect =
process.env.dbConnect;
• Writing: process.env.mode = ‘test’;

73. Heroku Environment Vars
• Reading - heroku config
• heroku config:get var-name
• Writing - heroku config:set var=value
• heroku config:unset var-name

74. Setting Environment Vars
• http://bit.ly/rc-setenv
• Mac terminal - export variable=value

75. Mongoose

76. Mongoose
• Object Data Modeling (ODM)
• Mongoose makes MongoDB easier to work with
• Makes it easier to connect and to work with objects

77. Mongoose
• npm install mongoose —save
• var mongoose = require(‘mongoose’);
• mongoose.connect(<connection string>);

78. Mongoose Schema Types
• Array
• Boolean
• Buffer
• Date
• Mixed
• Number
• ObjectId
• String

79. Links
• https://git-scm.com/downloads
• https://nodejs.org/en/
• http://expressjs.com/
• https://www.heroku.com/
• https://mlab.com/

80. Links
• https://facebook.github.io/react/
• http://redux.js.org/
• https://reacttraining.com/react-router/

81. Summary
• React is good
• Redux makes it better
• Combine with Node & MongoDB to create
lightweight Web Apps