微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

28个顶级的React UI组件库,请查收!

2018-07-06 17:09 王强 译
策划|覃云
作者|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

Fabric 是微软 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 表格组件

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

  27.React UWP

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

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

  28.Halogen

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

地址:http://ww12.madscript.com/

  结  语   

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

 课程推荐


前端之巅

「前端之巅」是 InfoQ 旗下关注大前端技术的垂直社群。紧跟时代潮流,共享一线技术,欢迎关注。

 
前端之巅 更多文章 微信小程序的下一步:支持NPM、小程序云、可视化编程、支持分包 Kotlin生态调查结果出炉:超过6成的开发者用过Kotlin了 ESLint的NPM账户遭黑客攻击,可能窃取用户NPM访问令牌 Swift并发编程的10大陷阱 前端周报:Udacity弃用RN,微信小程序将支持npm、分包和可视化编程
猜您喜欢 H5游戏引擎LayaBox融资成功,A轮进帐1亿! 文本挖掘:情感分析详细步骤(基础+源码) 干货 | 你以为程序员真的和风尘女子一样吗? 有没有什么程序员和产品经理听的歌? 淘宝技术部世界杯算法大赛赛况