Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Natalie MacLees

Other Decks in Technology


  1. 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
  2. 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()
  3. Node • package.json • npm install {pkg name} --save •

    .gitignore node modules • run npm update after git pull
  4. 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
  5. 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(" ")) );
  6. A bit more advanced: Redux, Thunk, Router Redux + Thunk

    React Router Server React Components Redux Async actions react-redux JSON props
  7. 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 };
  8. object.assign() Can be used to clone objects var cat =

    {face: 'fuzzy'}; var myCat = Object.assign({}, cat);
  9. 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, ' + this.name + ' you ' + this.temperament + ' kitty.'); } var callChloe = callKitty.bind(cat1); var callRisa = callKitty.bind(cat2); callChloe(); callRisa();
  10. function.call() 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 + ', ' + this.name + ' you ' + this.temperament + ' kitty.'); } callKitty.call(cat1, 'Come here'); callKitty.call(cat2, 'Hello');
  11. function.apply() var cat1 = {name: 'Chloe', temperament: 'friendly'}; var cat2

    = {name: 'Risa', temperament: 'scaredy'}; function callKitty(greeting){ alert(greeting + ', ' + this.name + ' 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
  12. array.map() Create a new array with the results of calling

    a function on every element var numbers = [3, 27, 17, 62, 354, 10]; var numbersTimesFive = numbers.map(function(el){ return el * 5; });
  13. 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 el.country === 'Japan'; });
  14. var, let, and const var loopconf = 'Awesome!'; declares a

    variable global scope or function scope
  15. var, let, and const const LOOPCONF = 'Awesome!'; creates a

    read-only reference to a value global, block, or function scope value is not immutable
  16. 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 }; }
  17. 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;
  18. 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)); }
  19. 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';
  20. WTF is … ? It's two things, actually: • rest

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

    function as an array function countFruits(...fruits) { return fruits.length; } countFruits('raspberry', 'banana', 'strawberry');
  22. 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');
  23. Spread operator let red = ['strawberry', 'apple', 'raspberry']; let yellow

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

    expressions. So instead of typing: var newArray = array.map(function(s){ return s.length }); You can just type: var newArray = array.map( s => s.length );
  25. 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); }
  26. 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
  27. Resources React Stuff • Pro React book and Git repo:

    http://www.pro-react.com/ • Create-React-App: https://github.com/facebookincubator/create-react-app • Advanced-Boilerplate https://github.com/pro-react/react-app-advanced-boilerplate • React.js Intro: http://reactfordesigners.com/labs/reactjs-introduction-for-people- who-know-just-enough-jquery-to-get-by/ • React primer: http://patternhatch.com/2016/07/06/a-primer-on-the-react- ecosystem-part-1-of-3
  28. Resources More React Stuff • Best practices for using Ajax

    with React: http://andrewhfarmer.com/react-ajax-best- practices/ • Setting up React for ES6 with Webpack and Babel: https://www.twilio.com/blog/2015/08/ setting-up-react-for-es6-with-webpack-and-babel-2.html • Weekly React Newsletter: http://react.statuscode.com/ • Let’s Build a Redux Powered React Application: https://stormpath.com/blog/build-a-redux- powered-react-application • A beginner's guide to npm: https://www.impressivewebs.com/npm-for-beginners-a-guide- for-front-end-developers/
  29. Resources JavaScript Stuff • call(), bind(), apply() http://javascriptissexy.com/javascript-apply-call-and- bind-methods-are-essential-for-javascript-professionals/ •

    object.assign() https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Object/assign • array.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/map • array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Array/filter
  30. Resources ECMAScript 6 Stuff • ES6 features playlist: https://www.youtube.com/playlist? list=PL0zVEGEvSaeHJppaRLrqjeTPnCH6vw-sm

    • Arrow Functions: https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Functions/Arrow_functions • Arrow Functions in Depth: https://hacks.mozilla.org/2015/06/es6-in- depth-arrow-functions/ • var, let, and const: https://www.youtube.com/watch?v=sjyJBL5fkp8
  31. Resources More ECMAScript 6 Stuff • Modules, importing, and exporting:

    https://www.youtube.com/watch? v=qi_rLTcXers#t=1m49s • Object Literal Property Value Shorthand https://ariya.io/2013/02/es6-and- object-literal-property-value-shorthand • Spread and rest operators: https://rainsoft.io/how-three-dots-changed- javascript/ • Things You Can Do In ES6 That Can't Be Done In ES5: https://www.youtube.com/ watch?v=GbVAMgU3Jj0