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

栏目: IOS · Android · 发布时间: 5年前

内容简介:虽然 React 的用户量落后于 Angular很多,但它在 Stack overflow 的最受喜爱的组件库中排名领先:React 在 2017 年的受欢迎程度上升React 的虚拟 DOM、声明式地描述用户界面并为界面构建相应状态的能力、对有一定水平的 JavaScript 开发者来说入门门槛低,这些都使 React 成为了一个非常棒的构建 UI 的专业库。

虽然 React 的用户量落后于 Angular很多,但它在 Stack overflow 的最受喜爱的组件库中排名领先:

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

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

React 的虚拟 DOM、声明式地描述用户界面并为界面构建相应状态的能力、对有一定水平的 JavaScript 开发者来说入门门槛低,这些都使 React 成为了一个非常棒的构建 UI 的专业库。

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

你还可以使用Bit 把这些组件结合起来,并将你的组件转化成能够统一管理并在多个项目间同步的模块。

有了 Bit,你可以轻松地在多个项目和应用间共享、开发和同步组件,为你的团队管理组件,以及改进具有双向代码变更的 React 的组件的工作流。这里有一个例子。

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

ReactHero UI component with Bit

1. React Material-UI

React Material-UI 是一套实现了 Google 的 Material Design 的 React 组件。它在 GitHub 上有 30k+ stars ,大概是目前最受欢迎的 React 组件库了。它的 v1 版本快要推出了。

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

2. React-Bootstrap

React-Bootstrap 是一个具有 Twitter 的 Bootstrap 的观感的 React 组件库。它的极简风格在社区中有很高的热度,有超过 11k 的 stars。

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

3. React toolbox

React Toolbox 是一套实现了 Google Material Design 规范的 React 组件。它是基于如 CSS Modules(基于 SASS)、webpack 和 ES6 这样的最新提案构建的。它的网站提供了一个在线的组件 playground。

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

4. React Belle

React Belle 是一套针对移动端和桌面端都有优化的 React 组件。它的样式可以高度定制,因此你可以配置所有组件通用的基础样式,也可以在每个组件中单独修改样式。这里也有一个不错的例子。

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

5. React Grommet

React Grommet 提供了相当丰富的组件,这些组件按使用方式分类,所有的组件都是易用的、跨浏览器兼容的、支持主题定制的。

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

6. React Components by Khan Academy

Khan Academy 的React 组件 是以有行内 CSS 和注释的组件库的形式发布的。单独的组件也可以通过向 Bit 添加这个库创建的这个 Bit Scope 安装。

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

7. Material Components Web

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

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

8. Ant Design React

根据 Ant Design 的规范,React Ant Design 是一个包含了组件和 demo 的 React UI 库。它是用 TypeScript 写的,并有完整的类型定义,也提供了一个 npm + webpack + dva 的前端开发流程。

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

9. Semantic UI React

Semantic UI React 是 Semantic-UI-React 的官方整合库。它有大概 5k 的 stars,并被 Netflix 和 Amazon 所采用,提供了有趣而灵活的“武器库”。

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

10. Onsen UI

Onsen UI React Components 可以与 Onsen UI 的 React bindings 一起使用,并提供了使用 React 和 Onsen UI 框架的混合开发移动应用。它有 81 个贡献者和超过 5.6k 的 stars,是个可以考虑的有意思的库。

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

11. React Virtualized

React Virtualized 有大概 8k 的 stars,它提供了可以高效渲染长列表和扁平数据的 React 组件。

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

单独的组件

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

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

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能 等领域,想要查看更多优质译文请持续关注 掘金翻译计划 、官方微博、 知乎专栏


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ACM程序设计培训教程

ACM程序设计培训教程

吴昊 / 中国铁道 / 2007-8 / 28.0

《ACM程序设计培训教程》不是这些专门问题的教科书,所以对这些问题所涉及知识的介绍不多,主要是分析一个个案例,介绍专属于ACM程序设计的方法和技巧。一起来看看 《ACM程序设计培训教程》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码