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 将创建一个带有空白视图的新项目，以帮助您入门。
在我们继续之前，让我们快速浏览一下 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 的精选时事通讯The Replay
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js
发现TypeScript 领域中使用的流行 ORM
现在，单击div-2，转到CSS > QUICK LAYOUT，然后选择第一个布局。
你应该有类似这样的输出：
我们已经使用 Aspect UI builder 创建了组件 UI，现在，让我们使用以下命令获取设计并将其与我们的代码库同步：
方面获取 --project--out --key
您可以通过单击项目下拉列表中的项目名称来获取项目 ID 和 API 密钥。
注意， 默认情况下
成功获取并同步设计后，您应该会看到以下输出：
Aspect 会生成一个component.tsx和components.css文件。现在，您可以在项目中导入和使用视图。
在本教程中，我们演示了如何使用 Aspect 来减少与创建可重用 React 组件相关的开发时间。
随意按照本教程中概述的步骤为应用程序添加更多功能。
调试 React 应用程序可能很困难，尤其是当用户遇到难以重现的问题时。如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket。
LogRocket就像一个用于 Web 和移动应用程序的 DVR，几乎可以记录您的 React 应用程序上发生的所有事情。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。LogRocket 还监控您的应用程序的性能，并使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。
LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。LogRocket 记录来自 Redux 存储的所有操作和状态。