React 与 Ruby on Rails：构建现代 Web 应用程序的理想组合

ReactJS 是一个流行的 Javascript 库，用于开发用户交互式 Web 应用程序的前端。它为 React Rails 开发人员提供了简单性，可以轻松创建可重用的 React 组件。ReactJS 的主要目标是允许交付快速、高度可扩展且简单的应用程序。

Ruby on Rails 是一个用 Ruby 语言构建的开源 MVC 框架。它提供了开发灵活性，并节省了开发可扩展应用程序的时间。它鼓励使用 JSON 和 XML 等 Web 标准进行数据传输，并使用 HTML、JavaScript 和 CSS 进行 UI。

前行，探索组合。现在让我们看看选择 React with Rails 的好处。

React with Ruby on Rails for Modern Web Application Development - 优势

现代 Web 应用程序开发已经发生了很大变化，与之相关的需求和要求也发生了很大变化。Ruby on Rails with React 方便地支持现代 Web 应用程序开发需求，也受到许多开发人员的支持。以下是开发人员支持 React with Ruby on Rails 的几个原因：

简单的学习曲线

Ruby on Rails React 相对容易学习和理解，这使得学习曲线成为将 React 与 Ruby on Rails 结合使用的最大好处。要在有限的时间内开发原型，您可以使用 React with Rails 进行 MVP 开发，将 React 作为 Rails MVC 框架的视图组件。

社区和文档

React 和 Ruby on Rails 在开发人员社区中都非常流行，可以随时使用，并且可以积极使用，如果开发过程停滞不前，可以提供出色的帮助。社区还包括许多开发人员和专家，他们已经在 React + Rails 的组合上工作，因此提供了更好、更值得信赖的文档，这对新手开发人员或第一次使用该组合的开发人员有很大帮助。

工具、库和测试

Ruby on Rails React 都为开发人员提供了对第三方库和插件的最大支持，另一方面，React 拥有最受欢迎的库 React Hook 和 npm 包，如 redux、react-router、material-UI 等, Ruby on Rails 为您可以在项目中实现的所有功能提供了一个工具，您可以将其视为可以实现的“宝石”。该组合还提供了一组可以轻松配置并与应用程序一起使用的测试库。

用户体验

React 和 Ruby on Rails 的结合提供了一个快速简单的界面。它为新功能提供简单的集成，并提供许多额外的开箱即用功能。React + Ruby on Rails 共同工作比以往任何时候都更好，减少了停机时间。凭借足够的速度，它们可以在所有平台（如台式机、平板电脑或移动设备）上运行。

使您能够在外观和功能方面创建引人入胜的应用程序。

您是否也在考虑选择 React with Ruby on Rails 来开发您的 Web 应用程序？
如果是，请与我们的专家联系以探索潜在的商业利益。立即聘请 React with Ruby on Rails 开发人员来设计和开发 Web 解决方案，而不会影响质量和性能。

为什么选择 React with Ruby on Rails？

以下是 React 作为前端和 Ruby on Rails 作为后端可以为您的 Web 应用程序开发和部署带来广泛好处的几个原因。

快速发展步伐

如果您希望构建基于免费增值模型的应用程序，则可以使用该组合。Ruby on Rails 内置了大量模型和代码库，可以节省开发时间和精力，并加强与React 前端库的通信。

减少服务器请求时间

服务器响应时间显着影响用户保留。因此，较短的用户响应时间让您比竞争对手更具优势，而 React 与 Ruby on Rails 的组合解决了这个问题。

据专家介绍，一家来自美国的知名公司使用了该组合，并观察到通过转向 React with Rails，中值响应时间从 1100 毫秒显着下降到 200 毫秒，这是一个重大的转变，也是使用这个 Ruby on 的正当理由使用 React 的 Rails。

模块化

使用多个框架一开始听起来很乏味，实施起来也很乏味。但是，React 与 Ruby on Rails 的结合有利于您的 Web 应用程序开发，因为传统的规则集不会绑定它们；您可以在方便时实施它，例如在向您的站点添加新页面时，您可以对某些页面使用 SPA，对其他页面使用传统页面。

可维护性

使用 React 作为 Rails MVC 的视图组件，可以很容易地从应用程序的控制器和模型层单独维护 Javascript UI 组件。

与其他 JS 框架相比，使用 Ruby on Rails 进行 React 更容易且可维护性更高。它允许编写更少的代码，节省编写不必要的组件的时间，并减少应用程序中的错误。

由于 React 被广泛用于单页应用程序，它附带了诸如 material-ui、semantic-ui 之类的库，这些库提供了预构建的 UI 组件，如表单字段、按钮、滑块、卡片等，这使得 UI 易于使用和快速开发这有助于消除编码工作，使您能够构建引人入胜的 UI 并产生收入。

更少的内存使用和更高的性能

使用 React with Rails API 部署您的 Web 应用程序。可以节省您通常不必要占用的大部分空间。

一家公司egghead.io由于不必要的内存存储而遭受了大量问题。因此，它转向 React with Rails，这显着提高了性能并将它们从内存存储问题中解放出来。

使用 React 和 Ruby on Rails 的顶级公司

React 与 Rails 的组合不仅受到他们拥有的广泛社区和全球产品所有者的赞赏。然而，许多知名公司都委托这种组合来开发他们的 Web 应用程序。以下是一些使用 React + Rails 的全球著名组织的名称。

🟠 Airbnb
位于旧金山的提供短期寄宿家庭和体验的在线市场，Airbnb Inc. 选择 React with Ruby on Rails，他们使用 Ruby 作为核心编程语言，Rails 作为后端或服务器端配置，以及用于前端或用户界面的 React。

🟠 Taskrabbit
Taskrabbit 是一个在线和移动市场，为消费者的本地需求提供自由职业，以寻求日常琐事的帮助。Taskrabbit 说 React 提供了速度并保持了项目的质量。为了促进 React 与 Ruby on Rails 的结合，他们使用了资产管道。

🟠 Gusto
Gusto 是一家美国公司，为企业提供基于云的薪资、福利和人力资源管理软件。它的主要堆栈 Gusto 使用 React 和 Ruby on Rails 来处理数十亿美元的在线工资单。React 落后于他们推出产品的速度。

🟠 OpenDoor
OpenDoor 是一家位于旧金山的房地产买卖公司。此前，该公司将 Ruby on Rails 与 Angular 结合使用。随着时间的推移，在性能和用户体验方面有越来越多的选择，他们转向 React 并观察到每年持续快速的增长，并且创建 SPA 更安全。

何时将 React 与 Ruby on Rails 结合使用？

鉴于所有优点以及为什么将 Ruby on Rails与 React 结合使用，您可能想知道何时应该使用这种组合。为了消除您的困惑，我在本节中提供了一些可能对您有帮助的答案。当你想开发时，你应该使用 ReactJS 和 Ruby on Rails：

• 具有动态内容的应用程序

• 复杂的单页应用程序

• 处理更广泛数据库的应用程序

• 要扩展到移动平台的应用程序：使用 Ruby on Rails 的 React Native

• 具有更高性能速度的应用程序

如何将 React 与 Ruby on Rails 集成

React-rails gem 和 webpacker gem

react -rails gem是将 React 与 Rails 集成的最简单和最重要的方法。它涉及到默认的 Rails 资产管理，然后 Babel 转换器可以将 JSX 转换为资产管道。

Webpacker gem 通过 Webpack 收集器和包管理器 Yarn 提供了一个简单和标准的集成。还可以与 Angular、React 和 Vue 等其他框架和库进行其他集成。

对于 Rails 启动环境，另一个文件存在于config/webpack 中，这是所有环境通用的shared.js配置的一部分。这里的configuration.js文件也处理来自config/webpacker.yml 的处理设置。

启动 Webpacker 安装过程的安装脚本是

• 一次性启动 – bin/webpack

• 使用文件更改跟踪启动并在修改后重建。– bin/webpack

注意：安装最新版本的 Ruby 和 Rails 后继续。

第一步是通过命令 gem 'react-rails' 将 gem 添加到 gemfile，然后通过运行 bundle install 和 react-rails 安装脚本安装 gem – rails g react:install

这将创建用于存储 React 组件的 app/javascript/components/ 目录。它还为安装组件和服务器端渲染设置配置。

在此之后，您会在application.js文件中看到以下代码。



var componentRequireContext = require.context("组件", true);var ReactRailsUJS = require("react_ujs");ReactRailsUJS.useContext(componentRequireContext);

现在，您可以以 .jsx 文件格式创建自己的自定义组件并将其保存在目录app/assets/javascripts/components中并运行代码：



var HelloMessage = React.createClass({渲染：函数（）{返回 （< h1>你好{this.props.name}！</h1>)}});

然后，通过react_component 助手在视图中使用上面的组件：

在我们的视图文件 events/index.html.erb 中，我们可以将 javascript_pack_tag 替换为对 react_component 的调用：



<%= react_component('HelloMessage', name: 'Bacancy') %>

这会添加一个具有相关类和道具的div ，您稍后可以通过react_ujs驱动程序使用这些类和道具来进行组件安装和渲染。

您可以通过此方法逐渐开始使用 React，并通过将各个视图转换为 React 组件来测试所有内容。之后，您可以转向更复杂、更强大的设置。

react-rails gem 还提供了一个组件生成器，通过将组件名称和道具（及其道具类型）传递给它来自动创建一个基本组件。它类似于用于创建模型和脚手架的 Rails 生成器：

$ rails 生成 react:component HelloWorld greeting:string

react_on_rails 宝石

将 React 与 Ruby on Rails 集成的第二种方法是通过 react-on-rails gem。react-on-rails和react-rails之间的核心区别在于它默认使用 ECMAScript 6 和综合工具以及 Webpack，而不是依赖于 Rails 资产管道。此外，它不依赖于 jQuery。

您可以使用 NPM 而不是手动下载 gems 来安装 JavaScript 库，这使您可以拥有更多的安装选项并管理许多组件。

最初，安装节点以使用 NPM 启动 JavaScript 依赖项。您可以从网站下载节点并通过 NVM 安装它。然后，您可以将 gems 添加到 Rails 应用程序并运行 bundle 来安装它。



宝石“react_on_rails”，“〜> 6”

您应该提交给下面给定的 Git 分支以使安装脚本工作。



初始化git 添加 -Agit commit -m “初始提交”

然后，运行 gem 的生成器并创建package.json和Procfile.dev文件：



rails 生成 react_on_rails:install

然后，重新运行捆绑包以安装 exec。

之后，重新启动 bundle (bundle && npm install) 以安装 execjs 和 npm install 以安装 JS 依赖项，然后启动 Rails 服务器：foreman start -f Procfile.dev

该 gem 还创建了一个自定义目录来存储客户端代码。完成以上步骤后，就可以使用所需的 React 组件了。

带有 React 前端的 Ruby on Rails API

将 React 与 Ruby 集成的第三种方法是制作两个单独的应用程序，一个用于服务器端或后端，另一个用于客户端或前端，其中 API 编写在 Rails 上，然后 React 上的应用程序连接到Rails API 共同呈现以下给定的好处：

• 在客户端工作的产品所有者可以使用 JS 库，而无需按照 Rails 标准修改代码。

• Rails API 使用 JSON 文件与 Reactinterface 通信；因此，没有必要向许多服务器共享状态，因此扩展很容易。

现在，让我们继续将 Rails API 连接到 React 前端。

🟠 首先，您必须创建一个 Rails 应用程序结构并通过在您的计算机上启动相应的应用程序来启动 Postgres 服务器。在此之后，您将获得一个欢迎页面，然后可以继续执行其他步骤。



$ rails 新后端应用程序

🟠 此外，在应用程序文件夹中，您应该使用 create-react-app 客户端创建一个客户端文件夹和 React 界面。



$ npm install -g create-react-app$ create-react-app 前端应用程序

🟠 为了同时运行带有 React 的 Rails 应用程序，我们将使用两个不同的端口——端口 3000 (Rails) 和端口 3001 (React)，并在同一服务器上使用代理连接它们。

接下来，我们将在开发模式下指定 Rails 服务器在哪个端口上运行的 React 应用程序。为此，我们将通过添加以下命令行来编辑文件 ./package.json：



“代理”：“http://localhost:3000”

上面的行指示 React 应用程序在开发模式下通过代理与使用端口 3000 的后端进行通信。

此外，在package.json的脚本中添加以下行：



“开始”：“设置 PORT=3001 && 反应脚本开始

通过这种方式，您可以在同一台服务器上运行 Rails + React 应用程序，同时分别在 React 上创建 API on Rails 后端和 UI。

现在，您还可以使用文件夹中的 Yarn 执行以下操作：
启动开发服务器（您可以访问 http://localhost:3000/ 访问 React 页面）。– 纱线开始
将应用程序捆绑到静态文件中以进行生产。– Yarn build
启动测试运行器。– 纱线测试

现在让我们继续使用必要的端口进行 API 调用的代理，而无需在生产和开发之间交换，然后是 NPM 服务器。

Bacancy 案例研究（与 Ruby on Rails 反应）

Bacancy 的现有客户来找我们，主要从事数字营销、销售生成和 SEO 方面的工作。他们提到他们现有的网站使用 PHP，这对于更广泛的用户群来说不是一个好的选择。客户提出了使用 React 和 Ruby on Rails 组合的意图，其中 Ruby on Rails 用作后端，React 将用作前端。客户还希望确保开发质量，并希望 Web 应用程序能够提供无忧的用户体验。

Bacancy 使用 reactstrap 库来管理和提供更好的用户体验，并将 React.js 用于只有管理员可以访问的前端管理仪表板。然后，使用 Ruby on Rails，我们管理管理仪表板 API 模块，并为客户端的最终客户/用户生成动态网站和 UI。

客户仍在与我们合作，对组合和交付的最终产品非常满意。

结论

这篇博文包含有关使用 Ruby on Rails 进行 React 的好处和实现的内容。很明显，它不是解决所有问题的通用解决方案。但是，如果您希望开发具有无数微交互的动态应用程序，它是一个不错的选择。此外，寻找具有 React 和 Rails 专业知识的熟练开发人员是一个乏味的过程，但为了减轻您的压力，您可以联系我们的专家并从我们这里聘请全栈开发人员，他们将帮助您获得最可行和最好的实施满足您所有 Web 应用程序开发需求的解决方案。

（言鼎科技）专做软件开发,微信小程序,网站开发,软件外包,手机APP开发，欢迎资讯！