これは React.js を学習する為の環境のサンプルです。特徴は次のとおりです。
- ECMAScript 6 構文のサポートおよび JSX ファイルのコンパイルに Babel を利用
- 依存モジュールの管理(CommonJS準拠)に Browserify を利用
- タスクランナーとして gulp を利用
$ git clone https://github.com/hkusu/react-babel-browserify-gulp-sample.git
$ cd react-babel-browserify-gulp-sample
$ npm install
上記のように $ npm install を実行することにより、package.json の内容に従って本プロジェクトの node_modules 配下に今回利用するモジュール郡が展開されます。
メインロジックは app.jsx です。これを書き換えて動作確認しながら学習を進めます。
冒頭に書いたとおり ES6 構文の利用および CommonJS スタイルのモジュール管理(require や exports)が利用できます。
message.jsxはクラスを別ファイルへ分割した例です。
$ npm run build（または $ ./node_modules/.bin/gulp browserify）とすると、app.jsx および app.jsx から読み込んでいるファイル郡から bundle.js が生成されます。
bundle.js は index.html で読み込んであるので、index.html を適当なブラウザで開いてください。
もしくは $ ./node_modules/.bin/gulp とすることでも bundle.js を生成することが出来ます。この場合は gulp のタスクが JSX ファイルの変更を監視しているので、JSX ファイルを修正して保存すると自動的に bundle.js が再生成されます。また内部的にWEBサーバが立ち上がっているので、適当なブラウザで 127.0.0.1:8000 にアクセスすることにより動作確認することも出来ます。
ポート番号(8000)は環境によって異なるかもしれません。
gulp のタスクは gulpfile.js で定義しています。挙動を変更する場合は適宜このファイルを書き換えてくだささい。
とりあえず簡単なデータバインドを React.js で実装してあります。
デモは こちら(GitHub Pages) で確認できます。
実装内容については app.jsx および message.jsx をご覧ください。
詳細については『React.js + Babel + Browserify + gulp の環境を作ってみた』に書きました。
MIT