如何構建與Rails 5.1 API一起使用的React應用程序

>本教程展示了使用Rails 5.1 API和React前端構建CRUD應用程序。 React的動態UI功能和Rails強大的後端的組合創建了功能強大的應用程序體系結構。

本動手指南對導軌和基本反應概念熟悉。 即使沒有鐵軌經驗，反應部分也可以適應其他後端。 該教程涵蓋了功能和類組件，創建React應用程序，用於API呼叫的AXIO和用於有效狀態管理的不可能的助手。

密鑰功能：

• rails 5.1 API後端：利用Rails的API唯一功能（需要版本5.1.3或更高版本）。
• 創建React App frontend：使用最小配置的流線react設置。
>
• 完整的CRUD操作：>在React中實現，讀取，更新和刪除React功能，使用Axios進行API交互作用，而對狀態更新的不變性誘因。
啟用CORS：
• 允許React應用程序（在另一個端口上運行）和Rails API之間進行通信。
• 組件結構：採用邏輯和狀態管理的演示文稿和類組件的功能組件。
• 表格處理：管理形式的輸入和無縫數據操縱的API交互。
• 未來的預處理設計：構建了可擴展性的構建，允許將來添加動畫，分類和搜索。

應用程序概述：

>該項目是一個Idea板，是一個單頁應用程序（SPA），顯示想法作為方形瓷磚。用戶可以添加，編輯和刪除想法；更改在模糊上進行自動儲存。

完整的代碼可在GitHub上找到：

• Ideaboard Rails api
• Ideaboard React Frontend

設置Rails API：>

1. 確保安裝軌道5.1.3或更高： gem install rails -v 5.1.3
創建一個新的Rails API應用程序：
2. > rails new --api ideaboard-api && cd ideaboard-api生成
模型：
3. Idea> rails generate model Idea title:string body:string && rails db:migrate種子數據庫（db/seeds.rb）：（原始教程中提供的種子數據）
創建
4. （app/controllers/api/v1/indues_controller.rb）：（索引的控制器邏輯，創建，更新和破壞原始教程中詳細介紹的操作） rails db:seed>定義路由（config/doutes.rb）：（ API端點的路由）
>
5. 啟用cors（config/application.rb）：（中間件配置允許交叉原始請求）IdeasController
使用
6. 或瀏覽器測試API端點。
>
8. 設置React前端：curl
>

安裝全球創建React App：

創建React App：

1. > npm install -g create-react-app安裝所需軟件包：
2. > create-react-app ideaboard && cd ideaboard運行應用程序：
3. npm install axios immutability-helper --save遵循原始教程中提供的詳細步驟和代碼示例，開發React組件（App.js，IdeasContainer.js，Idea.js，Ideaform.js）。 這涉及使用Axios，處理表單提交，管理狀態更新和實施CRUD操作的數據。 >
4. >這種詳細的故障提供了原始教程的更清晰，更簡潔，重組的版本，維護核心信息並提高可讀性。 切記用實際的github存儲庫鏈接替換npm start佔位符。
>

以上是如何構建與Rails 5.1 API一起使用的React應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！