前回 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
置き換え作業は以下を写経するような形で対応していました。本当に感謝です。
* React TutorialをES6で書きなおしてみた
* ES6版React.jsチュートリアル
変更箇所のポイントについては上記参考サイトが詳しいので、そちらを参照いただくか、上記GitHubの README.md に私の理解した範囲で簡単にポイントを列挙しているので確認ください。