由 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 操作和遍历 (例如查找模拟等), 并为不同类型的呈现(如 shallowmount 和 static) 提供选项
其他测试库如 MochaExpectChai 和 Jasmine 可以与 Enzyme 一起使用, 而没有任何副作用
Enzyme 很容易使用和安装:
npm install enzyme
更多关于这个伟大的库的信息可以在其 GitHub 代码仓库和官方网站上找到
- Blueprint
- ,762
版本 1.34.0
Blueprint 是一个基于 UI 的 web React 工具包它在为桌面应用程序构建复杂的 Web 界面和鼓励代码的可重用性方面非常高效
这个库主要是为桌面应用程序构建的, 但是, 也可以用于为移动应用程序添加功能它非常灵活, 因此可以和其他 JavaScript 框架, 例如 Angular,vue.js 等等一起使用
Blueprint 可以与 CSSTypeScript 和 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.js
- import 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>
- );
- }
- }
- 8.Elemental UI
- 3,848
版本 0.6.1
依赖性 2
Elemental UI 是一个非常灵活和高效的 UI 框架, 用于构建设计超赞的 web 应用程序
这个框架与 Material UI 框架非常相似, 但是更轻巧这是一个灵活和美丽的 React CSS UI 框架它被设计为从 npm 安装, 并通过 Browserify 或 Webpack 构建到你的项目中
你可以使用以下命令轻松安装 Elemental UI:
npm install elemental
来自 GitHub 代码仓库和官方网站的更多信息
9.Grommet
2,651
版本 2.0.0-alpha.5
依赖性 8
Grommet 是一个基于 React 的库, 用于改善 web 用户的体验据说, 这是用于企业 app 最高级的 UX 框架
Grommet 是一个非常灵活的库, 它具有用于 DashboardsLoginSearchMeters 等的大型组件通过属性配置增强了这种灵活性
借助 Grommet 附带的开箱即用组件, 你可以创建引人入胜和可重复使用的用户界面元素, 为用户提供在使用 Web 应用程序时的绝佳体验
Grommet 组件是可访问和跨浏览器兼容的, 也支持主题定制
可以使用 npm 来安装 Grommet:
npm install -g grommet
来自 GitHub 代码仓库和官方网站的更多信息
启动的最快捷方式是访问 Hello World 页面
在 CodePen 上查看由 Grommet UX(@grommet)制作的 Pen Hello World
10.Mozaik
2,294
版本 1.4.4
依赖性 31
Mozaik 是一个伟大的库, 用于为 web 应用程序创建可爱的仪表板
它自带很棒的自定义选项, 因为它提供了一个响应式的布局这意味着它可以在所有平台上运行, 无论是在大屏幕上还是在智能手机上
Mozaik 有很多主题可供开发人员用来创建个性化主题它允许网格定位, 优化的后端通信, 并且还可以在需要时使用多个仪表板
来自 GitHub 代码仓库和官方网站的更多信息
总结
好了, 10 个顶尖的 React 库到这里就完结了上面讨论的库在执行任务时非常高效这些库可用于:
设计出色的用户界面
创造迷人的用户体验
测试 JavaScript 和 React 代码
生成静态网站
这些库中的每一个都利用了 React.js 框架的特性和组件, 为开发过程提供了更轻松的体验
来源: http://www.codeceo.com/article/10-top-react-libs-on-github.html