antd-initでReact,Reduxのboilerplate作成

ここ数年、Single Page ApplicationはSencha ExtJS、Sencha Architect を使用して構築していました。
ですが、ライセンス費用をかけずにオープンソースで構築できるようにしたいね、ということで、現在、React、Reduxに取り組み中です。
React、Reduxを始めるにあたり、簡単にboilerplateを作成してくれるantd-initが便利だったので、ここでご紹介したいと思います。
このboilerplateは、react, redux, redux-saga, react-router, webpack, babel, css-modules、LiveReload等、React、Reduxの開発に必要なライブラリがひと通り揃っています。
また、UIフレームワークはAnt Designを使用しています。

今回は、Ubuntu14.04に、antd-initのインストールと、boilerplateの作成を行ってみます。
node6系を使用できる環境であれば、antd-initのインストールから開始できます。
エディタはAtomを使用します。

Atomインストール

PPA経由でインストールします。

Ubuntuのアプリケーションから「Atom」を起動します。
初回の起動は少し時間がかかります。起動すればOKです。一旦閉じます。

nvmインストール 

nodeはバージョンによってアプリが動作しない場合もあるため、複数のバージョンを切り替えて使用したくなります。
そこで、複数のバージョンのnodeを切り替え可能な「nvm」を使用すると便利です。
nvmで、nodeのインストール、指定バージョンへのnodeの切り替えが可能となります。
以下でnvmをインストールします。

起動時に読込むよう、~/.bashrc 等に以下を追記します。


コマンドプロンプトを再起動し、バージョンを確認します。


■ nodeインストール
nvmをインストールしたら、nodeをインストールします。
以下でnodeのバージョンを確認し、どのバージョンをインストールするかを決定します。


ここでは、node6.2.2をインストールします。
インストールしたら、バージョンを確認します。


nvmインストールは、以下のページを参考にさせていただきました。
他のnodeバージョンへの切り替え方法等も記載されています。

「nvm で作る Node.js の環境構築(+ Hello world)」<http://arfyasu.hatenablog.com/entry/2016/01/26/212543>

■ antd-initインストール

現在は2系ですが、1系を使用したいため、バージョンを指定してantd-initをインストールします。

次に、boilerplateを作成します。


nodeモジュールがインストールされるため、少し時間がかかります。
作成されたら、boilerplateアプリを起動します。


webpack: bundle build is now finished.が表示されたら、http://localhost:8989/ にアクセスします。
以下の画面が表示されればOKです。

screenshot-from-2016-10-27-160710


■ boilerplateを編集

Todo App を編集してみます。
AtomでantdinitSampleディレクトリを開きます。

▼ タイトルを変更

src/layouts/MainLayout/MainLayout.jsx 9行目
「Todo App」 を「タスク管理」に変更し、ファイルを保存します。
webpackのビルドが実行され、livereloadがファイルの変更を検知し、ブラウザをリロードします。

そのため、ファイルを変更するだけで、ブラウザの表示が更新されます。

 リストのタイトルを追加

src/components/Todos/Todos.jsx 23行目に以下を追加します。

▼ タスクを追加

タスクは、ajaxで取得しています。boilerplateではMockで動作しています。
proxy.config.js 23行目に以下を追加します。

このファイルは変更検知対象外であるため、ブラウザをリロードして確認します。

▼ cssを追加

先程追加したリストタイトルに下線を引いてみます。
src/components/Todos/Todos.less 4行目に以下を追加します。

こちらもブラウザをリロードします。
(再ビルドは実行されますが、リロードされないため)

以下の画面に変更されました。
screenshot-from-2016-10-27-173327

このboilerplateを作成すれば、React、Reduxの開発環境を簡単に整えることができます。
redux-sagaやfetch、reducerもすぐに使用できるようになっているため、Todo Appを参考に、React,Reduxアプリを作成しやすくなります。