如何构建与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中文网其他相关文章！