GitHub 十个最受欢迎的 React 相关库-CSDN博客

（ 翻译自 medium ： Top 10 React Libraries on GitHub 原文地址）

由Facebook创建的 React 已经成为一个十分强大的 Javascript 框架，它使得前端开发者的开发工作更加容易。如果你曾经用 React 开发过一些应用，你也会赞同开发 React 应用需要配合一些其他的库一起使用，才能获得最好的开发体验。

从经验来看，使用开源项目对开发者来说意义重大，而且 Github 上有大量的与 React JS 有关的开源库，这使得我们在开发 React 应用的时候有充分的选择。尽管有大批可用的库，对于我们来说如果能筛选出一些最佳的那也是极好的。So, 这篇文章致力于介绍10个最好用的 react 相关库（按 github 上 stars 数从大到小排名），言不赘述，让我们直接开始吧。

MATERIAL UI

31,194 ★

Version 0.20.0

Dependencies 11

Material UI 是一个基于谷歌的 Materail 设计模式实现的 React UI 组件库。它使得开发出色的单页web应用(SAP)更加容易。

如果在服务端渲染使用 Material-UI ，开发者必须在服务端和客户端使用相同的开发环境。

使用 npm 命令安装：

npm install material-ui复制代码

Demo演示地址： www.material-ui.com/#/component…

想查看更多，请点击 github 和官方网址

ANT-DESIGN

20,995 ★

Version 3.0.1

Dependencies 42

Ant-Design 是由阿里巴巴蚂蚁金服团队开发的基于 React 的组件库，使用它可以创建生动漂亮的 react 应用，开发体验也十分愉悦，而且开发出的应用用户体验也十分棒。

使用 npm 命令安装：

npm install antd复制代码

Demo演示地址： antd-admin.zuiidea.com/login?from=…

Ant-Design 是一个十分流行的库，所以你可以通过 github 和官网获取更多有用的信息。

SOTRYBOOK

16,559 ★

Version 1.0.1

Dependencies 12

通过使用像 Meteor 、 Firebase这样的框架，后端开发变得越来越简单。 React Storybook 这个库为前端人员也提供了类似的便捷。

React Storybook 通过提供一个独立的UI 开发环境，让你可以在应用程序之外为你的 react 应用创建和设计UI 组件。这样也使得开发团队中的其他人更容易在自己的项目中复用 UI 组件。

使用 npm 命令安装：

npm install -g @storybook/cli
cd my-react-appgetstorybook复制代码

安装后，通过使用以下命令运行 React Storybook:

npm run storybook复制代码

通过 github 和官网获取更多信息

GATSBY

15,712 ★

Version 1.9.130

Dependencies 51

Gatsby 是一个基于 React JS 快速搭建静态网站的库。通过使用 Gatsby, 你可以不用花太多时间在编码上就能把普通的文字转化为精美的网站。

现在已经有很多使用静态网站生成器来搭建高质量的网站了。使用 Gatsby 生成的网站可以更易于维护和扩展。

如果你作为开发者已经对 React 框架很熟悉了，那么结合 Gatsby 你打开发体验将会更好。

使用 npm 命令安装：

npm install gatsby复制代码

你也可以使用命令行的脚手架:

npm install --global gatsby-cli复制代码

通过 github 和官网获取更多信息

ENZYME

11,846 ★

Version 3.2.0

Dependencies 11

Enzyme是 Airbnb开发的一个基于React构建的轻量级测试库，可以作为React的JavaScript测试工具。这也使得断言，操纵和遍历React组件输出的任务变得非常容易。

它通过模仿jQuery的API进行DOM操作和遍历（如查找，模拟等），并为不同类型的渲染（如shallow, mount 和 static）提供选项。

其他测试库如 Mocha, Expect, Chai, Jasmine 和 Enzyme一起使用，也不会产生冲突。

Enzyme 非常容易上手,安装命令：

npm install enzyme

假设我们有两个组件 ToDoItem 和 ToDoList，我们可以这样测试：具体内容参考：示例

通过 github 和官网获取更多信息

BLUEPRINT

7,762 ★

Version 1.34.0

Blueprint是一个基于react 的 UI组件库，对于使用优秀代码构建复杂的Web界面以及可重用性的组件非常有效。

该库主要是为PC端网页构建的，但是，未来也会支持移动端。它非常灵活的，因为它可以与其他JavaScript框架，如AngularJS，VueJS等一起使用

Blueprint既可以用于CSS，TypesScript也可以用于JavaScript。

使用npm命令安装：

npm install blueprint复制代码

通过 github 和官网获取更多信息

SPECTACLE

5,693 ★

Version 4.0.4

Dependencies 16

Spectacle 是一个基于 React 的库，用于创建高质量动态的网页演示幻灯片。你可以通过使用 React 组件来轻松进行演示。

使用这个库创建演示文稿特别容易，因为它拥有像 <Slide> 、<BlockQuote> 这样的开箱即用的组件。这将使得你在创建大量UI的演示文稿的时候变得非常愉悦。

这个库很灵活，你可以编写你的构建配置或者是使用官方提供的模板来让你的Web演示更好的呈现。

使用 npm 命令安装，然后自己配置你的演示：

npm install spectacle复制代码

或者使用模板：

$ git clone git@github.com:FormidableLabs/spectacle-boilerplate.git my-spectacle-demo$ 
cd my-spectacle-demo$ 
rm -fr .git复制代码

具体示例可以查看这篇文章： Presentations With Spectacle — How I Modularize My Deck

通过 github 和官网获取更多信息，或者查看 Demo。

ELEMENTAL UI

3,848 ★

Version 0.6.1

Dependencies 2

Elemental UI 是一个非常灵活高效的 UI 框架，使用它可以快速构建设计出色的 Web 应用。

这个框架与 Materail UI 非常相似，但是 Elemental UI 更轻量级。它是一个灵活且CSS样式漂亮的 React 库。使用npm安装，并通过 Browserify 或 Webpack构建到你的项目中。

使用 npm 轻松安装：

npm install elemental复制代码

通过 github 和官网获取更多信息

GROMMET

2,621 ★

Version 2.0.0-alpha.5

Dependencies 8

Grommet 是一个用于提升Web用户体验的 react 库。用他们自己的话说：这是“企业级应用程序最先进的用户体验框架”。它是一个非常灵活的库，它有用于 Dashboards, Login, Search, Meters 等大型组件。通过配置属性来增强它的灵活性。

借助Grommet附带的开箱即用组件，你可以创建让人惊叹的，可复用的用户界面元素，为用户提供在使用Web应用程序时的绝佳体验。

Grommet 组件具有可访问、跨浏览器兼容、主题定制等特性。

使用 npm 安装：

npm install -g grommet复制代码

通过 github 和官网获取更多信息

MOZAIK

2,284 ★

Version 1.4.4

Dependencies 31

Mozaik是一个基于 nodejs / react / d3 / stylus的很棒的工具库，它可以为web应用程序创建生动的的dashboards。

它提供了很好的自定义选项，同时它可以进行响应式布局。这意味着它可以在所有平台上运行，无论是在大屏幕、PC端上还是在移动设备上。

Mozaik有很多主题可供开发人员用来创建个性化应用。它允许栅格布局，优化的后端通信，并且还可以在需要时使用多个dashboards。

通过 github 和官网获取更多信息

总结

使用上面的这些库会让你的开发更有效率，这些库可用于：

设计出色的用户交互界面
构建吸引人的用户交互体验
对JS 和 React 代码进行测试
生成静态网页

这些库都用到了 React 的特性和组件特征，让你的开发变得更简单有效。

原文作者： Anton Shaleynikov