> * 原文地址：[11 React UI Component Libraries you Should Know in 2019](https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4)
> * 原文作者：[Jonathan Saring](https://blog.bitsrc.io/@JonathanSaring?source=post_header_lockup)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/11-react-component-libraries-you-should-know.md](https://github.com/xitu/gold-miner/blob/master/TODO1/11-react-component-libraries-you-should-know.md)
> * 译者：[ElizurHz](https://github.com/ElizurHz)
> * 校对者：[wuzhengyan2015](https://github.com/wuzhengyan2015), [xiaxiayang](https://github.com/xiaxiayang)

# 2019 年你应该要知道的 11 个 React UI 组件库

虽然 React 的用户量落后于 Angular [很多](https://insights.stackoverflow.com/survey/2017#technology)，但它在 Stack overflow 的最受喜爱的组件库中排名领先:

![](https://cdn-images-1.medium.com/max/800/1*2nIak4DHSE3NtpxljcLfqQ.png)

React 在 2017 年的受欢迎程度上升

React 的虚拟 DOM、声明式地描述用户界面并为界面构建相应状态的能力、对有一定水平的 JavaScript 开发者来说入门门槛低，这些都使 React 成为了一个非常棒的构建 UI 的 [专业库](https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76)。

使用 React 的另一个重要原因是它的组件。组件能够让你把 UI 分割成独立的、可复用的块。这里有 11 个很棒的 React 组件库可以帮助你开始使用 React 的组件。

你还可以使用 [Bit](https://bitsrc.io) 把这些组件结合起来，并将你的组件转化成能够统一管理并在多个项目间同步的模块。

- [**Bit — 共享和构建组件**：Bit 让使用更小的组件开发软件、团队间共享和在你的所有项目中同步变得有趣且容易](https://bitsrc.io "https://bitsrc.io")

有了 Bit，你可以轻松地在多个项目和应用间共享、开发和同步组件，为你的团队管理组件，以及改进具有双向代码变更的 React 的组件的工作流。这里有 [一个例子](https://bitsrc.io/bit/movie-app)。

![](https://cdn-images-1.medium.com/max/800/1*EW7hjct1RduBrJj43xHO5g.png)

React [Hero UI component](https://bitsrc.io/bit/movie-app/components/hero) with Bit

#### 1. React Material-UI

[React Material-UI](http://www.material-ui.com/) 是一套实现了 Google 的 Material Design 的 React 组件。它在 GitHub 上有 [30k+ stars](https://github.com/mui-org/material-ui)，大概是目前最受欢迎的 React 组件库了。它的 v1 版本快要推出了。

![](https://cdn-images-1.medium.com/max/800/1*tbpaxLVm76qcI0S9s_h_rw.png)

#### 2. React-Bootstrap

[React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap) 是一个具有 Twitter 的 Bootstrap 的观感的 React 组件库。它的极简风格在社区中有很高的热度，有超过 11k 的 stars。

![](https://cdn-images-1.medium.com/max/800/1*Z8iv-H53lE0yiEonO7v1vA.png)

#### 3. React toolbox

[React Toolbox](http://react-toolbox.io/#/) 是一套实现了 Google Material Design 规范的 React 组件。它是基于如 CSS Modules（基于 SASS）、webpack 和 ES6 这样的最新提案构建的。它的网站提供了一个在线的组件 playground。

![](https://cdn-images-1.medium.com/max/800/1*3MDbsOlWKBwtLesdEucWeA.png)

#### 4. React Belle

[React Belle](https://github.com/nikgraf/belle) 是一套针对移动端和桌面端都有优化的 React 组件。它的样式可以高度定制，因此你可以配置所有组件通用的基础样式，也可以在每个组件中单独修改样式。这里也有一个 [不错的例子](https://gideonshils.github.io/Belle-With-Bit/)。

![](https://cdn-images-1.medium.com/max/800/1*pypcfwkxe8omGQpX7YFsIw.png)

#### 5. React Grommet

[React Grommet](http://grommet.io/) 提供了相当丰富的组件，这些组件按使用方式分类，所有的组件都是易用的、跨浏览器兼容的、支持主题定制的。

![](https://cdn-images-1.medium.com/max/800/1*70XQ6onrhXheDfMcCHY6uA.png)

#### 6. React Components by Khan Academy

Khan Academy 的 [React 组件](http://khan.github.io/react-components/) 是以有行内 CSS 和注释的组件库的形式发布的。单独的组件也可以通过向 Bit 添加这个库创建的 [这个 Bit Scope](https://bitsrc.io/khan/react-components#components) 安装。

![](https://cdn-images-1.medium.com/max/800/1*0ioHWySqvLlW4J5HPhN1wA.png)

#### 7. Material Components Web

[Material Components Web](https://material.io/components/web/) 是由 Google 的一个核心团队的工程师和 UX 设计师开发的，它的组件支持可靠的开发工作流以构建美观且实用的 Web 项目。它取代了 react-mdl（现在已经废弃了），已经有接近 7k 的 stars 了。

![](https://cdn-images-1.medium.com/max/800/1*XhhTfN5l25iIP5lL6RIhKA.png)

#### 8. Ant Design React

根据 Ant Design 的规范，[React Ant Design](https://ant.design/docs/react/introduce) 是一个包含了组件和 demo 的 React UI 库。它是用 TypeScript 写的，并有完整的类型定义，也提供了一个 npm + webpack + [dva](https://github.com/dvajs/dva) 的前端开发流程。

![](https://cdn-images-1.medium.com/max/800/1*m20KzN0Yo1Mn_TBzCCs1JA.png)

#### 9. Semantic UI React

[Semantic UI React](https://react.semantic-ui.com/) 是 Semantic-UI-React 的官方整合库。它有大概 5k 的 stars，并被 Netflix 和 Amazon 所采用，提供了有趣而灵活的“武器库”。

![](https://cdn-images-1.medium.com/max/800/1*ifnxZvzp3gVZOj1pTlGl7w.png)

#### 10. Onsen UI

[Onsen UI React Components](https://onsen.io/react/) 可以与 Onsen UI 的 React bindings 一起使用，并提供了使用 React 和 Onsen UI 框架的混合开发移动应用。它有 81 个贡献者和超过 5.6k 的 stars，是个可以考虑的有意思的库。

![](https://cdn-images-1.medium.com/max/800/1*wUCqvq-3Sp2Vbx0TmTdzdg.png)

#### 11. React Virtualized

[React Virtualized](https://github.com/bvaughn/react-virtualized) 有大概 8k 的 stars，它提供了可以高效渲染长列表和扁平数据的 React 组件。

![](https://cdn-images-1.medium.com/max/800/1*Go5Bue8KJGIdBMUt7fvfVQ.png)

### 单独的组件

每个单独的组件都可以在 [awesome-react](https://github.com/enaqx/awesome-react) 和 [awesome-react-components](https://github.com/brillout/awesome-react-components) 这两个项目中找到。你也可以将 [Bit](https://bitsrc.io/) 添加到任意一个仓库或者库来追踪与隔离仓库或者库里的组件。然后，这些组件可以很快地直接从仓库中的任何路径中导出，开发者就可以使用 npm 或者 yarn 来安装它们，并在任意的项目中进行修改。

似乎在 2018 年，React 的热度会持续上升，并且 React 组件会逐渐成为更多日常使用的应用的组成模块。

> 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。


---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。
