原文:http://egorsmirnov.me/2015/05/22/react-and-es6-part1.html 
これはシリーズの最初の文章で、その中でReactとECMAScript 6の使い方を検討します.
GitHubには本明細書に対応するコードが提供されている.
ReactJS v 0から.13.0 Beta 1リリース以降、ECMAScript 6の機能をReactコンポーネントに使用できます.開発者にどのようなメリットをもたらしましたか?
ECMAScript 6(またはECMAScript 2015)は、JavaScriptの世界に多くの新しい機能を持ち込む新しい標準です.このような機能には、クラス(classes)、矢印関数(arrow functions)、残りのパラメータ(rest parameters)、反復器(iterators)、ジェネレータ(generators)......などなど.
ECMAScript 2015の新機能に慣れていない場合は、このリンクを使用して操作することを強くお勧めします.
ES 6互換性テーブルを表示すると、すべてのブラウザがES 2015の各機能をサポートしているわけではないことに気づきます.幸いなことに、ベンダーがECMAScript 6機能をブラウザに公開するまで、あまり時間を費やす必要はありません.既存のソリューションはコンバータと呼ばれ、ES 6で作成したコードをES 5互換コードに変換します.これは、CoffeeScriptがCoffeeコードをJavaScriptに変換する方法とよく似ています.
その一つの解決策はBabelで、非常に不思議なツールです.著者に感謝します.Babelは多くの異なるフレームワークをサポートし、システムを構築し、フレームワークをテストし、テンプレートエンジンをサポートしています.ここを見てください.
次の例では、babelがどのように動作しているかをすばやく理解できます.たとえば、ECMAScript 6では、次のコードを記述しています.

var evenNumbers = numbers.filter((num) => num % 2 === 0);

babel変換後:

var evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});

同様の概念は他のES 6言語構造に適用される.
開発環境の準備
babelと連続したワークフローを確立するためにGulpを使用します.これはnodeです.js上に構築されたタスク実行器は、煩雑なタスクを自動的に実行することで、操作を改善します.Gruntを知っていれば、Gulpにも同じ目的があります.

明らかにnodeが必要ですjs.それがない場合は、システムにインストールします.

次に、Gulp:npm install --g gulpをグローバルにインストールする必要があります.

プロジェクトのディレクトリに切り替えます.package.jsonは、npm initを使用してファイルを初期化します.

は、npm install --save react react-domを実行する.react npmモジュールがnode_modulesフォルダにインストールされ、Reactライブラリがpackageとして保存されます.jsonファイルの依存項目.

は、npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-reactを実行する.これにより、より多くの開発依存node_modulesがインストールされます.

手順5でインストールしたモジュールの詳細については、Browserify、Babelify、ES 6に関する記事を参照してください.
gulpfileを作成する.js gulpfile.js次の内容を使用して、プロジェクトのルートディレクトリで指定されたファイルを作成します.

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function () {
    return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('*.jsx', ['build']);
});

gulp.task('default', ['watch'])

上記のケースコード:

1-4行目.nodeをインストールする必要があります.jsモジュールは、変数に割り当てられます.

6行目.buildは、実行可能なgulpタスクgulp buildを入力することによって定義される.

7行目.buildのタスクが何をするかを説明し始めました.GulpはBrowserify app.jsxを使用すると伝えた.また、デバッグモードを開くと、開発に役立ちます.

第8-11行.Babelify変換をコードに適用します.これにより、ECMAScript 6に記述されたコードをECMAScript 5に変換することができる.次に、結果をdist/bundle.jsファイルに出力します. 

第14-16行.watchというgulpタスクを定義し、gulp watchを入力して実行できます.このタスクは、jsxファイルに変更が発生するたびに構築タスクを実行します.

第18行.gulpを入力して実行できるデフォルトgulpタスクを定義しました.このタスクは監視タスクのみを実行します.

gulp端末を入力してEnterキーを押すだけです.Reactコンポーネントの内部の変更を監視し、すべてのコンテンツを再構築します.
JSXとBabel.jsxではなく.js拡張子を使用していることに気づいたかもしれません.JSXはReactJSチームが開発した特殊なJavaScript構文拡張です.このフォーマットはReactJSコンポーネントの開発をより容易にするために提供される.
以下はJSXの詳細です.
もう一つの役に立つもの-Babelifyは箱を開けてJSX文法(この内容に関するブログ)を理解します.
 
ECMAScript 6を使用して最初のReactコンポーネントを記述
ES 6を使用して、私たちの最初の非常に簡単なコンポーネントを作成する時です.hello-world.jsxプロジェクトのルートディレクトリというファイルを追加します.

import React from 'react';

class HelloWorld extends React.Component {
    render() {
        return 
Hello from {this.props.phrase}!
;
    }
}

export default HelloWorld;

いくつかの説明:

行目.Reactライブラリをインポートし、変数Reactという名前の変数に入れます.

3-8行目.React.Componentクラスを拡張してES 6クラスを使用してReactコンポーネントを作成します.パラメータを含むラベルを返す非常に簡単なrenderメソッドを追加します.

9行目.作成したばかりのコンポーネントを外部世界export default HelloWorldにエクスポートするために使用します.

より簡単に理解するために、同じコンポーネントのコードを配置しましたが、ES 6クラスを使用しないで作成しました.

import React from 'react';

var HelloWorld = React.createClass({
    render: function() {
        return (
            
Hello from {this.props.phrase}!
        );
    }
});

export default HelloWorld;

まとめ;
簡単な例を完成させましょう.
名前のファイルapp.jsxを作成します.

import HelloWorld from './hello-world';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    ,
    document.querySelector('.root')
);

ここでは、HelloWorldが前に作成したコンポーネントをインポートし、phraseのコンポーネントのpropを設定します.また、react-domコンポーネントをレンダリングするために、特別なHelloWorldパッケージを使用することに注意してください.それは、コアReactパケットがReactバージョン0.14からレンダーパケットから分離されるためである.
次に、index.htmlを作成します.

 
からgulp(dist/bundle.jsファイルを する)を し、ブラウザでこのHTMLファイルを きます.
の を るべきです.