使用Rails6、TypeScript和React进行环境配置

2 年 ago

科, 雅

2 minutes

使用Rails6、TypeScript和React进行环境搭建。
在界面上展示Hello World字符串。
不使用Docker。
要在Rails中引入React，可以使用著名的gem react-rails，但我打算使用rails6的默认选项Webpacker来使用React。

环境

Rails 版本为 6.1.4.4，Ruby 版本为 3.1.0，Webpacker 版本为 5.0，Node 版本为 16.13.0。

创建一个新的 Rails 项目

首先，我们将创建一个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 />)
})

应用程序.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>

请提供更具体的句子或段落，以便我能更好地为您提供中文的同义转述。

请用中文将以下内容进行改述，只需要提供一个版本：

1. https://zenn.dev/naoki0722/articles/272ef57c6dafba
这个网址是指向naoki0722在Zenn上发布的一篇文章。详情请点击链接查看。

2. https://zenn.dev/masanao/articles/de8cb66bb6e417
这个链接是指向masanao在Zenn上发布的一篇文章。点击链接以获取更多详细信息。

3. https://www.youtube.com/watch?v=oyjzi837wME
这个网址指向一个YouTube视频，点击链接即可观看。