在 ReactJS 中开发 UI：学习 5 种使用 ReactJS 更快地构建 UI 的技术以及在 React 中使用的趋势 UI 库，以帮助设计人员更快地构建 UI。

现在是 2022 年，React 拥有庞大的生态系统，可以帮助开发人员更快地将复杂的 UI 带入生活。此外，在 ReactJS 库的广泛支持下，开发人员几乎不需要从头开始构建组件。

然而，并不是每个ReactJS UI 开发人员都知道在 ReactJS 中更快地构建 UI 的最佳实践。因此，我将讨论在 ReactJS 项目中更快地构建 UI 的前五种方法（我个人使用的）。所以事不宜迟，让我们开始吧：

在 ReactJS 中更快地开发 UI 的 5 大技术

以下是如何在 ReactJS 中更快地开发 UI：

研究和分析设计

要使用此策略创建应用程序的 UI，您必须检查设计并考虑多种模式。通常，移动应用程序开发人员至少花费 30 分钟评估和考虑可能使用的各种策略和模式。他们根据以下三个标准评估设计：

了解网格系统

设计师使用网格来开发网站。这将使开发人员更容易使网站响应较小的设备。视情况而定，开发人员会以百分比形式使用 flex、grid 或 width 来使网站响应。

在所有其他策略中，这是唯一需要我们大量时间的策略。然而，这背后是有原因的。它建立了应用程序的路线图并帮助组织我们的代码。

搜索包装器

在这种情况下，我们所说的“包装器”到底是什么意思？包装器是使用儿童作为道具的东西。例如，假设您在我们的应用程序的三个位置有一个模态框，具有相同的标题、关闭图标、边距和内边距。您将为它创建一个 ModalWrapper 组件。同样，我们可以创建一个卡片包装器。

可重用组件

我的下一步是列出我可以在我的应用程序中重用的东西。例如，按钮、带有标签的输入、错误等等。记录所有可重用组件的主要目标是通过避免一遍又一遍地编写同一行代码来保持一致性并节省时间。道具用于改变可重用的组件。（包装器同样是可重用的组件，但需要子组件，因此称为不同的。）

开发站点数据

我们在设计 UI 时经常遇到数据列表，因为我们没有可用的 API；因此，为了使过程顺利和快速，我构建了虚拟数据并根据需要对其进行映射。此外，将它放在一个名为 site-data 的新文件夹中。

我们将在连接 API 时销毁站点数据中的目录。但是，如何管理站点数据完全取决于您！要创建站点数据文件夹，您必须使用代码段。例如，在构建 UI、生成对象和导出对象时经常会遇到数据。

这种方法可以帮助您保持组件清洁，并为您的应用程序提供精简版的 CMS（如果您愿意）。

设置状态

因此，如果您遇到应用程序设计的交互方面，尤其是在使用表单、复选框、下拉菜单等时。总是尝试建立一个状态来接收来自用户的变化数据。

对于表单，我利用 console.log 记录通过提交按钮输入的所有表单数据。当我需要集成 API 时，它非常有用且快速。

集成 ESLint

ESLint帮助我们使我们的代码更加统一。他们禁止我们进行不必要的导入或变量，并要求我们在整个项目中坚持统一。对于 Javascript，我们必须在整个应用程序中使用单引号，并为 className 和 props 等属性使用双引号。

开发人员经常使用 Airbnb ESlint 编码标准来减少现场错误的数量，同时节省大量时间。

整合Storybook

storybook非常适合开发主题。它允许我们通过修改其属性和响应性来单独开发和测试我们的组件。它也可能用于其他原因，例如保留一个组件库、一组相同创建的组件、在整个团队中分发它以获取反馈等等。

这完全取决于我们正在从事的项目的需求和类型。将storybook用于小型应用程序或带有几个屏幕的登录页面是没有好处的。

ReactJS 的 7 个热门 UI 库

Ant Design

Ant Design 是一种面向企业的 UI 设计语言和React UI 框架。根据 GitHub Stars，它是最受欢迎的 React UI 库。它包含大约 100 个组件，从排版到表格。Ant Design 文档非常整洁，有几个示例。

Ant Design 节省的不仅仅是开发时间。它还通过包含所有组件的 Sketch 和 Figma 文件来节省设计人员的时间。Ant Design 组件同时支持 JSX 和 TypeScript。蚂蚁主题也可以轻松定制。Ant Components 在管理表单和验证方面为 ReactJs 开发人员节省了大量时间，因为它提供了预构建的表单组件。Ant Design 也支持 Hooks。

React Bootstrap

React Bootstrap 允许 React 组件使用 Bootstrap JS。React Bootstrap 组件完全使用 React 创建，不使用 jQuery。我们在 JavaScript 中使用的所有引导组件都包含在 React Bootstrap 中。在 beta 阶段，它现在包含 Bootstrap 5。React Bootstrap 带有编写良好的文档和代码示例。

Bootstrap JavaScript 被 React-Bootstrap 取代。每个组件都是作为纯 React 组件从头开始创建的，没有像 jQuery 这样的不必要的依赖项。

React-Bootstrap 已经发展和扩展，React 作为最早的库之一，使其成为您 UI 基础的绝佳选择。

我们将兼容性放在首位，我们拥抱我们的引导核心，并渴望与世界上最大的 UI 生态系统兼容。通过完全依赖 Bootstrap 样式表，React-Bootstrap 可以与您已经喜欢的数千个 Bootstrap 主题一起使用。

Semantic UI React

Semantic 是一种基于自然语言思想的 UI 组件架构。官方的 Semantic-UI-React 集成是 Semantic UI React。它包括 50 多个组件，没有 jQuery，并具有自动控制状态、子组件和其他功能。如果您的 React 应用程序需要语义 UI，建议使用此包。

Semantic UI 认为单词和类是可互换的想法。类利用自然语言语法（例如名词/修饰语连接、词序和复数）来自然地链接想法。此外，语义使用称为行为的简单语句来激活功能。组件中的任何任意决定都表示为开发人员可以更改的设置。

Material-UI

Fluent 是一个跨平台的开源设计系统，它为 UI/UX 设计人员和开发人员提供构建引人入胜的产品体验所需的工具——可访问性、国际化和性能。Fluent 设计用于设备和工具、Windows 11 和 Windows 10。

Microsoft 创建了流畅的用户界面，并提供了一个工具库、React 组件和用于构建 Web 应用程序的 Web 组件。这是有据可查的。

流利的人倾听并适应。它们在各种设备上看起来很自然，从平板电脑到笔记本电脑，从 PC 到电视。他们从办公室到客厅，然后到虚拟世界。它还适应行为和意图——他们掌握并预测需要什么。他们将人和想法聚集在一起，无论他们是在世界的另一端还是彼此相邻。

Material-UI

简而言之，Material-UI 是一个开源项目，其中包含应用 Google 的 Material Design 的 React 组件。它始于 2014 年，就在 React 向公众发布之后，并且从那以后越来越受欢迎。

它是使用最广泛的 React UI 库。它是一个简单且适应性强的组件框架，用于创建更快、更有吸引力、更易于访问的 React 应用程序。Material-UI 有近 100 个组件。它还包括 1000 多个图标。

Material-UI 为设计师提供付费的 Sketch、Figma 和 Adobe Xd 文件。Material-UI 也被 Spotify、NASA、Netflix、亚马逊等知名企业使用。Material-UI 带有编写良好的文档和代码示例。

Chakra UI

Chakra UI 是一套可访问、可重用和可组合的 React 组件，使构建网页和应用程序变得轻而易举。Chakra UI 组件遵循 WAI-ARIA 标准规范并提供适当的 aria-* 属性。由于其性能和经验，Chakra UI 社区正在迅速扩大。此外，Chakra UI 带有编写良好的文档和代码示例。

Chakra UI Pro 包含 210 多个带有源代码的组件，可帮助您更快、更轻松地构建项目。开箱即用，所有组件都支持亮色和暗色模式。您可以根据需要更改组件、样式和品牌。就这么简单。它还包括在移动设备、平板电脑和桌面设备上看起来很棒的响应元素。您将收到的每个代码示例都是用 TypeScript 编写的，旨在与 Chakra UI 完美配合。为了获得更好的开发体验，组件在逻辑上被隔离到许多文件中。最后，可访问性是第一位的。这就是为什么他们从一开始就优先考虑可访问性。

Onsen UI

如果您希望您的网络应用程序感觉自然，这个 UI 库是为您准备的。Onsen UI 旨在通过赋予其类似移动设备的感觉来增强用户体验。它加载了模仿原生 iOS 和 Android 设备 UI 的功能。Onsen 的 UI 元素和组件是本地创建的，因此非常适合开发混合和在线应用程序。该包允许您模拟在原生 Android 和 iOS 设备上发现的页面过渡、动画、涟漪效果、弹出模型和其他功能。

这些 ReactJS 库如何帮助开发更快的 UI？

ReactJS 有一个强大的社区和许多用于各种功能的包。用户界面 (UI) 是任何应用程序最重要的方面。我们可能会在 React 项目中遇到各种复杂的 UI 和流程。

我们可能需要更多时间从头开始创建组件。例如，如果我们的组件有表单或表格，我们可能会选择第三方库来缩短开发时间。但是，这需要在我们的软件中使用多个第三方软件包。

当我们的依赖增加时，我们可能会遇到挑战，例如某些包被弃用或与当前的 React 版本不兼容。这将阻止我们的应用程序升级到更新版本。这是由项目决定的。

为了消除这些困难和捆绑，我们可以使用 UI 库。UI 库包含使用最广泛的组件，并由更广泛的社区维护。对于大多数 React 项目来说已经足够了。这就是这些 ReactJS 库如何帮助开发更快的 UI。

准备好加速 ReactJS UI 开发了吗？

上述每一种技术或方法都已由 ReactJs 开发人员实际实现，并已被证明在更快地构建 ReactJS UI 方面是成功的。

实际上，UI 库缩短了开发时间并最大限度地减少了使用的依赖项数量。还有几个 UI 库，但我刚刚选择了前七个最受欢迎的库。我希望你觉得这很有帮助。