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/

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/