前端开发已经不是八年前的事情了，用户界面的新趋势使用香草味的JavaScript构建变得很乏味。幸运的是，像React和Ruby on Rails这样的JavaScript框架的出现使构建高度互动的应用程序变得愉快。

在这篇文章中，我们将探讨如何将React这个流行的JavaScript库与你的Ruby on Rails应用一起使用。

有两种方法可以在Ruby on Rails上使用React。第一种是建立两个独立的应用，React应用在不同的资源库中，并通过API与后端进行通信。这可以通过使用Create React App和Rails CLI分别创建两个应用来简单实现。

另一种方法是将两个应用放在一个资源库中，并排运行。

选择上述任何一种方式都取决于你的架构偏好，但我们将着眼于第二种方式，因为它是最常见和最困难的方式。

前提条件

在开始之前，你需要在你的
机器上有一些工具，以便跟着这个教程走。

红宝石
SQLite3，它已经预装在许多基于UNIX的机器上。运行sqlite3 --version ，以确认
Node.js和Yarn（Rails使用Yarn作为包管理器）。
Rails，你可以用它来安装gem install rails

你还应该有React和Javascript的工作知识。

用React创建一个新的Rails应用

如果你刚刚开始你的应用开发，你可以使用以下命令同时设置React和Rails。

rails new react-app --webpack=react

这告诉Rails CLI也要安装React。

安装成功后，在你的编辑器中打开新项目。packs 文件夹应该是这样的。

Screenshot of folder tree in a dev environment

我们需要创建一个控制器，负责用React为索引页服务。要做到这一点，运行下面的命令。

rails g controller pages index

这将在app/controllers 中创建一个pages_controller.rb 文件，并有一个index 动作。

接下来，我们需要将/config/routes.rb 中的根设置为新生成的索引页。

Rails.application.routes.draw do
  root 'pages#index'
end

用下面的命令启动服务器，并导航到 [http://localhost:3000](http://localhost:3000).你应该看到index 页面的内容。

rails s #start the development server

在这一点上，React仍然没有在我们的应用程序中使用。我们现在需要做的是用一个JavaScript包标签链接到入口React文件(hello_react)。

清除app/views/pages/index.html.erb 的内容，然后在app/views/layouts/applcation.html.erb 中关闭head 标签之前添加下面的片段。

<%= javascript_pack_tag 'hello_react' %>

这样，我们就可以在前端用React开始开发。

在/app/javascript 内创建一个带有components/Counter.jsx 的文件，然后将下面的片段粘贴到该组件中。

import React, { useState} from 'react'
const Counter = () => {
  const [count, setCount] = useState(0);
  const increase = () => setCount(count+1);
  const decrease = () => setCount(count-1);
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span>{count}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}
export default Counter;

如你所见，这个应用将是一个简单的计数器应用。

要看到它的运行，最后一步是将hello_react.jsx 的内容替换成这样。

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

import Counter from '../components/Counter';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Counter/>,
    document.body.appendChild(document.createElement('div')),
  )
})

瞧！你现在已经准备好用React创建令人惊叹的应用程序了。

将React添加到一个现有的Rails应用中

在你已经有一个现有的Rails应用的情况下，安装React也很容易。

要做到这一点，运行下面的命令，使用webpacker设置React。

rails webpacker:install:react

现在React已经在应用程序中设置好了，可以进行开发了。如果你检查app/javascript/packs ，你会看到一个hello_react.jsx 文件，就像上面的例子一样。

因为你要把React添加到一个现有的应用程序中，你应该确定你是否要把现有的Rails前端完全迁移到React中，或者你只是想把React单独添加到特定的页面中。接下来我们将讨论在每种情况下该怎么做。

将 Rails 前台迁移到 React

采用这种方法，你要创建一个新的控制器和布局，以方便迁移。

运行下面的命令来创建一个新的控制器和一个索引页。

rails g controller spa index

这将创建一个spa_controller.rb 文件，并在views/spa/index.html.erb 中创建一个view 文件，如下面的截图所示。

Screenshot of dev environment with spa controller and view files

接下来，在app/views/layouts 中创建一个spa.html.erb 文件，并粘贴下面的代码。

<!DOCTYPE html>
<html>
  <head>
    <title>ReactRails</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'hello_react' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

这个文件将是新的React前端的基础布局。

接下来，用下面的代码更新新创建的spa_controller.rb 文件。

class SpaController < ApplicationController
  layout 'spa'

  def index
  end
end

设置好布局后，我们需要在config/routes.rb 中设置一个新的路由匹配器，使用spa 布局来渲染React前端。

替换下面这一行。

get 'spa/index'

用下面的代码。

get 'app', to: 'spa#index'
get 'app/*path', to: 'spa#index'

上面的新行使用spa 控制器为/app 上的React前端的所有请求提供服务。这种技术还可以捕捉到所有在前端注册的React路由，并将它们重定向到React来处理。

现在一切都设置好了，使用rails s 来启动你的开发服务器，并尝试在浏览器中用/app/* 来打开任何URL。

你可以继续使用React进行开发，创建你的组件，就像我们创建一个新的Rails应用的例子一样。

将React添加到一个特定的Rails页面中

假设你已经有了一个完整的应用程序，并且只想在特定的页面上使用React，你可以使用下面的说明来实现。

在app/javascript/packs/ 中创建一个新的jsx 文件；我在这个例子中使用main_list.jsx 。

该文件的内容应该如下所示。

import React, { useState} from 'react'
import ReactDOM from 'react-dom'

const App = props => {
  const [tasks] = useState(['laundry', 'shopping']);
  return (
    <div>
      <h1>Tasks</h1>
      <ul>{tasks.map((task, index) => <li key={index}>{task}</li>)}</ul>
    </div>
  )
}


document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <App />,
    document.body.appendChild(document.createElement('div')),
  )
})

你也可以使用现有的组件或创建新的组件来添加。

下一步是在你想要React的Rails视图文件中添加pack标签。例如，我使用的是一个list.html.erb 文件。

Screenshot of list.html.erb file

我可以简单地添加pack标签，然后在jsx 文件中继续开发。

# views/main/list.html.erb
<%= javascript_pack_tag 'main_list' %>

最后需要注意的是，当你在Rails应用的前端使用JavaScript框架时，你不能再以传统的方式处理数据，在.erb 文件中进行查询。在这种情况下，React前端将不得不通过JSON API与后端通信。

总结

在这篇文章中，我们介绍了在Ruby on Rails中使用React的最佳方式。

正如我在本文开头提到的，利用React等JavaScript框架的优势，你可以更快地建立强大的、现代的前端应用程序。

通过在Ruby on Rails应用程序中使用React，你可以做的不仅仅是构建复杂的UI；例如，将两者结合起来，你就可以为React组件编写单元测试。

The postHow to use React with Ruby on Railsappeared first onLogRocket Blog.

如何在Ruby on Rails中使用React

前提条件

用React创建一个新的Rails应用

将React添加到一个现有的Rails应用中

将 Rails 前台迁移到 React

将React添加到一个特定的Rails页面中

总结