以 React 开发者的身份探索基于 rust 的前端框架 Yew
以 React 开发者的身份探索基于 rust 的前端框架 Yew
WebAssembly，俗称 WASM，彻底改变了 Web 应用程序的构建方式。它允许开发人员使用他们最喜欢的编程语言来构建 Web 应用程序。
有了这些可能性，开发人员在构建前端应用程序时就无需承担学习基于 JavaScript 框架的负担。他们可以利用他们最喜欢的编程语言特性，如静态类型、模式匹配、内存安全等，来构建前端应用程序。
Yew 是一个现代的基于 Rust 的框架，用于使用 WebAssembly 构建前端应用程序。
在这篇文章中，我们将学习如何使用来自的开放 API 数据构建 Web 应用程序 虚拟JSON 和 Yew 作为 React 开发人员。
可以找到 GitHub 存储库 这里 .
React 和 Yew 的相似之处
以下是两种技术之间的相似之处：
Similarities
先决条件
要完全掌握本教程中介绍的概念，需要满足以下要求：
- 对 React 的基本了解
- 对 Rust 的基本了解
- 锈 安装
开发环境设置
首先，我们需要确保我们的机器上安装了最新版本的 Rust。我们可以通过运行以下命令升级到稳定版本：
生锈更新
接下来，我们需要安装一个 WASM 目标，这是一个帮助我们将 Rust 源代码编译成基于浏览器的 WebAssembly 并使其在 Web 浏览器上运行的工具。我们可以通过运行以下命令来安装它：
rustup 目标添加 wasm32-unknown-unknown
最后，我们需要安装 Trunk，一个用于管理和打包 WebAssembly 应用程序的工具。我们可以通过运行以下命令来做到这一点：
货物安装行李箱
入门
首先，我们需要导航到所需的目录并在我们的终端中运行以下命令：
cargo new yew-starter && cd yew-starter
此命令创建一个名为 紫杉开胃菜 并导航到项目目录。
货物 是 Rust 的包管理器。它的工作原理类似于 npm 在 React 生态系统中。
在运行命令时， 货物 将生成一个包含基本文件的项目目录，如下所示：
Project structure
main.rs 是我们应用程序的入口点。
货运.toml 是用于指定项目元数据（如包、版本等）的清单文件。它的工作方式类似于 包.json 在 React 应用程序中。
接下来，我们继续通过修改来安装所需的依赖项 [依赖项] 的部分 货运.toml 文件如下图：
红豆杉=“0.19” 是一个基于 Rust 的前端框架
核心 = “1.0.136” 是一个用于序列化和反序列化 Rust 数据结构的框架。例如，将 Rust 结构转换为 JSON。
格鲁网=“0.2” 是一个 HTTP 请求库。它的工作原理类似于 React 生态系统中的 axios。
wasm-bindgen-futures = “0.4” 是一个基于 Rust 的库，通过弥合 Rust 异步编程（期货）和 JavaScript 之间的差距，在 Yew 中执行异步编程 承诺 .基本上，它有助于利用 承诺 Rust 中基于 Web 的 API。
我们需要运行以下命令来安装依赖项：
货物建造
应用程序入口点
安装好项目依赖后，我们需要修改 main.rs 文件里面 源代码 文件夹如下图：
哎呀！上面的代码段中似乎发生了很多事情。让我们分解一下。
使用 yew::prelude::* ：导入所需的 红豆杉 通过指定依赖及其关联 *
#[功能组件（应用程序）] : 声明 应用程序 功能作为功能组件 应用程序 作为名字。这里使用的语法称为 Rust 宏；宏是编写其他代码的代码。
fn app() -> Html {…..} : 使用 html！ 创建宏 面向 React 开发人员的 Yew 标记。该宏的工作方式类似于 JSX 在反应。
紫杉::start_app::<App> () : 通过挂载启动 Yew 应用程序 应用程序 组件到文档的正文。它的工作原理类似于 ReactDOM.render React 中的函数。
HTML 渲染
与 React 渲染到 DOM 的方式类似，同样的原则也适用于 Yew。接下来，我们需要创建一个 索引.html 在我们项目的根目录中使用 Bootstrap CDN 支持的文件并添加以下代码段：
Updated Project Structure
接下来，我们可以通过在终端中运行以下命令来启动开发服务器来测试我们的应用程序：
中继服务--打开
Working application
使用 Yew 构建真正的应用程序
现在我们已经很好地掌握了 Yew 的工作原理，我们可以继续构建一个集成了 虚拟JSON 的用户 API。
**Rust 中的模块系统
** 在 React 中，组件构成了应用程序的构建块。在我们的应用程序中，我们将使用 Rust 模块系统来构建我们的应用程序。
为此，我们需要导航到 源代码 文件夹并创建 零件 和 模型 与其对应的文件夹 修改器 文件来管理可见性。
Modules
要使用模块中的代码，我们需要将它们声明为模块并将它们导入到 main.rs 文件如下图：
**创建模型
** 完成后，我们需要创建模型来表示从 API 返回的响应。为此，我们需要导航到 楷模 文件夹，在这里，创建一个 用户.rs 文件，并添加以下代码段：
上面的代码片段执行以下操作：
- 导入所需的依赖项
- 使用
派生宏来生成对格式化输出和反序列化数据结构的实现支持。这#[serde(rename_all = “camelCase”)]宏将蛇案例属性转换为驼峰案例（API 以驼峰案例返回数据） - 创建一个
用户具有 API 嵌套响应所需属性的结构 - 创建一个
用户结构体用户财产;数组类型用户结构。 Rust 中的动态数组表示为向量
下面是来自 DummyJSON 的 API 响应示例：
附言 ： 这 _酒馆_ 修饰符使结构及其属性公开，并且可以从其他文件/模块访问。
接下来，我们必须注册 用户.rs 作为文件的一部分 楷模 模块。为此，请打开 修改器 在里面 楷模 文件夹并添加以下代码段：
**创建组件
** 随着模型的完全设置，我们可以开始创建我们的应用程序构建块。
首先，我们需要导航到 成分 文件夹并创建一个 头文件.rs 文件并添加以下代码段：
上面的代码片段创建了一个 Header 组件来表示我们的应用程序标头。
其次，我们需要创建一个 加载器.rs 文件在同一个 成分 文件夹并添加以下代码段：
上面的代码片段在我们的应用程序加载时创建了一个表示 UI 的 Loader 组件。
第三，我们需要创建一个 消息.rs 文件在同一个 成分 文件夹并添加以下代码段：
上面的代码片段执行以下操作：
- 导入所需的依赖项
- 创建一个
消息属性结构与文本和css_class属性来表示组件属性。这#[派生（属性，PartialEq）]宏将结构标记为类似于 React 应用程序的组件道具 - 解构道具并将它们用作 CSS 类并在标记中显示文本
第四，我们需要创建一个 卡片.rs 文件在同一个 成分 文件夹并添加以下代码段：
上面的代码片段执行以下操作：
- 进口
红豆杉依赖和用户我们之前创建的模型 - 创建一个
卡片道具具有用户属性的组件道具 - 解构 props 以在 UI 中显示用户信息
最后，我们必须将新创建的组件注册为 成分 模块。为此，请打开 修改器 在 components 文件夹中并添加以下代码段：
把它们放在一起
创建应用程序组件后，我们可以开始使用它们来构建我们的应用程序，方法是修改 main.rs 文件如下图：
上面的代码片段执行以下操作：
- 导入所需的依赖项
- 第 13–14 行 : 创建一个
用户和错误应用程序状态通过使用使用状态钩子（类似于使用状态在 React 中钩子）并指定没有任何作为初始值。这使用状态句柄struct 用于指定状态类型和选项enum 表示一个可选值 - 第 18–19 行 ：创建状态副本以在当前范围内安全使用
- 第 21–42 行 : 使用
use_effect_with_deps类似的钩子使用效果在 React 中执行从 虚拟JSON API 与wasm_bindgen_futures和gloo_net的请求::获取功能。我们还使用匹配控制流以匹配通过相应更新状态返回的 JSON 响应 - 第 44–66 行 : 创建一个
用户列表逻辑变量来抽象我们的应用程序逻辑，使用匹配通过执行以下操作来控制流以匹配模式：
- 通过列表映射用户并通过个人用户到卡片API 返回适当数据时的组件
- 使用信息和装载机分别匹配错误和加载状态的组件 - 第 68–73 行 : 用
标题组件和用户列表逻辑抽象
完成后，我们可以使用以下命令重新启动开发服务器：
中继服务--打开
working demo
结论
这篇文章讨论了如何使用来自的开放 API 数据创建 Web 应用程序 虚拟JSON 和紫杉。
这些资源可能会有所帮助：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
