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
Tweet

More Decks by Natalie MacLees

Other Decks in Technology

Transcript

  1. Before You React
    by Natalie MacLees & Nathan Tyler

    View Slide

  2. What is React?

    View Slide

  3. Example: License Activation

    View Slide

  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

    View Slide

  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()

    View Slide

  6. Perfomance
    Virtual DOM Real DOM

    View Slide

  7. Perfomance
    Virtual DOM Real DOM

    View Slide

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

    View Slide

  9. Our Story

    View Slide

  10. Recommended Tools

    View Slide

  11. Node
    • package.json
    • npm install {pkg name} --save
    • .gitignore node modules
    • run npm update after git pull

    View Slide

  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

    View Slide

  13. var profile =

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

    View Slide

  14. Recommended Approaches

    View Slide

  15. Beginner-friendly: Container Components
    Pure

    Component
    Pure

    Component
    Container Component
    Server
    Maintains state
    State passed
    as props
    Ajax

    View Slide

  16. A bit more advanced: Redux, Thunk, Router
    Redux + Thunk
    React Router
    Server
    React Components
    Redux
    Async actions
    react-redux
    JSON
    props

    View Slide

  17. JavaScript things to know
    or brush up on

    View Slide

  18. Things you should know about
    objects

    View Slide

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

    View Slide

  20. object.assign()
    Can be used to clone objects
    var cat = {face: 'fuzzy'};
    var myCat = Object.assign({}, cat);

    View Slide

  21. Things you should know about
    functions

    View Slide

  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, ' + this.name + ' you ' +
    this.temperament + ' kitty.');
    }
    var callChloe = callKitty.bind(cat1);
    var callRisa = callKitty.bind(cat2);
    callChloe();
    callRisa();

    View Slide

  23. 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');

    View Slide

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

    View Slide

  25. Things you should know about
    arrays

    View Slide

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

    View Slide

  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 el.country === 'Japan';
    });

    View Slide

  28. Things you should know about
    ECMAScript 6

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  33. Modules
    • Maintainability
    • Namespacing
    • Reusability
    • Each module is contained in its own file

    View Slide

  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;

    View Slide

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

    View Slide

  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';

    View Slide

  37. WTF is … ?
    It's two things, actually:
    • rest operator
    • spread operator
    …but nobody will tell you that

    View Slide

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

    View Slide

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

    View Slide

  40. Spread operator
    let red = ['strawberry', 'apple', 'raspberry'];
    let yellow = ['banana', 'lemon'];
    let all = [...red, ...yellow];
    Handy for constructing arrays from other arrays:

    View Slide

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

    View Slide

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

    View Slide

  43. class Settings extends Component {
    constructor(props) {
    super(props);
    ...
    }
    render(){
    ...
    }
    }
    Classes
    …well kind of…

    View Slide

  44. Takeaways

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. Thank You

    View Slide