Install Babel with plugins
$ npm install babel-core babel-loader --save-dev
$ npm install babel-plugin-transform-es2015-arrow-functions --save-dev
$ npm install babel-preset-es2015 babel-preset-stage-0 --save-dev
.babelrc
{
"plugins": ["transform-es2015-arrow-functions"]
"presets": ["es2015", "stage-0"]
}
webpack.config.js
query: {
plugins: ['transform-es2015-arrow-functions'],
presets: ['es2015', 'stage-0'],
}
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
class Cat {
@readonly
meow() {
return 'Cat says meow!';
}
}
var garfield = new Cat();
garfield.meow = function() {
console.log('I want lasagne!');
}
//Exception: Attempted to assign to readonly property
function superhero(target) {
target.isSuperhero = true;
target.power = 'flight';
}
@superhero
class MySuperHero() {}
console.log(MySuperHero.isSuperhero); // true
var DefaultNameMixin = {
getDefaultProps: function () {
return {name: "Skippy"};
}
};
var ComponentOne = React.createClass({
mixins: [DefaultNameMixin],
render: function() {
return <h2>Hello {this.props.name}</h2>;
}
});
var DefaultName = ComposedComponent => class extends Component {
render() {
return (
<ComposedComponent
{...this.props}
name={this.props.name || "Skippy"}
/>
);
}
};
class ComponentOne extends Component {
render() {
return <h2>Hello {this.props.name}</h2>;
}
}
var ComponentOne = DefaultName(ComponentOne);
var DefaultName = ComposedComponent => class extends Component {
render() {
return (
<ComposedComponent
{...this.props}
name={this.props.name || "Skippy"}
/>
);
}
};
@DefaultName
class ComponentOne extends Component {
render() {
return <h2>Hello {this.props.name}</h2>;
}
}
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
export class Counter extends React.Component {
static propTypes = { initialCount: React.PropTypes.number };
static defaultProps = { initialCount: 0 };
state = { count: this.props.initialCount };
tick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
// Before
var a2 = a.map(function(s){ return s.length });
// After
var a3 = a.map( s => s.length );
function Person() {
var self = this;
self.age = 0;
setInterval(function growUp() {
self.age++;
}, 1000);
}
function Person(){
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
Before
After
class Counter extends React.Component {
constructor() {
super();
this.tick = this.tick.bind(this);
}
tick() { ... }
...
}
class Counter extends React.Component {
tick = () => {
...
}
...
}
Before
After
if (arr.indexOf(el) >= 0) {
...
}
if (arr.includes(el)) {
...
}
Before
After
try {
var story = getJSONSync('story.json');
var chapter1 = getJSONSync(story.chapterUrls[0]);
addHtmlToPage(chapter1.html);
}
catch (e) {
addTextToPage("Failed to show chapter");
}
document.querySelector('.spinner').style.display = 'none';
getJSON('story.json', (error, story) => {
if (error) {
addTextToPage("Failed to show chapter");
document.querySelector('.spinner').style.display = 'none';
} else {
getJSON(story.chapterUrls[0], (error, story) => {
if(error) {
addTextToPage("Failed to show chapter");
} else {
addHtmlToPage(chapter1.html);
}
});
document.querySelector('.spinner').style.display = 'none';
}
});
getJSON('story.json').then(function(story) {
return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
addHtmlToPage(chapter1.html);
}).catch(function() {
addTextToPage("Failed to show chapter");
}).then(function() {
document.querySelector('.spinner').style.display = 'none';
});
async function loadStory() {
try {
let story = await getJSON('story.json');
let chapter1 = await getJSON(story.chapterUrls[0]);
addHtmlToPage(chapter1.html);
} catch (e) {
addTextToPage("Failed to show chapter");
}
document.querySelector('.spinner').style.display = 'none';
}
async function() {
await loadStory();
console.log("Yey, story successfully loaded!");
}