React on ES6+

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/

Afcee4ad6e383e26799ff05681d1a2a5?s=128

Nikolaus Graf

August 12, 2015
Tweet

Transcript

  1. React on ES6+

  2. React on ES6+ @nikgraf Nik Graf @nikgraf
 nik@nikgraf.com Creator of

    Belle Working with StarterSquad
  3. React on ES6+ @nikgraf ECMAScript 5 December 2009 - ECMAScript

    5 was published
  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
  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
 

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

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

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

  9. React on ES6+ @nikgraf 
 Created by Sebastian McKenzie (started

    fall 2014) 
 - JSX Support, ES6 Support, ES7 Support
 - Widely adopted
  10. React on ES6+ @nikgraf Facebook ❤ Babel

  11. React on ES6+ @nikgraf Block-scoped binding constructs const hello =

    'Hello'; hello = 'Hola'; // this is not valid
  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 }
  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 }
  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() { … } }
  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); } }
  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 }, });
  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, } }
  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'); } });
  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)); } }
  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?"
  21. React on ES6+ @nikgraf Spread Attributes const photoSet = {

    coverIndex: 1, photos: [ { url: '…' }, { url: '…' } ] } // explicit assignment <PhotoGrid coverIndex={ photoSet.coverIndex } photos={ photoSet.photos } /> // spread attributes <PhotoGrid { ...photoSet } />
  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;
  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 }
  24. React on ES6+ @nikgraf Deconstruct & Spread class PhotoPage extends

    React.Component { onLoadMore() { … } render() { const { className, ...otherProps } = this.props; return ( <div className={className}> <PhotoGrid {...otherProps} /> <button onClick={ this.onLoadMore.bind(this) }> Load more </button> </div> ); } }
  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/
  26. React on ES6+ @nikgraf Eslint as Atom Plugin

  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/