Rails5.1 + WebpackerでReactを導入

はじめに

最近ではRailsでフロントエンド開発をする際はWebpackではなく、Parcelを使うという手もあります。
ですが趣味で触った際にうまく動作しなかったのとissuesが多めだったので、今回は素直にWebpackerを使用してReactを導入するようにしました。
今回はその手順を簡単に残しておこうと思います。

環境

Rails : 5.1.4
Webpacker : 3.2.1

まずはWebpackerの導入

まずはWebpacker の導入から

Gemfile

gem 'webpacker'

bundle installでgem導入

bundle install

Railsプロジェクトにwebpakerをインストール

bin/rails webpacker:install

これでwebpackの導入は完了となります。

Reactの導入

以下のコマンドを実行

bin/rails webpacker:install:react

これでReactが導入されました。
またjavascript/packs以下にhello_react.jsxというファイルが生成されていると思います。

view側の準備

application.html.haml(またはerb)のjavascript_include_tagをjavascript_pack_tagに変更します。

app/views/layouts/application.html.haml

= javascript_pack_tag 'application'

確認

javascript/packs/application.jsに生成されたhello_react.jsxを読み込ませるようにする

require('./hello_react.jsx')

以下のコマンドを実行してRailsサーバーとWebpackサーバーを起動

bin/rails s
bin/webpack-dev-server

起動したらhttp://localhost:5000にアクセス
ブラウザにHello React!!と表示されていて、コンソールに以下のような表示がされていたら成功です！(Reactのバージョンによってはコンソールに表示される文言は違うようです)

表示されない場合はhello_react.jsxが読み込まれているか確認してください。

これでRailsでreactが使えるようになりました！