Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす

Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす

Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす

Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす へのコメントはまだありません

はじめに

RailsとReact、Reduxを組み合わせてアプリを構築するための準備手順をRedux本家のTodoサンプルを使って示してみます。
React、Reduxはnpm(node_modules)でインストールしたものを使うこととします。

最終的に動いた形のイメージはこんな感じ。
redux-11

最終的なソースツリーはこんな感じ
redux-10

Railsアプリの新規作成、React導入

足りないGemを3つ追加して、bundle install

末尾に追記

bundle install

application.rbを編集

作った ES6(JavaScriptのバージョン)のソースをES5に自動変換するための設定を追記
config.browserify_rails の行を追加

config/application.rb

Rails に Reactインストール

application.jsの編集

app/assets/javascripts/application.js

・Reactは npmでインストールしたものを使うのでカット。
・require_tree . もカット

変更前

変更後

React、Redux、etc…の準備(node_modules)

React、Reduxその他諸々を npm を使ってインストールします。

.babelrc ファイルをRailsのルートフォルダに作成

Reduxの標準的なフォルダを作成

components.js編集

app/assets/javascripts/components.js

todos.jsはアプリのエントリーポイントとなるJSファイルです。ここに定義したクラス名(const宣言)を
windowの下にセット(変数として公開)してやる。
(意味はいまいち理解できていないのですが、必須みたいです)

変更前

変更後

Redux本家のTodoサンプルを移植

ここからは redux本家のTodoアプリのソースをコピーアンドペーストです。

エントリーポイントのJS調整

エントリーポイントとなる(Entry Point) index.jsは todos.jsという名前で以下のように作成します。

app/assets/javascripts/todos.js

その他のファイル群のコピペ

その他のファイルは同じパスで、全く同じ内容でガリガリコピペしてください。

出来上がりのファイルツリーはこんな感じです。
redux-12

Railsでテスト用コントローラーとビューを作成

ビューの調整

1行 ReactのTodoアプリのコンポーネントを作る部分を追記します。
app/views/todos/index.html.erb

動作確認

ブラウザーで以下のURLへアクセスし、こんな感じに表示されれば成功

http://localhost:3000/todos/index

redux-11

以上


About the author:

Related Posts

Leave a comment

Back to Top