1. 新建一个 rails 项目rails new react
   
2. 添加 gem gem 'react-rails', '~> 1.4.0', 然后安装bundle install

3. react-rails 提供了安装命令rails g react:install
   这个命令会在 app/assets/javascripts 目录下，创建一个 components.js 文件和 components 目录，并且会在 application.js 中添加三行

   //= require react
   //= require react_ujs
   //= require components
   

4. 创建一个名为 resource 的 Record，包含 date, title, amount 三个字段

   rails g resource Record title date:date amount:float
   

   然后rake db:create db:migrate 最后在 console 里面创建两条数据 (也可以用 db/seed)

   Record.create title: 'Record 2', date: Date.today, amount: -100  
   Record.create title: 'Record 1', date: Date.today, amount: 500
   

5. rails s ok，基础工作完成了。

下面是代码阶段

1. 创建一个 controller 和 index action

# app/controllers/records_controller.rb
class RecordsController < ApplicationController
    def index
        @records = Record.all
    end
end

1. 创建 view 文件

   <%# app/views/records/index.html.erb %>
   
   <%= react_component 'Records', { data: @records } %>
   
   

   react-rails 提供了一个 helper 方法，react_component，来渲染 react 组件. 格式为

   react_component(component_class_name, props={}, html_options={})
   

2. 访问 localhost:3000/records 会看到你的页面中多出了一段 html

   <div data-react-class="Records" data-react-props="{...}"></div
   

   react_ujs 会在这里渲染 react 组件，会附带一些 props 参数，上例中是@records

3. 下面创建 react 组件

   # app/assets/javascripts/components/records.js.coffee
   @Records = React.createClass
     render: ->
       React.DOM.div
         className: 'records'
         React.DOM.h2
           className: 'title'
           'Records'
   
   

   1. ok，再访问 localhost:3000/records 就可以看到结果了。