Rails で react を動かす

Rails で react を動かしてみようと思った話

reactとか正直ミリも知らないのに試してみた。

Rails5.1から導入されたwebpackを使ってみた事から始まり、どうせならReactを試してみよう・・・となってしまった流れ。

前提

• Node.jsがインストールされている (試した環境では v6.11.4)
• Railsが動かせる環境がある (試した環境では ruby -v 2.4.0)
• Macローカル環境でbrewが使える (環境依存のものは読み替えの必要あり)

適当にプロジェクトを作る

$ mkdir react_test
$ cd react_test
$ bundle init

webpackを使いたいので、 Rails 5.1系の最新版の記述を、Gemfileに追記

Gemfile


gem 'rails', '~>5.1.0'

プロジェクト内、vendor/bundle配下にgemを展開

$ bundle install --path vendor/bundle

確認


$ yarn --version


yarnが入っていない場合はインストールする

$ brew install yarn

プロジェクトフォルダにnewする

$ bundle exec rails new . --webpack=react

何かで手順が狂った場合はwebpacker単独でインストールの続行

$ bundle exec rails webpacker:install:react

webpack用のポートを書き換え(8080番に)

別途サーバーを起動する必要があるそうな。

config/webpacker.yml

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 8080
    public: localhost:8080
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    disable_host_check: true
    use_local_ip: false

起動

$ bundle exec rails s
$ ./bin/webpack-dev-server

---

以下は続きの小ネタ

サンプルとして設置されているjsxを呼び出す

（ここまでは試しておきたい）

$ bundle exec rails g controller toppages index


config/routes.rb

root 'toppages#index'

app/views/toppages/index.html.erb

<%= javascript_pack_tag 'hello_react' %>

Material-UIを使う準備をする

（使うとは言ってない）

$ yarn add redux
$ yarn add react-redux
$ yarn add redux-devtools --dev
$ yarn add material-ui
$ yarn add react-tap-event-plugin

---

起動を楽にする

（ログが混濁するので、使わなかった）

gem 'forman'

gemを追加後カレント以下にProcfileを作成

Procfile


rails: bundle exec rails s -p 3000
webpack: bin/webpack-dev-server


$ foreman start