Railsのプロジェクト作成から、Webpacker、Reactの最低限の設定を行ったレポジトリを作りました。
これをクローンしてサンプル通りに使えば、環境の出来上がりです。

git clone git@github.com:yazumoto/react-webpacker-rails.git

終わりです。

上記でクローンすると、サンプルのルートが存在するので（/sample)、それも不要な人は clean_routes というBranchを使ってください。

セットアップ方法

クローンしたあと、起動するにはいくつかやることがあります。

database.ymlを書き換える
- ローカル環境に合わせてください
- 必要ならignoreしてください
bundle install
yarn install
bundle exec db:create
(実際には不要) app/config/application.rb のクラス名が ReactWebpackerRails になっているので必要なら修正してください。 app/views/layouts/application.html.erb の title も同様です

起動方法

上記を実施後、

bundle exec rails s
# 別ターミナルで
./bin/webpack-dev-server

http://localhost:3000/sample

にアクセス

こんな感じになるはず。

Railsをインストールして、WebpackerでReactの環境を整えています。

rails new 後に、

bundle exec rails webpacker:install
bundle exec rails webpacker:install:react

を実行しました。

僕はだいたい rails new で --skip-bundle するのですが、これすると --webpack=react つけて rails new しても Reactがインストールされないんですよね。なのでだいたい後でやります。

config/webpack/environment.js

を修正しています。
おまじないと思っていただければ。

Railsのコントローラのインスタンス変数をReact内で利用するために、

app/views/sample/index.html.erb

で

content_tag を使ってデータを置いてます。

app/views/sample/index.html.erb

<%= content_tag(:div,
                id: "sample-data",
                data: @sample_data.to_json) do end %>

もっとスマートにデータを渡す方法を知りたいですね…。

また、Reactのサンプルコードについては、

app/javascript/packs/sample

ディレクトリを作ってその中にサンプルコードをおいています。
css modules を使ってコンポーネントごとにCSSを適用したり、一つのファイルではなく、別ファイルにコンポーネントを分けて書くサンプルです。

今回は、3秒でRails+Reactの環境を整えました。

私はチーム開発で将来のことまで考えたプロジェクトの場合は、 Rails + Angular で作りますが、
小規模で個人でやる場合はこの構成でやります（楽なので）。

皆さんも、必要性に応じて考えながら技術選定をしてください。
では、楽しいRails+Reactライフを送ってください！