Redwood 框架介绍

Redwood 具有端到端的开发工作流程，它将React的最佳部分用于开发页面和组件、GraphQL作为数据查询语言、Prisma作为 ORM 用于访问数据、TypeScript用于更好的编程、Jest用于测试和Storybook帮助组件开发。它在JAMStack中提供了全栈开发流程。

Redwood痴迷于开发人员的经验，并尽可能多地消除现有库优雅地解决这些问题以及我们不编写解决方案的样板。结果有一个可以爱上的Javascript开发经验！

特征

让我们看看 Redwood 的主要基本功能，使其看起来像一个成熟的框架。

• 项目结构：创建 Redwood 项目时，会生成 API 和 Web 两个文件夹。API 文件夹包含项目的 GraphQL 后端，它可以在任何服务器上运行。Web 文件夹包含 React 前端代码；Redwood 使用 React 作为前端，围绕路由、组件、表单和单元格构建了几个功能，包括独特的格式结构。

• 独特的命令行：RedwoodJS CLI 允许您在指定的目录中生成所需的任何文件。它包括两个入口点，rw和rwt，分别代表开发应用程序和为框架做出贡献。此外，您可以使用 CLI 进行迁移和搭建脚手架。

• 路由：Redwood Router 是 React Router 的定制版本。它允许开发人员通过在单个路由文件中列出所有路由来跟踪具有相应页面的路由。命名路由功能允许您根据需要为每个路由添加参考名称。React Router name（用于从link组件调用路由组件）、path（用于匹配路由的URL路径）和page（一个prop，表示需要被关联的组件的prop路径匹配时渲染）。

*使用单元格获取数据：RedwoodJS 单元格被认为是可以为您处理数据的高级组件。如果您使用 RedwoodJS 单元格，您可能需要编写查询，然后 Redwood 将为您完成剩下的工作。数据获取机制与典型的传统系统有很大不同。Redwood 提供了一个异步工具来获取数据，前端和后端分别处理它们的任务，这使得前端无需等待数据被获取即可加载。让我们看看红木细胞；它们包含四个名为Loading、Empty、Error和Success的状态，它们会根据单元格的状态自动呈现。

• 与常规 HTML 集成：Redwood 已经确定了 React Forms 的问题及其与典型 HTML Form 相比的复杂性，并提供了一个解决方案，它是一个帮助方法作为 React Forms 的包装器，围绕react-hook-form. 使用此方法，可以更轻松地验证需要将所需样式放入导入的输入字段的客户端和服务器端.

readwook 工作原理

在典型环境中，Redwood 应用程序分为两部分：前端和后端。这表示为单个 monorepo 中的两个 JS/TS 项目。前端项目称为web端，后端项目称为API端。Web 端最终将在用户的浏览器中运行，而 API 端的代码将在服务器上运行。

注意：Redwood 将“前端”称为“网络”。这是因为 Redwood 构想了一个世界，在这个世界中，您可能会有“手机”、“桌面”、“cli”等其他方面。但为了本文的目的，我们将其称为前端。

前端是用 React 构建的。Redwood 的路由器使得将 URL 路径映射到 React 'Page' 组件变得简单。页面可能包含一个“布局”组件来包装内容和“单元格”以及常规的 React 组件。单元允许您以声明方式管理获取和显示数据的组件的生命周期。其他 Redwood 实用程序组件使得集成表单和各种基本需求变得微不足道。

后端是 GraphQL API 的实现。您的业务逻辑被组织成代表其内部 API 的“服务”，并且可以从外部 GraphQL 请求和其他内部服务中调用。Redwood 可以自动将您的内部服务与 Apollo 连接，从而减少您必须编写的样板数量。