React Development with the MERN Stack

React Development with the MERN Stack
Cowork 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
• rockncoder@gmail.com
• @therockncoder
• Now a lynda.com Author!

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

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

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

Array Operators
• .isArray()
• .every()
• .forEach()
• .indexOf()
• .lastIndexOf()
• .some()
• .map()
• .reduce()
• .ﬁlter()

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); 
});

map
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; 
 
// 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);

ﬁlter
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; 
 
// 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);

reduce
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; 
 
// 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);

every
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; 
 
// 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);

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 braces 
let 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

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

Template strings
• Deﬁned by using opening & closing back ticks
• Templates deﬁned 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
• Doesn’t bind its own this, arguments, or super
• Facilitate a more functional style of coding
• Can’t be used as constructors

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

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)}`);

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
ﬁles
• import <name> from “<module name>”;

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;

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

Vital Deﬁnitions
• 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
• Module bundler
• Replaces System.JS
• Works with JS, CSS, and HTML
• Miniﬁes, concatenates, and bundles

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 ﬁle

Loaders
• Goal: Webpack handler loading of all of your app’s
assets
• Every ﬁle is a module
• Webpack only understands only JavaScript
• Loaders transform ﬁles into modules

Rules
• test: Identifies the file’s 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
• 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
• 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 ﬂow
• 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
• import PropTypes from ‘prop-types’;

Flux
• Application architecture for building user interfaces
• A pattern for managing data ﬂow in your app
• One way data ﬂow
• 4 main parts: Dispatcher, Store, Action, & View

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Queries
• db.<collection name>.ﬁnd(<query>)
• skip()
• limit()
• sort()
• pretty()

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

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

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

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

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

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

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

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

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

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

React Development with the MERN Stack

More Related Content

What's hot

What's hot (20)

Similar to React Development with the MERN Stack

Similar to React Development with the MERN Stack (20)

More from Troy Miles

More from Troy Miles (20)

Recently uploaded

Recently uploaded (20)

React Development with the MERN Stack