「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか？
今回はそんなあなたにReactを部分的に使用する方法を紹介します。

こちらの記事を応用していきます。↓ www.mof-mof.co.jp

下準備
Reactの導入方法はこちらの記事をご参照ください↓↓
www.mof-mof.co.jp

手順

package.json に記載されているビルドスクリプトのビルド対象に app/javascript/*.* が入っていることを確認する。
入っていない場合は以下を参考に書き換えてみてください。
```
"build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
```

Reactで実装と、renderの設定をする app/javascripts/mofmof.tsx

 import React from 'react';
 import { createRoot } from 'react-dom/client';

 export const Mofmof = () => {
   return (
     <>
       <div>mofmof</div>
     </>
   );
 };

 const container = document.getElementById('mofmof');
 if (container) {
   const root = createRoot(container);

   document.addEventListener('DOMContentLoaded', () => {
     root.render(<Mofmof />);
   });
 }

viewsファイルのReactを使いたい箇所に以下を追記する

<%= javascript_include_tag "mofmof", "data-turbo-track": "reload", type: "module" %>

色んなページでReactを使いたい場合は、renderの設定を別ファイルに分けて共通化するのがよいと思います。

終わり

この方法だとReact側でsessionを管理しなくても、Rails側で使用しているsession（ログイン情報など）を利用できます。
そのため、ReactからRailsのAPIを叩いたときにログインユーザーが閲覧できるデータだけ取得する時などに便利かと思います。

また、要件によっては工数を削減することにもつながると思うので、個人開発するときには重宝するかもしれません。

（ちょこっと動的にしたい！というときなんかは、ReactではなくHotwireを使うのがRails7風だと思いました。）

もふもふ技術部

IT技術系mofmofメディア

【Rails7】特定のviewsで部分的にReactを使う

手順

終わり