Before You React

Before You React

A joint presentation with Nathan Tyler of Tyler Digital. An overview of React and all the things you should learn and understand before diving into building your first React project.


Natalie MacLees

February 07, 2017


  1. Before You React by Natalie MacLees & Nathan Tyler

  2. What is React?

  3. Example: License Activation

  4. The Old Way Listen for form submit event, fire Ajax

    request with entered key Show loading animation while we wait for the ajax response to come back Response received, license key found. Hide loading animation, show obfuscated license key, show success message, add Remove button and bind event handler. If license key isn't found, display error message to end user
  5. The React Way state = { loading: false, license: “”,

    isLicenseActive: false } render(); state = { loading: true, license: “1294u09u…”, isLicenseActive: false } render() state = { loading: false, license: “1294u09u…”, isLicenseActive: true } render() state = { loading: false, license: “dfasdfasdf…”, isLicenseActive: false } render()
  6. Perfomance Virtual DOM Real DOM

  7. Perfomance Virtual DOM Real DOM

  8. Component Lifecycle getInitialState() getDefaultProps() componentWillReceiveProps() shouldComponentUpdate() componentWillMount() componentWillUpdate() render() componentDidMount()

    componentDidUpdate() componentWillUnmount()
  9. Our Story

  10. Recommended Tools

  11. Node • package.json • npm install {pkg name} --save •

    .gitignore node modules • run npm update after git pull
  12. Webpack • Module bundler - treats every kind of file

    as a module • Given one file, Webpack can detect all dependencies, then process and bundle browser-ready files • Lots of handy plugins, npm modules, and integrations with other tools
  13. var profile = <div> <img src="avatar.png" className="profile" /> <h3>{[user.firstName, user.lastName].join('

    ')}</h3> </div>; var profile = React.createElement("div", null, React.createElement("img", { src: "avatar.png", className: "profile" }), React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) );
  14. Recommended Approaches

  15. Beginner-friendly: Container Components Pure
 Component Pure
 Component Container Component Server

    Maintains state State passed as props Ajax
  16. A bit more advanced: Redux, Thunk, Router Redux + Thunk

    React Router Server React Components Redux Async actions react-redux JSON props
  17. JavaScript things to know or brush up on

  18. Things you should know about objects

  19. object.assign() Can be used to merge objects var defaultSettings =

    {showArrows: true, showPagination: false}; var mySettings = {showPagination: true}; var settings = Object.assign({}, defaultSettings, mySettings); /* Settings */ { showArrows: true, showPagination: true };
  20. object.assign() Can be used to clone objects var cat =

    {face: 'fuzzy'}; var myCat = Object.assign({}, cat);
  21. Things you should know about functions

  22. function.bind() Returns a new function with the this value set

    explicitly: var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2 = {name: 'Risa', temperament: 'scaredy'}; function callKitty(){ alert('Come here, ' + + ' you ' + this.temperament + ' kitty.'); } var callChloe = callKitty.bind(cat1); var callRisa = callKitty.bind(cat2); callChloe(); callRisa();
  23. Invoke a JavaScript function with a comma-separated list of

    arguments and the this value set explicitly var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2 = {name: 'Risa', temperament: 'scaredy'}; function callKitty(greeting){ alert(greeting + ', ' + + ' you ' + this.temperament + ' kitty.'); }, 'Come here');, 'Hello');
  24. function.apply() var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2

    = {name: 'Risa', temperament: 'scaredy'}; function callKitty(greeting){ alert(greeting + ', ' + + ' you ' + this.temperament + ' kitty.'); } callKitty.apply(cat1, ['Come here']); callKitty.apply(cat2, ['Hello']); Invoke a JavaScript function with an array of arguments and the this value set explicitly
  25. Things you should know about arrays

  26. Create a new array with the results of calling

    a function on every element var numbers = [3, 27, 17, 62, 354, 10]; var numbersTimesFive ={ return el * 5; });
  27. array.filter() Used to filter the items in an array and

    return only some items: var cats = [ {name:'Maru', country: 'Japan'}, {name:'Grumpy Cat', country: 'US'}, {name:'Snoopy', country: 'China'}, {name:'Lil Bub', country: 'US'}, {name:'Shironeko', country: 'Japan'} ]; var catsFromJapan = cats.filter(function(el){ return === 'Japan'; });
  28. Things you should know about ECMAScript 6

  29. var, let, and const var loopconf = 'Awesome!'; declares a

    variable global scope or function scope
  30. var, let, and const let loopconf = 'Awesome!'; declares a

    variable block scope
  31. var, let, and const const LOOPCONF = 'Awesome!'; creates a

    read-only reference to a value global, block, or function scope value is not immutable
  32. Object Literal Property Value Shorthand Can be used when the

    property value has the same name as the identifier: function createCat(name, color) { return { type: 'cat', name, color }; } Shorthand for: function createCat(name, color) { return { type: 'cat', name: name, color: color }; }
  33. Modules • Maintainability • Namespacing • Reusability • Each module

    is contained in its own file
  34. Exports You can have a single default export per module:

    var mathUtils = { sum: function(a, b) { return a + b; }, product: function(a, b) { return a * b; } }; export default mathUtils;
  35. Exports You can have multiple named exports: export const sqrt

    = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); }
  36. Imports Import named exports by wrapping them in curly brackets:

    import { square, diag } from 'mathlib'; Import default exports by using just their name: import utils from 'mathlib';
  37. WTF is … ? It's two things, actually: • rest

    operator • spread operator …but nobody will tell you that
  38. Rest operator Used to get the arguments passed to a

    function as an array function countFruits(...fruits) { return fruits.length; } countFruits('raspberry', 'banana', 'strawberry');
  39. Rest operator Can also be used to gather the rest

    of the arguments that remain: function bestFruit(best, ...otherFruits) { console.log('The best fruit is', best); } bestFruit('raspberry', 'strawberry', 'banana');
  40. Spread operator let red = ['strawberry', 'apple', 'raspberry']; let yellow

    = ['banana', 'lemon']; let all = [, ...yellow]; Handy for constructing arrays from other arrays:
  41. Arrow Functions Skip typing function and return in anonymous function

    expressions. So instead of typing: var newArray ={ return s.length }); You can just type: var newArray = s => s.length );
  42. Arrow Functions Also do not create their own context. Instead,

    they capture the this value of the enclosing context: function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| properly refers to the person object }, 1000); }
  43. class Settings extends Component { constructor(props) { super(props); ... }

    render(){ ... } } Classes …well kind of…
  44. Takeaways

  45. What to use & not use ECMAScript 5 Browserify/Grunt/Gulp react-jsx/reactify

    Flux ECMAScript 6 NPM + Webpack Babel Redux * * but get started with Ajax and a container + pure component
  46. Resources React Stuff • Pro React book and Git repo: • Create-React-App: • Advanced-Boilerplate • React.js Intro: who-know-just-enough-jquery-to-get-by/ • React primer: ecosystem-part-1-of-3
  47. Resources More React Stuff • Best practices for using Ajax

    with React: practices/ • Setting up React for ES6 with Webpack and Babel: setting-up-react-for-es6-with-webpack-and-babel-2.html • Weekly React Newsletter: • Let’s Build a Redux Powered React Application: powered-react-application • A beginner's guide to npm: for-front-end-developers/
  48. Resources JavaScript Stuff • call(), bind(), apply() bind-methods-are-essential-for-javascript-professionals/ •

    object.assign() Reference/Global_Objects/Object/assign • Global_Objects/Array/map • array.filter() Reference/Global_Objects/Array/filter
  49. Resources ECMAScript 6 Stuff • ES6 features playlist: list=PL0zVEGEvSaeHJppaRLrqjeTPnCH6vw-sm

    • Arrow Functions: JavaScript/Reference/Functions/Arrow_functions • Arrow Functions in Depth: depth-arrow-functions/ • var, let, and const:
  50. Resources More ECMAScript 6 Stuff • Modules, importing, and exporting: v=qi_rLTcXers#t=1m49s • Object Literal Property Value Shorthand object-literal-property-value-shorthand • Spread and rest operators: javascript/ • Things You Can Do In ES6 That Can't Be Done In ES5: watch?v=GbVAMgU3Jj0
  51. Thank You