React on ES6+

Some of the ES6+ features are great companions when using React. This presentation introduces you to some of them.

This talk was inspired by Steven Luscher's blog post: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

Transcript

1. React on ES6+
   

   View Slide

2. React on ES6+ @nikgraf
   Nik Graf
   @nikgraf

   nik@nikgraf.com
   Creator of Belle
   Working with StarterSquad
   

   View Slide

3. React on ES6+ @nikgraf
   ECMAScript 5
   December 2009 - ECMAScript 5 was published
   

   View Slide

4. React on ES6+ @nikgraf
   Why bother about ES6+?
   Classes

   Enhanced Object Literals

   Block-scoped binding constructs (let + const)

   Property Initialisers

   Arrow Functions

   Template Strings

   Spread Attributes

   Deconstructing Attributes

   Generators

   DataStructures (Map, Set, WeakMap, WeakSet)

   … and many more
   

   View Slide

5. React on ES6+ @nikgraf
   ES6 is finalised
   

   Final Draft April 14, 2015 Rev 38

   http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#final_draft

   

   
   

   View Slide

6. React on ES6+ @nikgraf
   People use ES6+
   

   View Slide

7. React on ES6+ @nikgraf
   ECMAScript 6
   April 2015 - ECMAScript 2015 (ES6) finalised
   

   View Slide

8. React on ES6+ @nikgraf
   Compilers
   Traceur
   JSTransform (deprecated)
   Babel
   

   View Slide

9. React on ES6+ @nikgraf
   

   Created by Sebastian McKenzie (started fall 2014)
   

   - JSX Support, ES6 Support, ES7 Support

   - Widely adopted
   

   View Slide

10. React on ES6+ @nikgraf
    Facebook ❤ Babel
    

    View Slide

11. React on ES6+ @nikgraf
    Block-scoped binding constructs
    const hello = 'Hello';
    hello = 'Hola'; // this is not valid
    

    View Slide

12. React on ES6+ @nikgraf
    Block-scoped binding constructs
    function varTest() {
    var x = 31;
    if (true) {
    var x = 71; // same variable!
    console.log(x); // 71
    }
    console.log(x); // 71
    }
    

    View Slide

13. React on ES6+ @nikgraf
    Block-scoped binding constructs
    function letTest() {
    let x = 31;
    if (true) {
    let x = 71; // different variable
    console.log(x); // 71
    }
    console.log(x); // 31
    }
    

    View Slide

14. React on ES6+ @nikgraf
    Classes
    // The ES5 way
    var Photo = React.createClass({
    handleDoubleTap: function(e) { … },
    render: function() { … },
    });
    // The ES6+ way
    class Photo extends React.Component {
    handleDoubleTap(e) { … }
    render() { … }
    }
    

    View Slide

15. React on ES6+ @nikgraf
    Classes
    // The ES5 way
    var EmbedModal = React.createClass({
    componentWillMount: function() { … },
    });
    // The ES6+ way
    class EmbedModal extends React.Component {
    constructor(props) {
    super(props);
    }
    }
    

    View Slide

16. React on ES6+ @nikgraf
    Property Initialisers
    // The ES5 way
    var Video = React.createClass({
    getDefaultProps: function() {
    return {
    autoPlay: false,
    maxLoops: 10,
    };
    },
    getInitialState: function() {
    return {
    loopsRemaining: this.props.maxLoops,
    };
    },
    propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired
    },
    });
    

    View Slide

17. React on ES6+ @nikgraf
    Property Initialisers
    // The ES6+ way
    class Video extends React.Component {
    static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
    }
    static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired
    }
    state = {
    loopsRemaining: this.props.maxLoops,
    }
    }
    

    View Slide

18. React on ES6+ @nikgraf
    Arrow Functions
    // ES5
    [2,2,3].map(function(item) {
    return item + 1;
    });
    // Expression bodies
    [2,2,3].map(item => item + 1);
    // [3,3,4]
    [2,2,3].map((item, index) => item + index);
    // [2,3,5]
    // Statement bodies
    [2,2,3].forEach(item => {
    if (item === 2) {
    console.log('Found the number 2');
    }
    });
    

    View Slide

19. React on ES6+ @nikgraf
    Arrow Functions
    // Lexical this
    const bob = {
    _name: "Bob",
    _friends: [],
    printFriends() {
    this._friends.forEach(friend =>
    console.log(this._name + " knows " + friend));
    }
    }
    

    View Slide

20. React on ES6+ @nikgraf
    Template Strings
    // Multiline strings
    const text = `In ES5 this is
    not legal.
    Good to know.`;
    // Interpolate variable bindings
    const city = 'Vienna';
    const time = 'today';
    // ES5
    console.log('Hello ' + city + ', how are you ' + time + '?');
    // ES6+
    console.log(`Hello ${city}, how are you ${time}?`);
    // results in "Hello Vienna, how are you today?"
    

    View Slide

21. React on ES6+ @nikgraf
    Spread Attributes
    const photoSet = {
    coverIndex: 1,
    photos: [
    { url: '…' },
    { url: '…' }
    ]
    }
    // explicit assignment
    photos={ photoSet.photos } />
    // spread attributes
    
    

    View Slide

22. React on ES6+ @nikgraf
    Deconstructing
    var x = [1,2,3];
    // ES5
    var a = x[0];
    var b = x[2];
    // ES6+ list matching
    const [a, , b] = x;
    

    View Slide

23. React on ES6+ @nikgraf
    Deconstructing
    this.props = {
    className: 'photo box',
    isSquare: true,
    width: 200
    }
    const { className, ...others } = this.props;
    // others contains all properties of this.props
    // except for className
    // className == 'photo box'
    // others == { isSquare: true, width: 200 }
    

    View Slide

24. React on ES6+ @nikgraf
    Deconstruct & Spread
    class PhotoPage extends React.Component {
    onLoadMore() { … }
    render() {
    const {
    className,
    ...otherProps
    } = this.props;
    return (
    
    
    
    Load more
    
    
    );
    }
    }
    

    View Slide

25. React on ES6+ @nikgraf
    ProTip: Eslint
    created by Nicholas Zakas
    - Enable/Disabled Rules on demand
    - Follows the standard + JSX Support
    - AirBnB’s fantastic JavaScript Guide + .eslintrc

    https://github.com/airbnb/javascript/
    

    View Slide

26. React on ES6+ @nikgraf
    Eslint as Atom Plugin
    

    View Slide

27. React on ES6+ @nikgraf
    End
    Special thanks to Steven Luscher for the original post
    on “React on ES6+”

    https://babeljs.io/blog/2015/06/07/react-on-es6-plus
    Checkout Belle

    https://nikgraf.github.io/belle/
    

    View Slide