React on ES6+
React on ES6+ @nikgraf
Nik Graf@nikgraf
Creator of Belle
Working with StarterSquad
React on ES6+ @nikgraf
ECMAScript 5December 2009 - ECMAScript 5 was published
React on ES6+ @nikgraf
Why bother about ES6+?Classes Enhanced Object Literals Block-scoped binding constructs (let + const) Property Initialisers Arrow Functions Template StringsSpread AttributesDeconstructing Attributes Generators DataStructures (Map, Set, WeakMap, WeakSet) … and many more
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
🎉🎂 🎈🎊
React on ES6+ @nikgraf
People use ES6+
React on ES6+ @nikgraf
ECMAScript 6April 2015 - ECMAScript 2015 (ES6) finalised
React on ES6+ @nikgraf
Compilers
Traceur
JSTransform (deprecated)
Babel
React on ES6+ @nikgraf
Created by Sebastian McKenzie (started fall 2014)
- JSX Support, ES6 Support, ES7 Support - Widely adopted
React on ES6+ @nikgraf
Facebook ❤ Babel
React on ES6+ @nikgraf
Block-scoped binding constructs
const hello = 'Hello';hello = 'Hola'; // this is not valid
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}
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}
React on ES6+ @nikgraf
Classes// The ES5 wayvar Photo = React.createClass({ handleDoubleTap: function(e) { … }, render: function() { … },});
// The ES6+ wayclass Photo extends React.Component { handleDoubleTap(e) { … } render() { … }}
React on ES6+ @nikgraf
Classes// The ES5 wayvar EmbedModal = React.createClass({ componentWillMount: function() { … },});
// The ES6+ wayclass EmbedModal extends React.Component { constructor(props) { super(props); }}
React on ES6+ @nikgraf
Property Initialisers// The ES5 wayvar 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 },});
React on ES6+ @nikgraf
Property Initialisers// The ES6+ wayclass 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, }}
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'); }});
React on ES6+ @nikgraf
Arrow Functions
// Lexical thisconst bob = { _name: "Bob", _friends: [], printFriends() { this._friends.forEach(friend => console.log(this._name + " knows " + friend)); }}
React on ES6+ @nikgraf
Template Strings// Multiline stringsconst text = `In ES5 this is not legal.
Good to know.`;
// Interpolate variable bindingsconst city = 'Vienna';const time = 'today';
// ES5console.log('Hello ' + city + ', how are you ' + time + '?');// ES6+console.log(`Hello ${city}, how are you ${time}?`);// results in "Hello Vienna, how are you today?"
React on ES6+ @nikgraf
Spread Attributesconst photoSet = { coverIndex: 1, photos: [ { url: '…' }, { url: '…' } ]}
// explicit assignment<PhotoGrid coverIndex={ photoSet.coverIndex } photos={ photoSet.photos } />// spread attributes<PhotoGrid { ...photoSet } />
React on ES6+ @nikgraf
Deconstructing
var x = [1,2,3];// ES5var a = x[0];var b = x[2];
// ES6+ list matchingconst [a, , b] = x;
React on ES6+ @nikgraf
Deconstructingthis.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 }
React on ES6+ @nikgraf
Deconstruct & Spreadclass 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> ); }}
React on ES6+ @nikgraf
ProTip: Eslintcreated by Nicholas Zakas
- Enable/Disabled Rules on demand
- Follows the standard + JSX Support
- AirBnB’s fantastic JavaScript Guide + .eslintrc https://github.com/airbnb/javascript/
React on ES6+ @nikgraf
Eslint as Atom Plugin
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 Bellehttps://nikgraf.github.io/belle/
Top Related