React Development with the MERN Stack
5 likes•2,241 views
The document provides an overview of a workshop on React development using the MERN stack, detailing installation steps, programming concepts, and tools like Node.js, Express, MongoDB, and Redux. It covers various JavaScript features such as array operators, ES6 syntax, destructuring, and the use of webpack and Babel. The workshop aims to equip developers with the skills to build efficient web applications while emphasizing best practices and component-based architecture.
![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);
});](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-9-320.jpg)
![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);](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-10-320.jpg)
![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);](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-11-320.jpg)
![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);](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-12-320.jpg)
![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);](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-13-320.jpg)
![Example #2
module: {
rules: [
{
test: /.jsx*$/,
exclude: [/node_modules/, /.+.config.js/],
loader: 'babel-loader',
},](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-36-320.jpg)
![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'
}
],
},](https://image.slidesharecdn.com/react-dev-with-the-mern-stack-2017-04-22-170423144234/85/React-Development-with-the-MERN-Stack-37-320.jpg)
React Development with the MERN Stack
- 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 • [email protected] • @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
- 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