概要
Babelは広く使われているトランスコーダで、ES 6コードをES 5コードに変えることができます.また、ReactのJSX書き方にも対応できます.
インストール
Nodejsをインストールしました.現段階でnpmでダウンロードしたのは全部6.0以上のバージョンです.5.0バージョンとの変化はまだ大きいです.ここで使ったのは6.0の最新版です.
まずcmd/端末を開けて、グローバルにbabel-cli(コマンドライントランスコード)をインストールしてください.
npm install-g babel-cli
そしてプロジェクトのルートディレクトリに入り、package.jsonを作成します.

    npm init --yes

プロジェクトのローカルにインストールします.

    npm install --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-react

設定
プロジェクトのルートディレクトリの下で新しいファイル「.babelrc」を作成します.このファイルはトランスコード規則とプラグインを設定します.基本的なフォーマットは以下の通りです.

{
  "presets": [],
  "plugins": []
}

presetsフィールドはトランスコードルールを設定します.私たちはbabel-prest-es 2015とbabel-prest-reactをインストールしました.前者はES 6をES 5に変換しました.後者はReactのトランスコードルールです.この2つのルールを「.babelrc」に書き込みます.

{
  "presets": [
    "es2015", "react"
  ],
  "plugins": []
}

コンパイル
ルートディレクトリの下に2つのフォルダを作成します.srcは開発時のファイルのディレクトリで、libはコンパイルを実行してファイルを出力するディレクトリです.
今srcフォルダの下でtest.jsを作成します.ここでES 6でReactを書きます.

class Test extends React.Component {
    render() {
        return (
            
test
        );
    }
}
ReactDOM.render(, document.body);

ここでcmd/端末で「バベル入力ディレクトリ-d出力ディレクトリ」という文を実行します.

babel src -d lib

実行が成功すると、libフォルダの下にtest.jsが追加されます.

var Test = function (_React$Component) {
    _inherits(Test, _React$Component);

    function Test() {
        _classCallCheck(this, Test);
        return _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).apply(this, arguments));
    }
    
    _createClass(Test, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "h1",
                null,
                "test"
            );
        }
    }]);
    
    return Test;
}(React.Component);

ReactDOM.render(React.createElement(Test, null), document.body);

packge.jsonを書き換える
package.jsonでscripts属性を書き換える

"scripts": {
    "babel": "babel src -d lib"
}

ここでcmd/端末が動作します.

npm run babel

実行に成功すると、バーベルSrc-d libの効果は同じです.