最速で Rails + Webpacker + React の開発環境を整える方法

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

git clone [e-mail]:yazumoto/react-webpacker-rails.git

レポジトリはこれです↓
https://github.com/yazumoto/react-webpacker-rails

終わりです。

上記でクローンすると、サンプルのルートが存在するので（/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の環境を整えています。

やったこと一覧

• WebpackerでReactをインストール
• css moduleを使って SCSS をコードでコンポーネントごとに処理できるようにした
• コンポーネントのクラスを別ファイルに分けるサンプルコードを記載
• RailsのコントローラのデータをReactで使うサンプルコードを記載

WebpackerでReactをインストール

rails new 後に、

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

を実行しました。

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

css module を使いたいので、SCSS をコードでコンポーネントごとに処理できるようにした

config/webpack/environment.js

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

コンポーネントのクラスを別ファイルに分けるサンプルコードを記載、RailsのコントローラのデータをReactで使うサンプルコードを記載

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ライフを送ってください！