Rails7でreact-rails（ Shakapacker対応）を使う

概要

今回はRails7でreact-railsのgemを使ってReactを使う方法を紹介します。

初期設定

基本的にはGitHubのドキュメントに従います。

プロジェクトの作成

標準にするとWebpackerが入ってしまうのでそこはコマンドで後から入れられるようにします。

rails new my-app --skip-javascript

shakapackerをインストール

shakapackerをインストールします。

bundle add shakapacker --strict
rails shakapacker:install

Reactとパッケージをインストール

React本体と本体を動かすためのパッケージをインストールします。

yarn add react react-dom @babel/preset-react prop-types \
     css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin

続いてpackage.jsonを修正します。
"@babel/preset-react"を追加します。

package.json

  "babel": {
    "presets": [
      "./node_modules/shakapacker/package/babel/preset.js",
      "@babel/preset-react"
    ]
  },

react-railsをインストール

bundle add 'react-rails' --strict
rails generate react:install

初期設定は完了です。

react-railsのバージョンを3.1.1にする（ハマったところ）

現在、初期設定の状態だあとGemfileのreact-railsのバージョンは3.1だと思います。

gem "react-rails", "= 3.1"

これを3.1.1にしてください。

gem "react-rails", "= 3.1.1"

3.1だとマウントが上手くいかないです。

uninitialized constant React::Rails::ComponentMount::Dummy

これはgem側のバグなので、3.1.1にしましょう（bundle installを忘れずに）。

テスト

動くかどうかをテストします。

scaffoldで適当に作成してそれをReactで動かせるようにします。

rails generate scaffold Article title:string body:text --skip-jbuilder

scaffoldしたらアプリを立ち上げましょう。

rails s

下記を起動しておくとリロードしなくても自動でコンパイルしてくれるので便利です。

./bin/shakapacker-dev-server

app/views/articles/index.html.erbの中身をreact-railsを使って書きたいと思います。

まずはReactのコンポーネントを作成します。

rails g react:component ArticlesList articles:array

続いてそのコンポーネントで画面を表示するようにします。

app/views/articles/index.html.erb

<%= react_component("ArticlesList", { articles: @articles.to_json }) %>

これでArticlesList.jsで画面を表示するようになります。
あとはArticlesList.jsを同じような表示になるようにコードを修正すればよいです。

app/javascript/components/ArticlesList.js

import React from 'react';

const ArticlesList = ({ articles }) => {
  const parsedArticles = JSON.parse(articles);
  return (
    <div>
      <h1>Articles</h1>
      <div id="articles">
        {parsedArticles.map(article => (
          <div key={article.id}>
            <h2>{article.title}</h2>
            <p>{article.body}</p>
            <p>
              <a href={`/articles/${article.id}`}>Show this article</a>
            </p>
          </div>
        ))}
      </div>
      <a href="/articles/new">New article</a>
    </div>
  );
};

export default ArticlesList;

これで同じ画面が表示されたら成功です。