Pythonとサラリーマンと

2020年6月にPythonを始めたサラリーマンのブログです。

Rails5でReact使うとき実施すること

・gemファイルに以下を追記

  gem 'react-rails'
  gem 'webpacker'
  gem 'foreman' #group :development doに

・ターミナルで以下を実行

$bundle install
$rails webpacker:install
$rails webpacker:install:react
$rails generate react:install

・views/application.html.erbで以下の変更

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

・foreman startのためのprocファイル作成
(react-rails使えばrails sでもjavascript反映されるっぽいので不要かも)
アプリのルートディレクトリにProcfileというファイル名で

rails: rails s --port=3000
webpack: bin/webpack-dev-server

→ これで、

$foreman start

することで

$rails s
$bin/webpack-dev-server

の両方を実行できる。
(foreman startが失敗するときは、gem install foremanを実施)

コンポーネント作成

rails g react:component コンポーネント名

・Viewのコンポーネントを呼び出したいところで

<%= react_component("コンポーネント名", {プロップス名: 値})%>