Rails7 + React + Tailwindの環境をつくる手順

Rails7からNode.jsが要らなくなるとかそういう話はまだ理解できていないのだけど、とりあえずRails7を使いたくて Rails7 + React + Tailwind の環境を作ってみたので手順をメモしとく。手順といってもDHHの動画の通りにやってみただけ。

youtu.be

tailwindとesbuildを含めてrails new

$ rails _7.0.0_ new mega -d mysql -j esbuild --css tailwind

$ rails g controller Sample index

foreman が使えるようになっているので、$ bin/dev で起動し、localhost:3000/sample/index にアクセスして画面が表示されることを確認する。

Tailwindの適用を確認

app/views/sample/index.html.erb に Tailwind の class を付けて反映されることを確認する。以下のように font-black をつけたら太字になるはず。

# app/views/sample/index.html.erb

<h1>Sample#index</h1>
<p class="font-black">Find me in app/views/sample/index.html.erb</p>

Reactを導入する

$ yarn add react react-dom

// app/javascript/components/sample.jsx

import React from 'react'
import ReactDOM from 'react-dom'

const Sample = () => {
  return (
    <div className="border">
      <p className='font-black'>sample</p>
    </div>
  )
}

ReactDOM.render(
  <Sample />, document.getElementById('react-sample')
);

# app/views/sample/index.html.erb

<h1>Sample#index</h1>
<p class="font-black">Find me in app/views/sample/index.html.erb</p>
<div id="react-sample"></div> // 追記

// app/javascript/application.js

import "@hotwired/turbo-rails"
import "./controllers"
import "./components/sample" // 追記

sample が太字で表示されたらOK！