酷应用

28个顶级的React UI组件库，请查收！

百家作者：InfoQ 2018-07-09 00:54:47

作者｜Jonathan Saring

编辑｜王强、覃云 - 前端之巅公众号

虽然从数字来看，React 的使用率仍不及 Angular，但它在 Stack overflow 的 2017 年度用户最喜爱组件库评选中拿下了榜首位置：

React 的优势很多：虚拟 DOM、声明性描述用户界面及界面状态建模能力、对于熟练 Javascript 开发者来说较低的入门门槛，这些优势让 React 成为构建 UI 的一个很出色的库。

React 的另一大优点是组件。开发者可以使用组件将 UI 拆分成独立、可复用的部分。本文将介绍 20 多个优秀的 React 组件，帮助开发者迅速地应用它们。

1.React Material-UI

React Material-UI 是一组实现了谷歌 Material Design 设计语言的 React 组件。它在 GitHub 上的 Star 数将近 4 万，可能是最受欢迎的 React 组件库了，目前版本是 v1.3.1。

地址：https://github.com/mui-org/material-ui

2.React-Bootstrap

React-Bootstrap 是模仿 Bootstrap 风格的 React 组件库。Star 数超过 1.3 万，其简洁的设计风格在社区广受欢迎。

地址：https://github.com/react-bootstrap/react-bootstrap

3.React toolbox

React Toolbox 也是一组实现谷歌 Material Design 的 React 组件。它基于愈加流行的 CSS 模块 (使用 SASS 编写) 、Webpack 和 ES6 构建。这个库的官网页面提供了组件演示。

地址：https://github.com/react-toolbox/react-toolbox

4.React Belle

React Belle 组件库为移动和桌面设备都做了优化。Star 数超过 2K，它的样式高度可定制，开发者可以配置所有组件的基本样式，也可以单独修改其中的每个样式。这里是一个很棒的示例（https://gideonshils.github.io/Belle-With-Bit/）。

地址：https://github.com/nikgraf/belle

5.React Grommet

React Grommet 提供了一组丰富的组件，这些组件按照类别分组，所有组件都简单易用，支持跨浏览器和自定义主题。

地址： http://grommet.io/

6. 印度可汗学院的 React 组件

可汗学院的 React 组件以组件库的形式发布，带有内联 CSS 和注释。也可以在 Bit 中添加这个 Bit Scope（https://bitsrc.io/khan/react-components#components）库来安装单个组件。

地址：https://bitsrc.io/khan/react-components#components

7.Material Components Web

Material Components Web 由谷歌的核心工程师和用户体验设计团队开发，其组件使用可靠的开发工作流程来构建漂亮而实用的 Web 项目。它取代了被弃用的 react-mdl，而且 Star 数即将破万。

地址：https://github.com/material-components/material-components-web/

8.Ant Design React

React Ant Design 是遵循 Ant Design 规范的 React UI 库，包含一系列组件和演示。它使用 TypeScript 编写，有完整的定义类型，并提供基于 NPM + webpack + dva 的前端开发工作流程，目前 Star 数已经超过 3 万。

地址：https://github.com/ant-design/ant-design

9.Semantic UI React

Semantic UI React 是官方的 Semantic-UI-React 集成，提供了有趣、灵活的工具，已被 Netflix 和 Amazon 采用。

地址：https://react.semantic-ui.com/introduction

10.Onsen UI

Onsen UI React Components 支持 Onsen UI React 绑定，为构建混合移动应用提供了 React 和 Onsen UI 框架。它有 97 位贡献者，Star 数 6K，是一个有趣的库，值得一试。

地址：https://github.com/OnsenUI/OnsenUI

11.React Virtualized

React Virtualized 提供了可以高效渲染大型列表和表格数据的 React 组件，Star 数超过 1.1 万。

地址：https://github.com/bvaughn/react-virtualized

12.Blueprint

这个库的 Star 数超过 9K，它提供了一系列 React UI 组件，这些组件包含常用的元素、模式和 Web 交互。它适用于为桌面应用构建复杂且数据密集型的 Web 界面。它的组件使用 TypeScript 编写，并以 Sass 编写样式风格，以实现快速且灵活的开发流程。

地址：https://github.com/palantir/blueprint

13.React MD

虽然这个库的 Star 数还没到 1800，但在用户中广受好评，很多人都认为它与众不同，有人甚至觉得它是最优秀的库。它提供了用于开发 Web 应用的套件，遵循谷歌 Material Design 设计原则，还有高度定制化的主题和样式（Sass 编写），值得一试。

地址：https://github.com/mlaursen/react-md

14.Reactstrap

Star 数 5K，它提供了 React bootstrap 4 组件（不依赖 Bootstrap），支持组合和控件。需要注意的是，开发者需要使用 props.children 来组合内容，而不是通过命名的 props 传给组件。

地址：https://github.com/reactstrap/reactstrap

15.Prime React

虽然 Star 数不到 500，但这个库提供了超过 60 个组件和许多漂亮的主题，覆盖多种 UI 功能（诸如数据可视化、文本编辑等，都为移动应用做了优化）。这里是一个快速入门示例（https://github.com/primefaces/primereact-quickstart），基于 create-react-app 项目。

地址： https://github.com/primefaces/primereact

16.Elemental UI

这个 UI 及 CSS 框架仍在开发阶段，Star 数就达到了 4K，已经支持 4 种浏览器，且正在实现内联样式。这个项目旨在提供非模式化的功能组件，可以单独使用或放在一起使用。它提供了朴素的默认样式和灵活的主题定制能力。

地址：https://github.com/elementalui/elemental

17.Rebass

Rebass 的 Star 数为 4K，它包含 60 个组件，是一个 UI 库及 UI 设计系统。它使用样式化组件（https://github.com/styled-components/styled-components）和样式化系统（https://github.com/jxnblk/styled-system，不依赖外部 CSS），旨在减少开发者在响应式 Web 应用中编写 CSS 代码的麻烦。Max Stoiber 称赞它是“业内最佳库之一”。

地址：https://github.com/jxnblk/rebass

18.Atlaskit

Atlassian 的官方 React UI 套件是 Atlassian 设计指南（https://atlassian.design/）的实现。它提供了一组可复用的组件，均可独立下载到开发者的项目中。每个组件还是独立更新、各自发布到 npm 的。这（https://atlaskit.atlassian.com/packages）是这些独立组件的列表。

地址：https://atlaskit.atlassian.com/

19.Fabric UI

abric 是微软 Office 及 Office 365 的 React 组件库。它是响应式、移动应用优先的组件集合，遵循 Office 设计语言。这些组件被应用到了 Sharepoint 和 Office 扩展中。

地址：https://github.com/OfficeDev/office-ui-fabric-react

20.React desktop

这个组件库的 Star 数超过 7K，它旨在将原生桌面体验移植到 Web 端。它包含很多 macOS Sierra 和 Windows 10 组件，可以用在任意基于 JS 的项目中，这个项目正在寻求贡献者。

地址：https://github.com/gabrielbull/react-desktop

21.React Foundation

这个库的目的是参照框架的最佳实践将 Foundation 的所有部分都包装成可复用的 React 组件，它专注于易用性和灵活性，尽可能使用无状态的组件。所有组件都包含了测试用例，并处于活跃的更新状态。

地址：https://github.com/digiaonline/react-foundation

22.Carbon components

这个库的 React 组件都是基于 IBM 的 Carbon 设计系统（http://www.carbondesignsystem.com/）及其组件。需要注意的是，这些组件不会自己导入任何样式，所以用户需要使用 carbon-components 中的 scss 或 css 来引入组件的样式。

地址：https://github.com/digiaonline/react-foundation

23.gestalt

这个库是一组支持 Pinterest 设计语言的 React UI 组件，被 Pinterest 内部用来实现统一的 UI 设计和开发。它刚诞生不久，更新很活跃。

地址：https://github.com/pinterest/gestalt

24.Amaze UI React

这个库是中国流行的 Amaze-UI（http://amazeui.org/）跨平台框架的 React 实现。虽然它已经许久没有主动维护了，但很多人仍然很喜欢这个库。

地址：https://github.com/amazeui/amazeui-react

25.Zent

这个国内的开发者开发的 React UI 库，它包含了有赞商城使用的 40 个多组件，非常简洁、设计精美。它支持 TypeScript、定制化的主题，有超过 90% 的测试覆盖率。

Zent React 菜单组件

地址：https://github.com/youzan/zent

26.UXCore

这个 React UI 库包含超过 40 个为企业应用设计的组件，专注于后端应用的性能，主要是表格和表单这些组件（特别是当数据自动与视图绑定时）。

UXCore React 表格组件

地址：http://uxcore.coding.me/components/button/

27.React UWP

这个 Windows 下的 UI 框架实现了微软的 UWP 和 Fluent，提供了全面的控件库以实现 UI 可视化呈现，以及用于其它控件或内容（如图像和媒体）的容器。

地址：https://github.com/myxvisual/react-uwp

28.Halogen

这个库只做一件事情：制作酷酷的载入进度条。它做的很棒，包含将近 20 个最酷的载入进度条。需要注意的是，这个项目最近两年多都没更新了。

地址：https://github.com/yuanyan/halogen

结语

React 组件就像可复用的乐高积木一样，帮助我们方便地开发应用程序。流行的库和 UI 框架为应用提供了预设的组件集合，帮助开发者加快开发速度。所有这一切都能助力我们使用 React.js 创建出优秀的应用程序。

参考链接

https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4
https://blog.bitsrc.io/best-react-ui-component-libraries-for-2018-part-2-d231dcb04c0a

课程推荐