Express4 & React.js 環境を構築

React.js開発環境でググるとBabelとかnpm-scriptsやら色々出てきて
軽くお試しで作るのには色々と面倒なので簡単な環境構築をする。
※ちなみにExpress4のテンプレートを利用します。

とりあえず前提条件で以下のものは導入済みのこと
・npm
・node.js

react-tools のインストール

$ npm install -g react-tools

各ディレクトリの準備
まずJSXファイルを保存するディレクトリを作成する。
今回は public/jsx を作成

続いてjsxのコンパイル先ディレクトリを作成。
これに関してはpublic/javascript/ で問題ない。

これで以下のコマンドを実行すれば自動的にjsxファイルが jsファイルに変換される。

$ jsx -x jsx ./public/react ./public/javascripts/

シェルスクリプトに纏める
このままいくとjsxを編集する度にコンパイルが必要なのでシェルを作成する。
ついでに起動用のコマンドを追記しておく。

start.sh

jsx -x jsx ./public/react ./public/javascripts/
node app.js↲
npm start

後は起動する際に以下のコマンドを実行する。

$ sh start.sh

これでReactの環境構築は完了。
本格的にやるならBabelとかnpm-scriptは必要。