Push: Ctrl+Y

 技術で遊んで ときどき進む

React+Redux入門

React + Redux入門③ - 検索画面を作成1:HelloWorld !!

2016/07/26

いざ、React + Reduxで検索画面を作っていきます!
まずはレイアウトを作成してそこに動作を加えていく方法ですが、長くなってしまったので今回はHelloWorldを表示するところまでやります。

スクリーンショット 2016-07-01 11.18.55

 

前準備

前回作成した仮想開発環境ですが、Vagrantfileで config.vm.synced_folder "作業スペース/workspace", "/var/www/html" という設定をしました。
これは、ローカルのディレクトリと仮想環境のディレクトリを同期する設定になります。
今後はローカルディレクトリで作業すると仮想環境に自動的に反映されることになるので、ローカルの作業スペースをエディタで開きましょう。
(vimやemacs派の方はむしろこの設定いらないかもしれません。。)
ちなみに私のエディタのおススメはSublimeTextです。

 

node_modulesのインストール

package.jsonを作成する

まずworkspace直下にpackage.jsonを作成し、以下のように設定してください。

React + Reduxに必要なnode_modulesをインストールしていきます。
モジュールをインストールする方法は以下2つあります。

  • package.jsonに "react": "^15.1.0" のような形でバージョン含めて先に記載しておき、 npm install というコマンドでインストール
  • npm install react --save というコマンドで、インストールしたモジュールを逆にpackage.jsonに書き込む

モジュールのバージョンがシビアだったりするので前者の方が良いとは思うのですが、(これから作るものは将来的にこの方法では動作しなくなる可能性があるため)エラー地獄もまた経験だったりするので、後者の方法でいきます。
最後に私が作ったときのpackage.jsonを置いておくので、困ったらそちらを使ってください。

基本的なものをインストール

React + Redux / Material-UI / Express

以下のコマンドでReact + Redux / Material-UI / Express をインストールします。

一気にやっても結果は同じですが、分かりやすいように3つに分けました。

 

Babelの導入

ES6の記述のためにBabelを利用するので、以下もインストールします。
(手順はBabelのサイトから。babel-loaderは後に利用するwebpack用のモジュール)

さらに、当構成で必要なBabelのプリセットもインストールしましょう。

最後にBabelでコンパイルするときのプリセット設定ファイルを作ります。
workspace直下に .babelrc というファイルを新規作成し、以下を記載してください。

 

webpackの導入

最後に、webpackというビルドツールをインストールします。

webpack-dev-middleware はデバッグに便利なので入れておきます。(server.jsで利用指定)
設定は後々します。

 

Hello Worldまで作る

やっとコーディングを始めます。。
まず、以下のように src / server 以下のディレクトリを作成してください。

 

構成を説明

サーバーサイドの処理は server 以下に配置し、 src 以下にフロント側の処理を配置します。
DB処理等は次回にまわすので、今回は主に src 以下を開発していくことになります。

 

サーバー動作設定

まずWebサーバーが動作しないことには・・ということで、Express関連の基本的な設定からいきます。
./index.html を以下のように編集してください。

webpackでソースをまとめて bundle.js として、その中で <div class="main"></div> の中身を記述していく流れです。

続いて、server.js を編集します。

ポート3000を使って、先ほど作った index.html を読み込んでいます。

 

ルーティング設定(react-router)

なくても動作しますが、せっかくなのでよく使われている react-router も使います!
src直下に routes.jsxというファイルを作成し、以下のように設定してください。

 

importしている App は ReactComponent ですが、追々つくります。

 

react-reduxの設定

Reduxでは、全ての状態を管理するStoreを作成し、下位のReactComponentがそれにアクセスできるようにする必要があります。
それをサポートするのが react-redux というモジュールです。
./src 直下に index.jsx というファイルを作成して以下のように設定してください。
(この index.jsx は後のwebpackの設定で bundle.js に集約されることになります)

 

解説1:Reducerの登録

ここでStoreを作成するのですが、そのときに 全Reducer(rootReducer) を登録しています。
また、react-router-redux で routing というStoreを登録することになっているので、それもあわせて登録しました。(チュートリアルはこちら

解説2:middlewareの登録

enhancer に入れたmiddlewareを登録し、Storeの第二引数で渡しています。
middlewareとは、Action が呼び出されたあと Reducer の実行前後に処理を追加できる仕組みで、モジュールを落としてきていれたり独自で作って実行したりできる仕組みです。
今回は react-router-redux というルーティングに必要なミドルウェアと、redux-logger というデバッグを楽にするためのミドルウェアの2つをいれました。

redux-logger はインストールしていなかったので、以下コマンドでインストールしておきましょう。

※こんな感じでconsoleに表示され、Action前後のStoreを確認できるので便利です。

スクリーンショット 2016-06-29 21.12.09

独自にmiddlewareを作成する際の参考サイト:
Qiita : Redux 基礎:Middleware 編

 

最後に ReactDOM.render() で画面を描画しています。

 

Reducersの空ファイルを用意

import rootReducer from './reducers'; で読み込んでいるファイルを作成しておかないとエラーが発生するので、空ファイルを作成しておきます。

 

 

React Component

ここから画面作成に入ります。

ReactComponentContainerComponentがありますが、今回はHelloWorld!を表示するだけなので Component のみです。
Componentはprops(固定値)を受け取って画面表示する担当になります。

ルートコンポーネントを作る

先ほど react-router の設定をしましたが、その大本になる App.jsx を作成していきます。
react-routerの良いところはコンポーネントをネストさせることができるところなので、ここではとりあえずヘッダーを作ることにしましょう。

 

コンポーネントは Material-UI を利用しています。
詳しい内容は省きますが、v0.15.0以降は <MuiThemeProvider /> でテーマを指定するのが必須になっているので注意してください。
詳しくは公式の Custmization -> Themes に記載があります。

injectTapEventPlugin() はMaterial-UIのタップイベントを反応させるために必須の記述なので入れておきましょう。
ここで記述しておけば、全体に反映されるので便利です。

先述のルーティングの設定により、{this.props.children} という記述で指定したURLに合わせたコンポーネントを自動で読み込み、表示してくれます。

 

各ページを作る

試しにHelloWorldページを作成します。

これを routes.jsx ファイルに追記します。

 

 

コンパイル

ここまで後回しに後回しを重ねたわけですが・・はい、コンパイルが必要です。
Babel + Webpack + Npm で設定していきます。

まずローカルのbabelをコマンドで実行できるようにエイリアスを作ります。
※デフォルトでbabelコマンドが利用できるようになっていれば、この手順は省いて大丈夫です。

./package.json を編集します。

npm run build でコンパイルし、npm start でサーバーを立ち上げる形です。

次にwebpackの設定をします。
src 直下にwebpack.config.js というファイルを作成して以下のように設定してください。

entry のところで起点を指定し、output で出力ファイルを指定しています。

 

実行

これでHelloWorldの表示はできているはずなので、コンパイル・起動しましょう。

エラーなくコンパイルされ Listening at http://localhost:3000 と表示されたら、②で設定したnginxのserver_name(http://react-redux.local)にアクセスします。
表示されたら、今度は http://react-redux.local/helloworld にアクセスし、Hello Worldが表示されていることを確認して終了です!

 

補足

package.jsonを記載しておきます。

 

 

まとめ

便利にしたくていろいろモジュール追加したくなる衝動を抑えるのが大変です。。

次回以降で画面の作成/非同期処理などいろいろ追加していきたいと思います!
やっと楽しいところに入れる・・予定。

 

エラー対応方法

蛇足な気もしますが・・

  • node_modules内でエラー発生してコンパイルが通らないとき
    • 一度node_modulesをリネームして、npm install を再実行すると上手くいく場合があります

 

 

-React+Redux入門
-, , , ,

おすすめの記事

1
React + Redux入門① - Reduxの概念を理解

React+Reduxでサイトを作っているので、復習がてら「検索画面を作成する」 ...

2
React + Redux + D3.js アニメーション:ドラッグ&ドロップでキングスライムを作った

はい、今回は要素のドラッグ&ドロップを中心に作ってみました。 Mater ...