ES5をES6/ES7にリプレースする

2817 ワード
es7 es6 es6 テキストリンク

import/require class

ES5

var React = require('react');
var Component = require('react').Component;
var PropTypes = require('react').PropTypes;

ES6/ES7

import React, { Component, PropTypes } from 'react'

classを作る

ES5

var App = React.createClass({
    ...
});

ES6/ES7

class App extends Component {
...
}

export function/class

ES5

//class
module.exports = App
//function
module.exports.functionName = function functionName() {
  ...
}

ES6/ES7

//class
export (default) App
//function
export (default) function functionName() {
  ...
}

(default)を使う方：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

valueの定義

ES5

name1 = this.props.name1
var name2 = this.props.name2

ES6/ES7

var name1 = this.props.name1
var {name1, name2} = this.props
let name3 = this.props.name3
const name4 = this.props.name4
...

functionの定義

ES5

functionName: function(params) {
   ...
  },

ES6/ES7

functionName(params) {
  ...
}

最後に

もっと詳しくES6/ES7情報
http://es6-features.org/
http://webapplog.com/es6/