React on ES6+

React on ES6+ @nikgraf

Nik Graf@nikgraf

nik@nikgraf.com

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/