2021 年 5 大 React UI 设计框架

什么是反应？

React 的教科书定义是它是一个开源的前端 JavaScript 库，由 Facebook 开发者社区创建和维护。 它用于构建用户界面或 UI 组件。

但是，此定义假定您已经知道那里提到的一些关键术语。 我们有一篇完美的博客文章，它从头开始详细介绍了 React 是什么，您可以在此处找到。

React 也为客户和程序员带来了福音，允许开发人员快速轻松地构建 MVP，从而实现跨平台开发，帮助程序员成为全栈。

为什么我们需要设计框架？

从用户界面的角度来看，有很多设计语言。 Material UI 就是一个很好的例子。 当您拥有特定的设计语言时，组件总是被重用，并且它们具有特定的预定义结构。 即使您没有严格遵循某种设计语言，也有很多跨应用程序相似的组件。

设计框架为开发人员提供了常用 UI 组件的工具包。 这允许开发人员快速开发项目，因为他们不必继续重新发明轮子。

话虽如此，以下是前 5 个 React UI 设计框架：

1. 材质界面

Material Design 是谷歌开发的最流行的设计语言之一。 它使用更多基于网格的布局、响应式动画和过渡、填充和深度效果，例如照明和阴影。

Material UI 是一个使用 Material Design 的 React 框架。 这意味着它有一些组件可以更容易地将 Material Design 实现到你的 React 项目中。

它的一些功能如下所述：

• Material UI 是最受欢迎和积极维护的库之一，在 GitHub 上有 2.1k 贡献者和 68.6k 星
• 使用 <MuiThemeProvider> 组件可以非常轻松地为您的应用程序和字体定义自定义颜色主题。 它还有一个预定义的调色板
• 不依赖于任何全局样式表，例如 normalize.css，Material UI 组件是自支持的，并且只会注入它们需要显示的样式。
• 它有一个庞大的组件库，例如应用栏、数据表、滑块、工具提示等，它们都具有相似的设计语言，因此您的应用程序看起来具有凝聚力，无需太多努力

2. 反应引导

如果你对前端开发有一个模糊的概念，你可能听说过 Bootstrap。 它是一个开源 CSS 框架，旨在响应式前端 Web 开发，它是移动优先的。 它包含大量模板，从排版、表单到按钮、导航和其他基于 CSS 和 JavaScript 的界面组件。

顾名思义，React Bootstrap 取代了 Bootstrap JavaScript。 每个组件都是作为 React 组件从头开始开发的，没有像 jQuery 这样的不需要的依赖项。

它的一些功能如下所述：

• 它在 GitHub 上有 19.5k 星和 406 位贡献者。
• React Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。 它是用 flexbox 构建的，并且是完全响应的。
• Bootstrap 包含一些通用的 CSS 过渡，可以应用于许多组件。 React Bootstrap 将它们捆绑到 react-transition-group 中的几个可组合的 <Transition> 组件中，这是 React 常用的动画包装器。
• 将动画封装到组件中还有一个额外的好处，那就是使它们更广泛地有用，并且便于在其他库中使用。 所有可以动画的 React Bootstrap 组件都支持可插入的 <Transition> 组件。

3. 反应 - 管理员

对于每个以业务为中心的软件，管理面板都是必不可少的，几乎所有的管理面板都具有许多基于业务领域的类似功能。 这方面的一些示例可能是查找用户的地址、将订单标记为已退款、重置密码等。

React Admin 是一个使用 React、Material UI、React Router、Redux 和 React-final-form 的框架。 使用这些，它提供了一个可定制的统一管理框架，可用于构建仪表板。

这里提到的是它的一些功能：

• 它在 GitHub 上有 17k 颗星和 425 位贡献者。
• React-Admin 是一个前端框架。 它是为使用项目中现有的 REST / GraphQL API 而构建的。
• 它支持创建前端管理应用程序，这些应用程序通过数据提供程序以标准化方式与后端交互。
• 它使用适配器方法，简要说明如下：
  • 数据提供者充当框架和后端之间的接口。
  • 它处理前端和各自后端 API 之间的查询和响应处理，从而将重点放在以模块化步骤构建仪表板。
• React Admin 提供的一些东西是：
  • 关系支持
  • 条件格式
  • 功能齐全的数据网格
  • 乐观渲染

4. 蚂蚁设计

就像 React 的 Material UI 遵循 Google 的 Material Design 原则一样，Ant Design for React 也遵循 Ant Design 原则。 它由中国企业集团阿里巴巴创建，并被阿里巴巴、腾讯、百度等多家知名企业使用。

根据他们的设计价值观页面，Ant Design 专注于以下方面：

• 自然——使用自然的交互，避免任何复杂性
• 确定的——以这样的方式创建设计规则，以避免低效率和维护繁重的产品
• 有意义——牢记最终用户的需求，并围绕该需求进行设计
• 成长——专注于通过设计发现产品的功能和价值

它的一些特点是：

• 目前 Ant Design 在 GitHub 上有 72k 颗星和 1,423 位贡献者
• Ant 布局系统由一个 24 等分（表示整体的一部分）网格和一个单独的布局组件组成，您可以选择使用它。
  • 网格使用熟悉的 Row 和 Col 系统，但也可以指定一个名为 flex 的属性，它允许利用 Flexbox 属性来定义响应式 UI。
• 这些组件由一家中国企业集团制造，包括对数十种语言的国际化支持。
• 使用 Less.js 作为其样式语言，还可以根据特定的设计规范自定义组件。
• 它具有布局、网格、表单、面包屑导航、分页等组件。

我们 Creole Studios 喜欢使用 Ant Design 框架，并已将其用于许多项目。 一个例子是连接雇主和专家以完成任务的在线职位发布和跟踪门户，其中一个屏幕如下所示：

我们有许多专家致力于 Ant Design 和 Material UI 以及其他设计框架，您的想法就像联系我们一样简单，我们将为您的项目提供无可挑剔的设计。

5. 反应基础

Foundation 是一系列响应式前端框架，可帮助设计在任何设备上看起来都很棒的漂亮的响应式网站、应用程序和电子邮件。 基金会背后的组织 Zurb 将他们的框架描述为语义、可读、灵活和完全可定制的

它是一个类似于 bootstrap 的 CSS 框架，React Foundation 基本上是按照框架的最佳实践将 Foundation 的每个部分包装成可重用的 React 组件。 它的一些特性描述如下：

• 它有 579 个 GitHub 星和 21 个贡献者
• React Foundation 使用纯渲染组件，也称为无状态组件，尽可能将内存使用量保持在最低限度
• 有状态组件仅用于较大的组件，例如 ResponsiveNavigation，其中状态实际上是必需的。

没有“完美”的 React UI 设计框架是所有项目的最佳选择，但是，有一些特点，例如详尽的文档、大量的组件、维护良好且不断更新的存储库以及大型社区论坛可以提供帮助您在 Web 和移动应用程序开发过程的每一步中，使框架易于使用。