React on es6+

React on ES6+ @nikgraf
Nik Graf
@nikgraf 
nik@nikgraf.com
Creator of Belle
Working with StarterSquad

ECMAScript 5
December 2009 - ECMAScript 5 was published

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

ES6 is finalised
 
Final Draft April 14, 2015 Rev 38 
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#final_draft 
 
🎉🎂 🎈🎊

People use ES6+

ECMAScript 6
April 2015 - ECMAScript 2015 (ES6) ﬁnalised

Compilers
Traceur
JSTransform (deprecated)
Babel

 
Created by Sebastian McKenzie (started fall 2014)
 
- JSX Support, ES6 Support, ES7 Support 
- Widely adopted

Facebook ❤ Babel

Block-scoped binding constructs
const hello = 'Hello';
hello = 'Hola'; // this is not valid

function varTest() {
var x = 31;
if (true) {
var x = 71; // same variable!
console.log(x); // 71
}
}

function letTest() {
let x = 31;
if (true) {
let x = 71; // different variable
}
}

Classes
// The ES5 way
var Photo = React.createClass({
handleDoubleTap: function(e) { … },
render: function() { … },
});
// The ES6+ way
class Photo extends React.Component {
handleDoubleTap(e) { … }
render() { … }
}

Classes
// The ES5 way
var EmbedModal = React.createClass({
componentWillMount: function() { … },
});
// The ES6+ way
class EmbedModal extends React.Component {
constructor(props) {
super(props);
}
}

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
},
});

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,
}
}

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');
}
});

Arrow Functions
// Lexical this
const bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(friend =>
console.log(this._name + " knows " + friend));
}
}

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?"

Spread Attributes
const photoSet = {
coverIndex: 1,
photos: [
{ url: '…' },
{ url: '…' }
]
}
// explicit assignment
<PhotoGrid coverIndex={ photoSet.coverIndex }
photos={ photoSet.photos } />
// spread attributes
<PhotoGrid { ...photoSet } />

Deconstructing
var x = [1,2,3];
// ES5
var a = x[0];
var b = x[2];
// ES6+ list matching
const [a, , b] = x;

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 }

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>
);
}
}

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/

Eslint as Atom Plugin

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/

React on es6+

More Related Content

What's hot

Similar to React on es6+

More from Nikolaus Graf

Recently uploaded

React on es6+