Rails in React.js でfluxなアプリケーションの作成

目的

Ruby On Railsのプロジェクトの中にReact.jsでfluxなアプリケーションを作成するための手順書。
fluxのframeworkはたくさんあるが、今回はfluxxor(http://fluxxor.com/guides/quick-start.html)
を使用。

Railsの中にReactのセットアップ

Gemfileに以下を追加

gem 'react-rails'

その後

$ bundle install
$ rails g react:install
$ rails g controller wellcome

Reactにfluxxorを導入

// npmが入っていない方は
$ brew install node
$ npm install -g bower

// pwd .../project_path
$ bower init
$ bower install --save fluxxor

これでfluxxorがRailsに入る。

fluxxorをプロジェクトで読み込む設定を行う

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.application.config.root.join('bower_components')

app/assets/javascripts/application.js

//= ....
//= require fluxxor
//= require components
//= require_tree .

assets/javascript以下のフォルダ構造

tree app/assets/javascript

├── application.js      
├── components.js
├── actions             //アクションとデータ通信等を記述
├── components          //コンポーネントを格納
├── constants           //定数を格納
├── stores              //fluxのstoreを格納
├── entities            //viewで使用するデータ型を定義
└── dataManagers        //storeに格納する前に整形を行う

Routing

シングルアプリケーション内のroutingを行いたいときは
Gemfileに以下を追加
(https://github.com/rackt/react-router)

gem 'react-router-rails'

application.js

   //= require jquery
  //= require jquery_ujs
  //= require react
  //= require react_ujs
  //= require react_router
  //= require fluxxor
  //= require components

components.js

  //= require_tree ./constants
  //= require_tree ./stores
  //= require_tree ./actions
  //= require_tree ./components 
  //= require_tree ./entities
  //= require_tree ./dataManagers

以上でセットアップは終了。

コンポーネントを呼び出す。

app/views/welcome/index.html.erb
複数ファイルのviewに分けるためにはページごとに違うjavascriptを管理する。

<div id="app" class="l-main"></div>
<%= javascript_include_tag "pages/timeline" %>

最初に読み込まれるjavascriptファイル

app/assets/javascripts/pages/welcome.js.jsx.coffee

 stores =                                                                                                                                                                      
    WelcomeStore: new WelomeStore()
    XxxxxxxStore: new XxxxxxStore()

  actions =
    WelcomeActions: WelcomeActions
    XxxxxxxAvtions: XxxxxxxActions

  flux = new Fluxxor.Flux(stores, actions)

  @RouteHandler = ReactRouter.RouteHandler

  App = React.createClass
    render: ->
      `<div>
        <HeaderComponent {...this.props} /> //component読み込み等可能
        <RouteHandler {...this.props} />    //routingでハンドルされたコンポーネント呼び出し
       </div>`

  @Route = ReactRouter.Route

  @MyRoutes =
    `<Route handler={App}>
      <Route name='home' handler={WellcomeComponent} path='/' />
    </Route>`

  ReactRouter.run MyRoutes, (Handler) ->
    React.render `<Handler flux={flux} />`, document.getElementById("app")
    return

このような流れで記載するといい感じでfluxxor+RailsのReactアプリケーションの構築が可能