由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> ); } }
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是一个非常灵活的库,它具有用于Dashboards、Login、Search、Meters等的大型组件。通过属性配置增强了这种灵活性。
借助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
英文原文:Top 10 React Libraries on GitHub to Follow
翻译作者:码农网 – 小峰
[ 转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]