React.js をとりあえず動作させてみようと思ったものの、gulp? jsx? Babel? と未知の単語がいっぱいでとりあえず何をしたらいいか分からなかった（自分）や同じような方の参考になればと思い React.js ＋ gulp + Babel +Browserify のシンプルな環境を作ってみました。
公式ページを見たけど、それを動かすことができずに挫折しそうな方の参考になれば。
React.js や Babelは進歩も早くて、Google検索した結果を見ても少し古くて色々はまったので。
以下GitHub にて公開しています。
https://github.com/ma-tu/react-babel-gulp-browserify-simple
2016年1月時点で最新のライブラリを利用しています。
また Windows環境で検証しています。
- react: 0.14.5
- gulp: 3.9
- babel: 7.2
- browserify: 12.0.1
上記の GitHub のサンプルを動かすと以下のように表示されます。
利用方法
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-simple.git
3. 必要ライブラリ取得
上記で配置したフォルダに移動して以下コマンドを実行します。
実行に必要なライブラリが現在のフォルダ以下の node_modules 以下にダウンロードされます。
npm install
4. 実行
以下コマンドを実行すると、React.js の jsx ファイルがコンパイルされて、簡易サーバーを起動します。
gulp
5. 動作確認
適当なブラウザで http://localhost:8000/ にアクセスします。
gulp のタスクランナーで src/jsx/app.jsx ファイルの変更を監視しているので、上記ファイルを修正して保存すると自動的にコンパイルされます。