2020 年 10 个最佳 React UI 框架/库

这篇文章最初发表于https://www.devaradise.com/best-react-ui-frameworks-libraries

React UI 框架（也称为 React UI 库或 React UI Kit）是具有特定设计系统的预定义和内置 React UI 组件的集合。

它可以帮助开发人员更快、更轻松地创建 React 应用程序。React UI 库与我之前讨论过的用于 Web 应用的 React 管理模板类似，但又不尽相同。

它们都简化了开发人员的工作，但适用范围不同。React UI Kit 可用于开发任何类型的应用程序，并且其定制通常更容易。

另一方面，React 模板通常针对特定类型的应用程序进行主题设计。它可以是管理模板、落地页模板或电商模板。

何时应该使用 React UI 框架？

仅仅因为使用 React UI 框架看起来很酷并不意味着您必须在每次开发项目时都使用它。

如果您处于以下情况，使用 React UI 库将是最好的：

1. 您没有太多时间来开发您的 React 项目。
2. 您的应用程序没有固定的设计，因此您应该设计自己的应用程序，但不想在样式设计上花费太多时间。
3. 您喜欢 React UI 库的设计系统，并希望将其采用到您的应用程序中，只需进行少量定制或无需定制。

如果您的应用设计已固定，并且您知道需要进行大量自定义，则不建议使用 React UI 框架。在这种情况下，像Tailwind这样的 CSS 框架将是最佳选择。

但是，如果您仍然想使用 React UI 框架，即使您知道会有一些定制，我建议您使用它的 CSS 框架版本。

一些 React UI 库（例如 Reactstrap 和 Semantic UI）是基于现有的 CSS 框架构建的。

根据我的经验，自定义 CSS 框架比自定义 React UI 框架更容易。这是因为 CSS 框架只会影响基于类的组件，而 React UI 框架的组件是预定义的 React 组件，并且拥有自己的 props。

2020 年最佳 React UI 框架/库有哪些？

市面上有很多 React UI 库。但是，你只需要其中最好的一个就可以在你的项目中使用。

这里，我整理了 React.js 最优秀、最流行的 UI 库。只需选择一个适合你项目的即可。

1.Material-UI

Material UI 是最流行的 React UI 框架，具有 Material Design 风格。它提供了大量的 React 组件，可以更快速、更轻松地进行 Web 开发。

您可以构建自己的设计系统，或者从 Material Design 开始。

Material-UI 已被 React 开发者广泛使用，用于将 Material Design 融入其应用。如果你想轻松创建 Material Design 应用，它是最佳选择。

事实上，有一些基于该框架构建的反应模板，例如MaterialPro和Material Admin。

前往 Material-UI 网站

2. React Bootstrap 和 Reactstrap

您可能知道，Bootstrap 是前端开发人员广泛使用的最流行的 CSS 框架。

但是，Bootstrap 依赖于 Jquery。因此，如果你想在 React 项目中使用 Bootstrap 组件，你还需要导入 jquery 和 bootstrap js 文件，但这并非最佳实践。

React Bootstrap 和 Reactstrap 解决了这个问题。它们是两个不同的 React UI 库，但都基于流行的 Bootstrap 框架。

他们将原始 Bootstrap 框架中的每个组件都采用为 React 组件。因此，您无需将 Jquery 和 Bootstrap js 文件导入到项目中。

如果您想在 React 项目中使用 Bootstrap 组件，请选择其中一个！

前往 React Bootstrap 网站
前往 Reactstrap 网站

3. Ant Design

Ant Design 是全球第二流行的 React UI 框架，拥有企业级产品的设计系统。

它是一个开源的 React UI 库，在 Github 上拥有超过 6.2 万个 Star 和超过 2.3 万个 Fork，并且仍然开放贡献。它设计简洁，UI 组件丰富，文档完善。

前往 Ant Design 网站

4. 语义 UI React

Semantic-UI 最初是一个类似 Bootstrap 的主题化 UI 框架。现在，它已与 React、Angular、Meteor、Ember 等流行的 JavaScript 框架集成。

Semantic-UI 拥有 50 多个 UI 元素、3000 多个 CSS 变量和 3 级变量继承。它使用 Em 单位以实现响应式设计，并且支持 Flexbox 布局。

截至本文撰写时，Semantic-UI 在 Github 上已拥有超过 4.8k 个 star 和 5k 个 fork。因此，它相当受欢迎，并被前端开发人员广泛使用。

前往 Semantic UI 网站

5. React 桌面

顾名思义，React Desktop 是一个 React UI 库，旨在为 Web 带来原生体验，具有许多 macOS Sierra 和 Windows 10 组件。

React Desktop 是创建跨平台应用的绝佳选择，该应用可在桌面和 Web 上运行。它也能完美兼容NW.js 和 Electron.js，并且适用于任何 JavaScript 项目。

使用类似桌面的 UI 工具包，您可以更快、更轻松地创建跨平台的反应应用程序。

前往 React Desktop 网站

6. Elemental UI

Elemental UI 是一款 React UI 套件，具有高质量、模块化的 UI 脚手架组件集。

它旨在创建一组功能齐全、不受束缚的组件，这些组件可以单独使用或一起使用，并具有不显眼的默认样式和灵活的主题功能。

目前，Elemental UI 在 Github 上拥有 4.3k+ 个 star 和 240+ 个 fork。

前往 Elemental UI 网站

7. Atlaskit

Atlaskit 是 Atlassian 官方的 UI 库，遵循 Atlassian 设计指南构建。它拥有 Web 应用程序所需的丰富 UI 组件。

Atlaskit 最棒的地方在于它的模块化。你无需导入所有 Atlaskit 库即可使用其组件。只需选择一个文档齐全的包（此处有详细说明），然后将其导入到你的项目中即可。

前往 Atlaskit 网站

8. 索环

Grommet 是一款响应式、移动优先的 React UI 套件，专为 Web 应用打造，拥有易于使用的组件库。它简洁易用，提供可访问性、模块化、响应性和主题化功能。

Grommet 可以轻松应用于新项目和现有项目。您可以使用新的应用入门套件或现有的应用入门套件在您的项目中实现 Grommet。

Netflix、Uber、三星、Github 等一些优秀的公司都在使用 Grommet 进行项目开发。所以，你不必担心它的质量。

前往 Grommet 网站

9.Carbon 设计系统

Carbon 是 IBM 使用其设计语言开发的针对数字产品和体验的开源设计系统。

Carbon 设计系统旨在提高 UI 的一致性和质量，使开发过程更加高效和专注，在设计师和开发人员之间建立共享词汇，并围绕设计和开发最佳实践提供清晰、可发现的指导。

它首先在 React 中构建，但它也支持vanilla JS、  Angular和 Vue中的系统核心部分 。

前往 Carbon 设计系统网站

10. PrimeReact

PrimeReact 是一个开源的 React UI 库，包含 70 多个 UI 组件。它由 PrimeTek Informatics 开发，PrimeTek Informatics 是一家在开发开源 UI 解决方案方面拥有多年经验的供应商。

它是一个完整的 React UI 框架，提供各种输入组件、按钮、面板、数据视图和列表、图表等。

前往 PrimeReact 网站

~~

就这样。

你还知道其他值得一提的 React UI 框架吗？欢迎在下面留言！

编码愉快！