使用 Aspect 更快地构建 React 可重用组件

Aspect是一个新的开发工具，它允许你在浏览器中虚拟地创建 React 组件。它消除了为应用程序创建和设置 React 项目的压力。

Aspect 通过提供带有 HTML 拖放功能的仪表板来节省开发时间，这极大地简化了创建 React 组件的过程。Aspect 还将您的设计同步到您的代码库，并提供将它们导出为 zip 文件的选项。

在未来的版本中承诺了许多额外的、很酷的功能，例如对 MaterialUI 和 Tailwind CSS 以及 Sketch 和 AdobeXD 等库的支持。

在本教程中，我们将演示如何使用 Aspect 更快地构建可重用组件。我们将构建如下所示的简单产品页面：

跳跃前进：

• 入门

• 项目 UI 概述

• 创建视图

• 添加元素

  • 创建父布局

  • 创建导航栏

  • 创建产品

• 导出组件

入门

要开始使用 Aspect，请在此处注册。

然后，使用以下命令全局安装 Aspect CLI：

npm install @metacode-inc/aspect -g    

注册后，Aspect 将创建一个带有空白视图的新项目，以帮助您入门。

项目 UI 概述

在我们继续之前，让我们快速浏览一下 Aspect 项目的 UI，以更加熟悉如何导航和使用该工具。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

以下是 Aspect 用户界面不同部分的摘要：

• 项目：查看项目详细信息的列表，例如产品 ID；您还可以从此处使用项目的 API 密钥生成、查看和同步您的代码库

• 视图：为您的项目创建不同的视图；双击视图以更改其默认名称

• PROPERTIES：定义项目的自定义属性

• STATES：为项目中的元素创建自定义状态并设置条件

• ELEMENTS：管理项目中的元素并定义它们的层次结构

• CSS：定义项目的样式；使用快速布局来组织您的元素；当 ELEMENTS 部分展开时，CSS 部分可见

• + INSERT：添加过滤器并将元素添加到您的项目中

现在我们对 Aspect 的功能有了更多的了解，让我们开始构建我们的产品页面。

创建视图

我们已经有了一个由 Aspect 创建的视图。要创建新视图，请单击“视图”选项卡上的+符号。然后，双击View2并将其重命名为“Product”。

添加元素

现在，让我们在视图中添加一些元素。

创建父布局

我们将首先通过div单击+ INSERT并从下拉列表中选择div添加父级。当您将鼠标悬停在视图上时，您应该会看到一个+符号出现。这表明一个元素已被选中。右键单击元素并拖动它以将元素放大到所需的大小。

创建导航栏

现在我们有了一个父布局，让我们div为导航栏添加另一个布局。重复与添加父节点相同的步骤div。然后，转到CSS选项卡并将宽度设置为100%并将最小高度设置为63。

生成的布局应如下所示：

接下来，让我们使用一个ul元素将一些导航栏列表添加到项目中。单击INSERT，选择ul，然后将其拖放到父级 div-0div中。

现在，在元素中添加三个li列表项元素ul。在li元素中，将p元素和“主页”、“关于”和“产品”添加到“属性”选项卡中的文本属性。

将文本添加到p元素中，然后单击CSS > QUICK LAYOUT选项卡中的第一个布局以添加样式。选择第一个布局以内联显示内容。

要删除项目符号，请将元素中的list-style属性更改为none。通过为div-0指定#42a7f5的背景颜色来添加黑色背景。ul

接下来，对齐元素并将字体更改为白色， 方法是为每个元素添加7px的margin-right和#fff的颜色。li

创建产品

现在，让我们为产品做一个布局。我们将使用一个p元素来描述产品。然后，我们将为产品创建一个子布局。

插入一个, 并在div其中插入另一个div和一个div-1。现在，将p-2的text属性更改为“Products”。p

要设置子布局的样式，请单击div-1并转到CSS > QUICK LAYOUT选项卡。选择第二个布局，并将div-2的width属性更改为100%。您的项目应如下所示：

接下来，div在div-2中插入另一个来保存产品详细信息。在div-3中插入两个p、一个img和一个button。将p-3元素的text属性更改 为“Techno m16”，将p-4元素的text属性更改为Price: $200。接下来，添加一个按钮并将文本属性设置为“添加到购物车”。p

现在，将div-3中所有元素的font-size属性更改为12px并将align属性设置为center。p

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

• 发现TypeScript 领域中使用的流行 ORM

Windows怀旧工具软件，Windows 桌面的最高级玩法，回到那些时光！

接下来，单击div-3，然后按Ctrl + D复制 div 并创建div-4。继续并更改div-4中每个元素的文本和src属性。

现在，单击div-2，转到CSS > QUICK LAYOUT，然后选择第一个布局。

你应该有类似这样的输出：

导出组件

我们已经使用 Aspect UI builder 创建了组件 UI，现在，让我们使用以下命令获取设计并将其与我们的代码库同步：

方面获取 --project  --out  --key 

您可以通过单击项目下拉列表中的项目名称来获取项目 ID 和 API 密钥。

注意， 默认情况下 不会生成，您需要 单击 Generate new API key 按钮

成功获取并同步设计后，您应该会看到以下输出：

Aspect 会生成一个component.tsx和components.css文件。现在，您可以在项目中导入和使用视图。

结论

在本教程中，我们演示了如何使用 Aspect 来减少与创建可重用 React 组件相关的开发时间。

随意按照本教程中概述的步骤为应用程序添加更多功能。

全面了解生产 React 应用程序

调试 React 应用程序可能很困难，尤其是当用户遇到难以重现的问题时。如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket。

LogRocket就像一个用于 Web 和移动应用程序的 DVR，几乎可以记录您的 React 应用程序上发生的所有事情。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。LogRocket 还监控您的应用程序的性能，并使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。LogRocket 记录来自 Redux 存储的所有操作和状态。