前回 QiitaにReact.js をgulp で Babel + Browserify を利用して動作させるシンプルな環境を作ったで guip を利用した React.js を試す環境を作成しました。

次に React.js の公式Tutorial をやってみようかと思ったのですが、公式Tutorial 中で Ajax を利用したサーバー環境を動作させる必要があり、ちょっと大変な感じがしたので、今回 React.js の公式Tutorial を簡単に実行できる環境を gulp で作成しました。この環境を使えば、Ajax のサーバー環境まで含んでいるので、ダウンロードして、いくつかコマンドを実行するだけで、すぐに学習を始めることが可能です。

以下GitHub にて公開しています。
https://github.com/ma-tu/react-babel-gulp-browserify-tutorial

React.js の version は 0.14.5 で 2016年1月時点のライブラリで作成しています。Windows 環境で確認しています。
以下の Tutorial を利用します。

この React v0.14 チュートリアル【日本語翻訳】は本当に感謝です。

また Babel(babelify) を利用しているので、公式Tutorialの成果物を ECMA2015(ECMAScript6) で書き直してみました。

Babelは ECMA2015(ECMAScript6)で入る仕様を利用して記述したコードを、従来のブラウザで表示できるスクリプトに変換するためのツールです。

ECMAScript6 の情報は色々あると思いますが、以下は参考になると思います。
ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能

また ES6 で書き直したソースも以下にて公開しています。
https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6

利用方法

※ node / npm はインストール済みであることを前提とします。

1. gulp のインストール

※ gulp がインストール済みの場合は 2. ファイルの配置に進んでください。

gulp がインストールされていない場合は以下コマンドでグローバルインストールすることを推奨します。
gulp は非常に便利な開発ツールでグローバルインストールすることによりコマンドプロンプトから簡単に利用できるようになります。

npm install -g gulp

※アンインストールしたくなったら以下で可能です。

npm uninstall -g gulp

2. ファイルの配置

以下のコマンドで clone するかこちらを Download ZIP して任意のフォルダに配置します。

git clone https://github.com/ma-tu/react-babel-gulp-browserify-tutorial.git

3. 必要なライブラリの取得

上記で配置したフォルダに移動して以下コマンドを実行します。
実行に必要なライブラリが現在のフォルダ以下の node_modules 以下にダウンロードされます。

npm install

4. 実行

以下コマンドを実行すると、簡易サーバーを起動します。Tutorial で利用する server.js と共に Tutorial のソースをコンパイルして起動します。

gulp

終了は CTRL + C です。

5. 学習開始

適当なブラウザで http://localhost:3000/ にアクセスします。初期状態では Tutorial を完了した状態で起動します。
動いていることを確認したら、CTRL + C で一旦終了します。

Tutorial では index.html の scriptタグを利用して学習を進めるようになっていますが、gulp により /src/jsx/example.jsx を変更すると、自動でサーバーが再起動されるようになっているので、/src/jsx/example.jsx を編集しながら学習を進めてください。
※編集して保存すると自動でサーバーは更新されますが、ブラウザのリロードは特に制御していないので、ブラウザの更新は行ってください。

Tutorial の Your first component: の CommentBox コンポーネント作成のコードを /src/jsx/example.jsx に張り付けて、 gulp コマンドでサーバーを起動して学習を始めましょう。

git clone にて環境を作成した場合は以下のブランチ変更を利用して学習を始めることも可能です。

git checkout start

Tutorialを参考にしながら、 /src/jsx/example.jsx を変更して React.js を体験しましょう。

6. 学習が終了したら

上記で利用したフォルダを削除するだけで特にゴミは残りません。利用した gulp をどうしても削除しておきたい場合は、1. gulp のインストールを参考にしてください。

後はReact.js の他のサンプルをみたり、はやりの React.js + redux を試してみるのもよいと思います。

gulpfile について

gulpfile の説明は上記の GitHub の README.md を参照ください。

ECMAScript6 での置き換えについて

置き換え後のファイルは以下GitHubで公開しています。
https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6

置き換え作業は以下を写経するような形で対応していました。本当に感謝です。

変更箇所のポイントについては上記参考サイトが詳しいので、そちらを参照いただくか、上記GitHubの README.md に私の理解した範囲で簡単にポイントを列挙しているので確認ください。

また ES6 で書き直したソースも以下にて公開しています。 https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6