開発の準備

インストール

まずはRekitのCLIをインストールします。npm v3以上とNode v6以上が必要だそうです。

$ npm install -g rekit

アプリケーションの作成

$ rekit create <app-name>

デフォルトではCSSのトランスパイラとしてlessが使用されますが、--sassオプションを付けるとsassに変更できます。
デフォルトではサンプルコードも一緒に作成されますが、--cleanオプションを付けるとサンプルコードなしにできます。（今回はサンプルコードありで試してみました）

ちなみに .gitignoreも一緒に作成されているので、このタイミングで git init および初回コミットをするといいかもしれません。

アプリケーションの起動

指定したアプリケーション名のディレクトリが作成されるので、cdしてinstall&startすれば準備は完了です。

$ cd <app-name>
$ npm install
$ npm start

開発時には主に以下の2つを使うことになると思います。6077ポートでもビルド結果の確認用サーバが動作していますが、それについては後述します。
(ポート番号はデフォルトのものであり、package.jsonの rekit.devPort , rekit.studioPort でそれぞれ変更できます)

http://localhost:6075 でアプリケーションが動作しています。(webpack dev server)
http://localhost:6076 でIDEが動作しています。(Rekit Studio)

IDEが提供されていてブラウザ上でソースの編集を行えますが、使用は必須ではありません。普段使いのエディタ等でソースを編集してもwebアプリケーションおよびIDEにホットに反映されます。

IDE(Rekit Studio)でできること

1. ダッシュボードの表示

画像のようなダッシュボードが表示されます。見にくいですがパイチャートはコンポーネント間の依存を表しています。たとえばどのコンポーネントがどのactionを使用しているかなど。
（雰囲気は出ますが、個人的にはあまり要らないかなぁと思います）

左上の「...」メニューから以下の各種操作が行なえます。

2. Featureの追加(actionまたはcomponetのみの追加も可能)

メニューのAdd featureでcomponent, route, action, reducer, css, test等の一式の雛形が作成されます。
ちなみにディレクトリ構造は水平分散でFeature毎のディレクトリにcomponent, route, action, reducer等一式があるタイプです。
よくある垂直分散のcomponents, actions, reducers等のディレクトリに別れているタイプではありません。

3. ソースコードの編集

左ペインにツリー表示されるので、対象のファイルを選択しブラウザ上で編集することができます。(ツリー表示と実際のディレクトリ構造は異なります)
プロダクションコードとテストコードがワンセット(Componentの場合はCSSも)で表示されるので、なかなか開発しやすそうです。

ただショートカットキーはまだ弱いので、ガッツリ編集するときは別のエディタを使うことになりそうです。

4. テストの実行

メニューのRun testsでテストが実行され結果が表示されます。ターミナルから npm run test でも実行できます。
カバレッジはメニューのTest coverageから確認することができます。ちなみに要約版がダッシュボードに表示されます。

5. ビルド

メニューのBuildを押下すると本番用にビルドされたファイルがbuildディレクトリ配下に作成されます。ターミナルから npm run build でも実行できます。
http://localhost:6077 ではビルドされたファイルが使用されている(webpack dev serverを介さない)ので、本番デプロイ前の動作確認が行えます。
また、build/static/report.htmlに webpack-bundle-analyzerの結果が出力されているので、ブラウザで開いて依存モジュールやサイズの確認が行なえます。

Reactアプリケーションの開発ツールRekit