Rails6, TypeScript, Reactを使って環境構築を行います。
画面にHello Worldという文字列を表します。
Dockerは使っていません。
RailsにReactを導入するにはreact-railsというgemが有名ですがそれも使わず、rails6のデフォルトであるWebpackerを使ってReactを使えるようにしようと思います。
環境
rails 6.1.4.4
ruby 3.1.0
webpacker 5.0
node 16.13.0
rails new
まず初めにrailsアプリケーションを作ります。
バージョンは6.1.4.4で固定にしました。
rails _6.1.4.4_ new myapp
nodeのバージョンが新しすぎると、webpackのコンパイル時にエラーになることがあるので
16.13.0で固定にしました。
nodenv local 16.13.0
React導入
railsコマンドを使ってReactを導入します。
bin/rails webpacker:install:react
TypeScript導入
railsコマンドを使ってTypeScriptを導入します。
bin/rails webpacker:install:typescript
ルートページ編集
ルートページをカスタマイズしましょう。
homeコントローラとindexアクションを作成します。
bin/rails g controller home index
ルートへアクセスしたらhomeコントローラのindexアクションが実行されるようにしましょう。
Rails.application.routes.draw do
root 'home#index'
end
React コンポーネント作成
トップページに表示するReactコンポーネントを実装します。
今回はHello Worldという文字列を表示するだけのコンポーネントです。
import * as React from 'react'
export default function App() {
return (
<h1>Hello World</h1>
)
}
Reactのエントリーファイル編集
先ほど作成したコンポーネントとDOMを紐付けます。
前の手順で自動的にhello_react.jsxというファイルが自動的に作成されていて、これを編集します。
hello_react.jsxをindex.jsにリネームして、IDがappとなっているDOMをマウントするようにします。
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
document.addEventListener('DOMContentLoaded', () => {
const app = document.getElementById('app')
const root = createRoot(app)
root.render(<App />)
})
application.html.erb
javascript_pack_tagを使って先ほどのindex.jsを読み込みます。
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="app"></div>
<%= javascript_pack_tag 'index' %>
<%= yield %>
</body>
</html>
あとはbin/rails sでrailsサーバーを起動すると画面を確認できます。
参考
https://zenn.dev/naoki0722/articles/272ef57c6dafba
https://zenn.dev/masanao/articles/de8cb66bb6e417
https://www.youtube.com/watch?v=oyjzi837wME