Railsプロジェクト内でReactを使う方法

RailsとReactを分離させてSPAで動かす記事はたくさん見つかるけど、そうではなくRailsプロジェクトの一部でReactを使う方法。
react-railsというgemを使う方法です。ほぼ以下のgemでの導入方法に近い記事です。
reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.

環境

• Rails 6.1.4
• Ruby 3.0.0

Reactの導入

まず導入したいrailsプロジェクトディレクトリ内に移動し、railsコマンドでReactとその関連ファイルをインストール。

% rails webpacker:install:react

インストールすると、app/javascript/packs/hello_react.jsxが作成される。これを任意のviewファイルに挿入する。

中身は以下。

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

ファイル先頭にも書いてある通り、<%= javascript_pack_tag 'hello_react' %>をrailsのviewファイルに挿入すればこのコンポーネントがレンダリングされる。

ReactコンポーネントをRailsのviewで表示する

実際にやってみる。

※以下は挿入したいviewファイルが既にあればとくにやらなくて大丈夫です。
viewを作成するためBookモデルのscaffoldを実行しマイグレート。

% rails g scaffold Book title:string content:text
% rails db:migrate

rails sで先に画面を確認。

http://localhost:3000/books

ここに先ほどのhello_react.jsxを挿入してみる。

app/views/books/index.html.erb

<% # 以下に挿入 %>
<%= javascript_pack_tag 'hello_react' %>
<p id="notice"><%= notice %></p>

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.content %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Book', new_book_path %>

表示を確認すると、確かにHello React!がレンダリングされている。

ただこの状態だと挿入した行の位置に関わらずReactコンポーネントが最後にレンダリングされてしまうのでそれを解消する。

react-railsの導入

Gemfileに以下を追記。

gem 'react-rails'

追記したgemをインストール。

% bundle install

次に以下のコマンドを実行。

% rails g react:install

するとapp/javascript/componentsというフォルダが作られるので、ここにhello_react.jsxをここに移動。

レンダリングに関しては react-railsがやってくれるので、移動した後以下のように変更。

app/javascript/components/hello_react.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}
// 以下を削除
// document.addEventListener('DOMContentLoaded', () => {
//   ReactDOM.render(
//     <Hello name="React" />,
//     document.body.appendChild(document.createElement('div')),
//   )
// })

// 以下を追記
export default Hello

react-railsを導入したことによって、react_componentというメソッドが使えるようになる。レンダリングしたいReactコンポーネントの読み込みも以下のように記述を変更。

# 以下を削除
<%= javascript_pack_tag 'hello_react' %>
# 以下を追記
<%= react_component('hello_react') %>
<p id="notice"><%= notice %></p>

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.content %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Book', new_book_path %>

これで再度レンダリングしてみる。

これで任意の場所にReactコンポーネントを差し込むことができた！

viewファイルから値を渡したい場合は、以下のようにする。

<%= react_component('hello_react', { name: "react-rails" }) %>

これ以降追加したいReactコンポーネントがあれば、app/javascript/components配下にjsxなりtsxのファイルを作ればいい。