Visual Studio Code Picture
这是我目前的布局，如果你需要复制代码请从这里：

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

const Welcome = () => {
    return(
        <div className="container">
            <h1>Hello World! Welcome to the Rails 7 Course with React JS</h1>
        </div>
    )
}

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(<Welcome />, document.getElementById('welcome'))
})

export default Welcome

问题是容器中的文本没有呈现在views/home/index.html.erb中，在那里您将看到<div id="Welcome"></div>
index.js有

import Welcome from './components/Welcome'

application.js有

// // Entry point for the build script in your package.json
// import "@hotwired/turbo-rails"
// import "./controllers"
import './react/src/index.js'
import * as bootstrap from "bootstrap"

Rails.application.routes.draw do
  # get 'home/index'
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  root "home#index"
end