ReactJS 是一個(gè)流行的 Javascript 庫，用于開發(fā)用戶交互式 Web 應(yīng)用程序的前端。它為 React Rails 開發(fā)人員提供了簡單性，可以輕松創(chuàng)建可重用的 React 組件。ReactJS 的主要目標(biāo)是允許交付快速、高度可擴(kuò)展且簡單的應(yīng)用程序。

Ruby on Rails 是一個(gè)用 Ruby 語言構(gòu)建的開源 MVC 框架。它提供了開發(fā)靈活性，并節(jié)省了開發(fā)可擴(kuò)展應(yīng)用程序的時(shí)間。它鼓勵(lì)使用 JSON 和 XML 等 Web 標(biāo)準(zhǔn)進(jìn)行數(shù)據(jù)傳輸，并使用 HTML、JavaScript 和 CSS 進(jìn)行 UI。

前行，探索組合?，F(xiàn)在讓我們看看選擇 React with Rails 的好處。

React with Ruby on Rails for Modern Web Application Development - 優(yōu)勢(shì)

現(xiàn)代 Web 應(yīng)用程序開發(fā)已經(jīng)發(fā)生了很大變化，與之相關(guān)的需求和要求也發(fā)生了很大變化。Ruby on Rails with React 方便地支持現(xiàn)代 Web 應(yīng)用程序開發(fā)需求，也受到許多開發(fā)人員的支持。以下是開發(fā)人員支持 React with Ruby on Rails 的幾個(gè)原因：

簡單的學(xué)習(xí)曲線

Ruby on Rails React 相對(duì)容易學(xué)習(xí)和理解，這使得學(xué)習(xí)曲線成為將 React 與 Ruby on Rails 結(jié)合使用的最大好處。要在有限的時(shí)間內(nèi)開發(fā)原型，您可以使用 React with Rails 進(jìn)行 MVP 開發(fā)，將 React 作為 Rails MVC 框架的視圖組件。

社區(qū)和文檔

React 和 Ruby on Rails 在開發(fā)人員社區(qū)中都非常流行，可以隨時(shí)使用，并且可以積極使用，如果開發(fā)過程停滯不前，可以提供出色的幫助。社區(qū)還包括許多開發(fā)人員和專家，他們已經(jīng)在 React + Rails 的組合上工作，因此提供了更好、更值得信賴的文檔，這對(duì)新手開發(fā)人員或第一次使用該組合的開發(fā)人員有很大幫助。

工具、庫和測試

Ruby on Rails React 都為開發(fā)人員提供了對(duì)第三方庫和插件的最大支持，另一方面，React 擁有最受歡迎的庫 React Hook 和 npm 包，如 redux、react-router、material-UI 等, Ruby on Rails 為您可以在項(xiàng)目中實(shí)現(xiàn)的所有功能提供了一個(gè)工具，您可以將其視為可以實(shí)現(xiàn)的“寶石”。該組合還提供了一組可以輕松配置并與應(yīng)用程序一起使用的測試庫。

用戶體驗(yàn)

React 和 Ruby on Rails 的結(jié)合提供了一個(gè)快速簡單的界面。它為新功能提供簡單的集成，并提供許多額外的開箱即用功能。React + Ruby on Rails 共同工作比以往任何時(shí)候都更好，減少了停機(jī)時(shí)間。憑借足夠的速度，它們可以在所有平臺(tái)（如臺(tái)式機(jī)、平板電腦或移動(dòng)設(shè)備）上運(yùn)行。

使您能夠在外觀和功能方面創(chuàng)建引人入勝的應(yīng)用程序。

您是否也在考慮選擇 React with Ruby on Rails 來開發(fā)您的 Web 應(yīng)用程序？
如果是，請(qǐng)與我們的專家聯(lián)系以探索潛在的商業(yè)利益。立即聘請(qǐng) React with Ruby on Rails 開發(fā)人員來設(shè)計(jì)和開發(fā) Web 解決方案，而不會(huì)影響質(zhì)量和性能。

為什么選擇 React with Ruby on Rails？

以下是 React 作為前端和 Ruby on Rails 作為后端可以為您的 Web 應(yīng)用程序開發(fā)和部署帶來廣泛好處的幾個(gè)原因。

快速發(fā)展步伐

如果您希望構(gòu)建基于免費(fèi)增值模型的應(yīng)用程序，則可以使用該組合。Ruby on Rails 內(nèi)置了大量模型和代碼庫，可以節(jié)省開發(fā)時(shí)間和精力，并加強(qiáng)與React 前端庫的通信。

減少服務(wù)器請(qǐng)求時(shí)間

服務(wù)器響應(yīng)時(shí)間顯著影響用戶保留。因此，較短的用戶響應(yīng)時(shí)間讓您比競爭對(duì)手更具優(yōu)勢(shì)，而 React 與 Ruby on Rails 的組合解決了這個(gè)問題。

據(jù)專家介紹，一家來自美國的知名公司使用了該組合，并觀察到通過轉(zhuǎn)向 React with Rails，中值響應(yīng)時(shí)間從 1100 毫秒顯著下降到 200 毫秒，這是一個(gè)重大的轉(zhuǎn)變，也是使用這個(gè) Ruby on 的正當(dāng)理由使用 React 的 Rails。

模塊化

使用多個(gè)框架一開始聽起來很乏味，實(shí)施起來也很乏味。但是，React 與 Ruby on Rails 的結(jié)合有利于您的 Web 應(yīng)用程序開發(fā)，因?yàn)閭鹘y(tǒng)的規(guī)則集不會(huì)綁定它們；您可以在方便時(shí)實(shí)施它，例如在向您的站點(diǎn)添加新頁面時(shí)，您可以對(duì)某些頁面使用 SPA，對(duì)其他頁面使用傳統(tǒng)頁面。

可維護(hù)性

使用 React 作為 Rails MVC 的視圖組件，可以很容易地從應(yīng)用程序的控制器和模型層單獨(dú)維護(hù) Javascript UI 組件。

與其他 JS 框架相比，使用 Ruby on Rails 進(jìn)行 React 更容易且可維護(hù)性更高。它允許編寫更少的代碼，節(jié)省編寫不必要的組件的時(shí)間，并減少應(yīng)用程序中的錯(cuò)誤。

由于 React 被廣泛用于單頁應(yīng)用程序，它附帶了諸如 material-ui、semantic-ui 之類的庫，這些庫提供了預(yù)構(gòu)建的 UI 組件，如表單字段、按鈕、滑塊、卡片等，這使得 UI 易于使用和快速開發(fā)這有助于消除編碼工作，使您能夠構(gòu)建引人入勝的 UI 并產(chǎn)生收入。

更少的內(nèi)存使用和更高的性能

使用 React with Rails API 部署您的 Web 應(yīng)用程序。可以節(jié)省您通常不必要占用的大部分空間。

一家公司egghead.io由于不必要的內(nèi)存存儲(chǔ)而遭受了大量問題。因此，它轉(zhuǎn)向 React with Rails，這顯著提高了性能并將它們從內(nèi)存存儲(chǔ)問題中解放出來。

使用 React 和 Ruby on Rails 的頂級(jí)公司

React 與 Rails 的組合不僅受到他們擁有的廣泛社區(qū)和全球產(chǎn)品所有者的贊賞。然而，許多知名公司都委托這種組合來開發(fā)他們的 Web 應(yīng)用程序。以下是一些使用 React + Rails 的全球著名組織的名稱。

?? Airbnb
位于舊金山的提供短期寄宿家庭和體驗(yàn)的在線市場，Airbnb Inc. 選擇 React with Ruby on Rails，他們使用 Ruby 作為核心編程語言，Rails 作為后端或服務(wù)器端配置，以及用于前端或用戶界面的 React。

?? Taskrabbit
Taskrabbit 是一個(gè)在線和移動(dòng)市場，為消費(fèi)者的本地需求提供自由職業(yè)，以尋求日?，嵤碌膸椭?。Taskrabbit 說 React 提供了速度并保持了項(xiàng)目的質(zhì)量。為了促進(jìn) React 與 Ruby on Rails 的結(jié)合，他們使用了資產(chǎn)管道。

?? Gusto
Gusto 是一家美國公司，為企業(yè)提供基于云的薪資、福利和人力資源管理軟件。它的主要堆棧 Gusto 使用 React 和 Ruby on Rails 來處理數(shù)十億美元的在線工資單。React 落后于他們推出產(chǎn)品的速度。

?? OpenDoor
OpenDoor 是一家位于舊金山的房地產(chǎn)買賣公司。此前，該公司將 Ruby on Rails 與 Angular 結(jié)合使用。隨著時(shí)間的推移，在性能和用戶體驗(yàn)方面有越來越多的選擇，他們轉(zhuǎn)向 React 并觀察到每年持續(xù)快速的增長，并且創(chuàng)建 SPA 更安全。

何時(shí)將 React 與 Ruby on Rails 結(jié)合使用？

鑒于所有優(yōu)點(diǎn)以及為什么將 Ruby on Rails與 React 結(jié)合使用，您可能想知道何時(shí)應(yīng)該使用這種組合。為了消除您的困惑，我在本節(jié)中提供了一些可能對(duì)您有幫助的答案。當(dāng)你想開發(fā)時(shí)，你應(yīng)該使用 ReactJS 和 Ruby on Rails：

• 具有動(dòng)態(tài)內(nèi)容的應(yīng)用程序

• 復(fù)雜的單頁應(yīng)用程序

• 處理更廣泛數(shù)據(jù)庫的應(yīng)用程序

• 要擴(kuò)展到移動(dòng)平臺(tái)的應(yīng)用程序：使用 Ruby on Rails 的 React Native

• 具有更高性能速度的應(yīng)用程序

如何將 React 與 Ruby on Rails 集成

React-rails gem 和 webpacker gem

react -rails gem是將 React 與 Rails 集成的最簡單和最重要的方法。它涉及到默認(rèn)的 Rails 資產(chǎn)管理，然后 Babel 轉(zhuǎn)換器可以將 JSX 轉(zhuǎn)換為資產(chǎn)管道。

Webpacker gem 通過 Webpack 收集器和包管理器 Yarn 提供了一個(gè)簡單和標(biāo)準(zhǔn)的集成。還可以與 Angular、React 和 Vue 等其他框架和庫進(jìn)行其他集成。

對(duì)于 Rails 啟動(dòng)環(huán)境，另一個(gè)文件存在于config/webpack 中，這是所有環(huán)境通用的shared.js配置的一部分。這里的configuration.js文件也處理來自config/webpacker.yml 的處理設(shè)置。

啟動(dòng) Webpacker 安裝過程的安裝腳本是

• 一次性啟動(dòng) – bin/webpack

• 使用文件更改跟蹤啟動(dòng)并在修改后重建。– bin/webpack

注意：安裝最新版本的 Ruby 和 Rails 后繼續(xù)。

第一步是通過命令 gem 'react-rails' 將 gem 添加到 gemfile，然后通過運(yùn)行 bundle install 和 react-rails 安裝腳本安裝 gem – rails g react:install

這將創(chuàng)建用于存儲(chǔ) React 組件的 app/javascript/components/ 目錄。它還為安裝組件和服務(wù)器端渲染設(shè)置配置。

在此之后，您會(huì)在application.js文件中看到以下代碼。



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

現(xiàn)在，您可以以 .jsx 文件格式創(chuàng)建自己的自定義組件并將其保存在目錄app/assets/javascripts/components中并運(yùn)行代碼：



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

然后，通過react_component 助手在視圖中使用上面的組件：

在我們的視圖文件 events/index.html.erb 中，我們可以將 javascript_pack_tag 替換為對(duì) react_component 的調(diào)用：



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

這會(huì)添加一個(gè)具有相關(guān)類和道具的div ，您稍后可以通過react_ujs驅(qū)動(dòng)程序使用這些類和道具來進(jìn)行組件安裝和渲染。

您可以通過此方法逐漸開始使用 React，并通過將各個(gè)視圖轉(zhuǎn)換為 React 組件來測試所有內(nèi)容。之后，您可以轉(zhuǎn)向更復(fù)雜、更強(qiáng)大的設(shè)置。

react-rails gem 還提供了一個(gè)組件生成器，通過將組件名稱和道具（及其道具類型）傳遞給它來自動(dòng)創(chuàng)建一個(gè)基本組件。它類似于用于創(chuàng)建模型和腳手架的 Rails 生成器：

$ rails 生成 react:component HelloWorld greeting:string

react_on_rails 寶石

將 React 與 Ruby on Rails 集成的第二種方法是通過 react-on-rails gem。react-on-rails和react-rails之間的核心區(qū)別在于它默認(rèn)使用 ECMAScript 6 和綜合工具以及 Webpack，而不是依賴于 Rails 資產(chǎn)管道。此外，它不依賴于 jQuery。

您可以使用 NPM 而不是手動(dòng)下載 gems 來安裝 JavaScript 庫，這使您可以擁有更多的安裝選項(xiàng)并管理許多組件。

最初，安裝節(jié)點(diǎn)以使用 NPM 啟動(dòng) JavaScript 依賴項(xiàng)。您可以從網(wǎng)站下載節(jié)點(diǎn)并通過 NVM 安裝它。然后，您可以將 gems 添加到 Rails 應(yīng)用程序并運(yùn)行 bundle 來安裝它。



寶石“react_on_rails”，“?> 6”

您應(yīng)該提交給下面給定的 Git 分支以使安裝腳本工作。



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

然后，運(yùn)行 gem 的生成器并創(chuàng)建package.json和Procfile.dev文件：



rails 生成 react_on_rails:install

然后，重新運(yùn)行捆綁包以安裝 exec。

之后，重新啟動(dòng) bundle (bundle && npm install) 以安裝 execjs 和 npm install 以安裝 JS 依賴項(xiàng)，然后啟動(dòng) Rails 服務(wù)器：foreman start -f Procfile.dev

該 gem 還創(chuàng)建了一個(gè)自定義目錄來存儲(chǔ)客戶端代碼。完成以上步驟后，就可以使用所需的 React 組件了。

帶有 React 前端的 Ruby on Rails API

將 React 與 Ruby 集成的第三種方法是制作兩個(gè)單獨(dú)的應(yīng)用程序，一個(gè)用于服務(wù)器端或后端，另一個(gè)用于客戶端或前端，其中 API 編寫在 Rails 上，然后 React 上的應(yīng)用程序連接到Rails API 共同呈現(xiàn)以下給定的好處：

• 在客戶端工作的產(chǎn)品所有者可以使用 JS 庫，而無需按照 Rails 標(biāo)準(zhǔn)修改代碼。

• Rails API 使用 JSON 文件與 Reactinterface 通信；因此，沒有必要向許多服務(wù)器共享狀態(tài)，因此擴(kuò)展很容易。

現(xiàn)在，讓我們繼續(xù)將 Rails API 連接到 React 前端。

?? 首先，您必須創(chuàng)建一個(gè) Rails 應(yīng)用程序結(jié)構(gòu)并通過在您的計(jì)算機(jī)上啟動(dòng)相應(yīng)的應(yīng)用程序來啟動(dòng) Postgres 服務(wù)器。在此之后，您將獲得一個(gè)歡迎頁面，然后可以繼續(xù)執(zhí)行其他步驟。



$ rails 新后端應(yīng)用程序

?? 此外，在應(yīng)用程序文件夾中，您應(yīng)該使用 create-react-app 客戶端創(chuàng)建一個(gè)客戶端文件夾和 React 界面。



$ npm install -g create-react-app$ create-react-app 前端應(yīng)用程序

?? 為了同時(shí)運(yùn)行帶有 React 的 Rails 應(yīng)用程序，我們將使用兩個(gè)不同的端口——端口 3000 (Rails) 和端口 3001 (React)，并在同一服務(wù)器上使用代理連接它們。

接下來，我們將在開發(fā)模式下指定 Rails 服務(wù)器在哪個(gè)端口上運(yùn)行的 React 應(yīng)用程序。為此，我們將通過添加以下命令行來編輯文件 ./package.json：



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

上面的行指示 React 應(yīng)用程序在開發(fā)模式下通過代理與使用端口 3000 的后端進(jìn)行通信。

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



“開始”：“設(shè)置 PORT=3001 && 反應(yīng)腳本開始

通過這種方式，您可以在同一臺(tái)服務(wù)器上運(yùn)行 Rails + React 應(yīng)用程序，同時(shí)分別在 React 上創(chuàng)建 API on Rails 后端和 UI。

現(xiàn)在，您還可以使用文件夾中的 Yarn 執(zhí)行以下操作：
啟動(dòng)開發(fā)服務(wù)器（您可以訪問 http://localhost:3000/ 訪問 React 頁面）。– 紗線開始
將應(yīng)用程序捆綁到靜態(tài)文件中以進(jìn)行生產(chǎn)。– Yarn build
啟動(dòng)測試運(yùn)行器。– 紗線測試

現(xiàn)在讓我們繼續(xù)使用必要的端口進(jìn)行 API 調(diào)用的代理，而無需在生產(chǎn)和開發(fā)之間交換，然后是 NPM 服務(wù)器。

Bacancy 案例研究（與 Ruby on Rails 反應(yīng)）

Bacancy 的現(xiàn)有客戶來找我們，主要從事數(shù)字營銷、銷售生成和 SEO 方面的工作。他們提到他們現(xiàn)有的網(wǎng)站使用 PHP，這對(duì)于更廣泛的用戶群來說不是一個(gè)好的選擇。客戶提出了使用 React 和 Ruby on Rails 組合的意圖，其中 Ruby on Rails 用作后端，React 將用作前端?？蛻暨€希望確保開發(fā)質(zhì)量，并希望 Web 應(yīng)用程序能夠提供無憂的用戶體驗(yàn)。

Bacancy 使用 reactstrap 庫來管理和提供更好的用戶體驗(yàn)，并將 React.js 用于只有管理員可以訪問的前端管理儀表板。然后，使用 Ruby on Rails，我們管理管理儀表板 API 模塊，并為客戶端的最終客戶/用戶生成動(dòng)態(tài)網(wǎng)站和 UI。

客戶仍在與我們合作，對(duì)組合和交付的最終產(chǎn)品非常滿意。

結(jié)論

這篇博文包含有關(guān)使用 Ruby on Rails 進(jìn)行 React 的好處和實(shí)現(xiàn)的內(nèi)容。很明顯，它不是解決所有問題的通用解決方案。但是，如果您希望開發(fā)具有無數(shù)微交互的動(dòng)態(tài)應(yīng)用程序，它是一個(gè)不錯(cuò)的選擇。此外，尋找具有 React 和 Rails 專業(yè)知識(shí)的熟練開發(fā)人員是一個(gè)乏味的過程，但為了減輕您的壓力，您可以聯(lián)系我們的專家并從我們這里聘請(qǐng)全棧開發(fā)人員，他們將幫助您獲得最可行和最好的實(shí)施滿足您所有 Web 應(yīng)用程序開發(fā)需求的解決方案。

（言鼎科技）專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā)，歡迎資訊！