【React導入】既存のRailsアプリにReactを導入する

Last updated at 2024-07-05Posted at 2024-07-05

はじめに

この記事では、既存のRailsアプリにReactを導入する方法についてまとめています。

環境構築段階からReactを導入する方法についての記事は多いですが、途中からReactを導入する記事は少ないため、私自身かなり苦労しました。同じように苦戦している方の助けになれば幸いです。

以前は「Webpacker」を使用するのが一般的でしたが、最近では「Import Maps」や「esbuild」、「Vite」などの新しいツールが推奨されています。Webpackerは廃止されたわけではないですが、公式では使わない方向にシフトしています。この点を押さえておくと良いでしょう。

既存のRailsアプリにReactを導入するための記事が少なく、ChatGPTに聞いたところ「Webpacker」を前提とする回答が多かったので記載しています。

ターミナル

yarn add typescript react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom

必要なライブラリは後から追加でインストールも可能です。

ターミナル

yarn add ライブラリ名

"build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx"

何をしているのかまとめると

読み込むための設定として捉えておくと良いでしょう。

app/javascript/にReact用のフォルダを作成して、そこでReactの開発を進めます。

ここにはReactのコンポーネントを配置します。コンポーネントはWebページのパーツ（ボタン、入力フィールド、カードなど）です。

ここにはReactのエントリーポイント（アプリケーションの起点となるファイル）を配置します。ReactDOM.renderなどを使ってアプリケーション全体をレンダリングするファイルをここに置きます。

ここにはReactの特定の機能やページに関連するコードを配置します。例えば、ユーザープロファイルページ、ダッシュボード、設定ページなどのコンポーネントや関連するロジックをここにまとめます。

ここでは上記で作成したファイルを読み込みます。

例えば、app/javascript/react/entrypoints/application.jsxを作成したら次のように記述します。

application.js

import "./react/entrypoints/application"

パッケージの依存関係や入れてるパッケージによっては競合して動かないことも想定されますのでご了承ください。

既存のRailsアプリにReactを導入する方法について簡潔にまとめました。実装についても詳しくまとめたかったのですが、まだReactの知識が浅いため触れられませんでした。今後、もっと学んでいきたいと思います。

この記事が、RailsにReactを導入する方法に苦戦している方の助けになれば幸いです。気付いたことなどありましたら、ぜひ教えてください。

それでは、一緒にReactの学習を頑張りましょう！