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+
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/