rails5でreact-rails(use asset pipeline)でhallo worldまで

初めてrails+reactを触るので、インストールしてみるも少しハマったのでメモ
react-rails#use-with-asset-pipeline にちゃんと載ってます。

参考にさせていただきました。感謝

• https://github.com/reactjs/react-rails
• react-railsを使ってReactのTutorialをやってみる

gem install

# config/routes.rb
gem 'react-rails'

bundle install

react install

rails g react:install

react componentの生成(Topのところはなんでもいい)

rails g react:component Top

中身書き換え

• before

// app/assets/javascripts/components/top.js.jsx
var Top = createReactClass({
  render: function() {
    return <div />;
  }
});

• after

// app/assets/javascripts/components/top.js.jsx
class Top extends React.Component {
  render() {
    return <h1>{this.props.title}</h1>
  }
}

controllerの作成

rails g controller top index

中身書き換え

• before

<!-- app/views/top/index.html.erb -->
<h1>Top#index</h1>
<p>Find me in app/views/top/index.html.erb</p>

• after

<!-- app/views/top/index.html.erb -->
<%= react_component("Top", {title: "Hello World"}) %>

routes書き換え

Rails.application.routes.draw do
  root 'top#index'

  get 'top/index'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

environments書き換え(やらなくても動く)

この辺の話 -> react-rails#reactjs-versions

# config/environments/development.rb
MyApp::Application.configure do
  config.react.variant = :development
end

# config/environments/production.rb
MyApp::Application.configure do
  config.react.variant = :production
end

やっとこさ起動

rails s