首页手记 GitHub 上需要关注的 10 大顶级 React 库

GitHub 上需要关注的 10 大顶级 React 库

标签：

深度学习

由Facebook创建的React已经成为一个非常强大的JavaScript框架，它能使程序员的前端开发工作更容易。

如果你已工作于React.js一段时间了，那么你会赞同若干其他的库可以和React一起使用以获得最佳体验。

从经验来看，使用开源项目对于开发人员来说意义重大，而GitHub上提供了大量基于React的库，让人不知该如何选择。

尽管可以选择多个选项，但是将范围缩小到三两个框架和库也是极好的。因此，本文讨论了GitHub上的十大react库。所讨论的库按照其在各种代码仓库中的星星数量排序。

话不多说，让我们一起来看看吧。

1.Material UI

31 194
版本0.20.0
依赖性11

Material UI是通过使用React组件来实现Google材料设计的库。它能让Web开发、创建出色的用户界面以及开发单页面应用程序变得容易起来。

将Material UI用于服务器渲染时，开发人员必须为服务器和客户端使用相同的环境。

Material UI可以使用npm命令进行安装：

npm install material-ui

你可以从GitHub代码仓库和官方网站了解更多信息。

查看示例——由@abottega制作的Material UI风格动画复选框。

2.Ant Design

20 995
版本3.0.1
依赖性42

Ant Design是一个基于React的库，用于为react应用程序添加可爱的设计。它专为设计桌面应用程序和提供令人愉快的开发体验而创建，以带来更好的用户体验。

虽然，这是一个来自中国的库。但是，志愿者已经正确地翻译了语言，这使得讲英语的开发者也可以很容易使用它。

你可以使用npm命令轻松安装Ant Design：

npm install antd

Ant Design是一个非常流行的库，所以你可以从GitHub代码仓库或官方网站上找到很多信息。

请参阅CodePen上由Dash Bouquet（@dashbouquetdevelopment）制作的Pen Ant-design。

3.Storybook

16,559
版本1.0.0
依赖性12

借助Meteor和Firebase等框架可以使得后端开发更加容易。而React Storybook是为前端开发人员创建的效果相同的库。

通过提供它自己的UI开发环境，React Storybook允许你在应用程序之外构建和设计React应用程序的UI组件，这使得开发团队中的其他人员可以更轻松地在他们自己的项目中使用UI组件。

你可以使用npm命令轻松安装React Storybook：

npm i -g @storybook/cli 

cd my-react-app 

getstorybook

安装完成后，可以使用以下命令运行React Storybook：

npm run storybook

你可以从官方网站以及官方GitHub代码仓库中找到有关这个库的更多信息。

4.Gatsby

15,712
版本1.9.130
依赖性51

Gatsby是一个建立在React.js框架之上的快速静态站点生成器。使用Gatsby，你可以将纯文本转换成超棒的网站，而无需花费大量的时间在代码上。

很多网站已经开始使用静态网站生成器来建设高质量的网站。使用Gatsby，生成的网站以后可以很容易地维护，并且允许更容易扩展web功能。

如果你作为开发人员已经花了充足的时间工作于React框架，那么与Gatsby合作会创造更好的开发体验。

你可以使用npm命令轻松安装Gatsby：

npm install gatsby

它还附带了一个命令行工具，可以使用以下方法进行安装：

npm install --global gatsby-cli

更多关于这个库的信息可以在它的GitHub代码仓库和官方网站上找到。

5.Enzyme

11,846
版本3.2.0
依赖性11

Enzyme是一个基于React而构建的轻量级测试库，可以作为用于React的JavaScript测试实用程序。这也使得断言、操纵和遍历React组件输出的任务变得更容易。

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

其他测试库如Mocha、Expect、Chai和Jasmine可以与Enzyme一起使用，而没有任何副作用。

Enzyme很容易使用和安装：

npm install enzyme

更多关于这个伟大的库的信息可以在其GitHub代码仓库和官方网站上找到。

6.Blueprint

7,762
版本1.34.0

Blueprint是一个基于UI的web React工具包。它在为桌面应用程序构建复杂的Web界面和鼓励代码的可重用性方面非常高效。

这个库主要是为桌面应用程序构建的，但是，也可以用于为移动应用程序添加功能。它非常灵活，因此可以和其他JavaScript框架，例如Angular，Vue.js等等一起使用。

Blueprint可以与CSS、TypeScript和JavaScript一起使用。

我们可以使用npm命令轻松安装Blueprint：

npm install blueprint

从GitHub代码仓库和官方网站查看更多信息。

7.Spectacle

5,693
版本4.0.4
依赖性16

Spectacle是一个基于React的库，用于为Web演示创建优质和动态的幻灯片。你可以使用React组件非常轻松地进行演示。

使用Spectacle创建演示文稿非常容易，因为它带有像<Slide>和<BlockQuote>这样开箱即用的组件，可以让大量UI的实现变得非常令人愉快。

Spectacle可以使用以下命令安装：

npm install spectacle

这个库还具有一定的灵活性，因此你可以决定编写你自己的构建配置，或使用样板配置为Web演示提供一个很好的外观。

有关这个库的更多信息可以在GitHub代码仓库和官方网站上看到。

写入deck的main.js文件是/presentation/index.js。看个例子——如何用Spectacle创建演示文稿。

// index.jsimport React, { Component } from 'react';import {
  Appear, BlockQuote, Cite, CodePane, Code, Deck, Fill, Fit,
  Heading, Image, Layout, ListItem, List, Quote, Spectacle, Slide, Text
} from 'spectacle';export default class extends Component {
  render() {    return (      <Spectacle>
        <Deck>
          <Slide>
            <Text>Hello</Text>
          </Slide>
        </Deck>
      </Spectacle>
    );
  }
}