由Facebook创建的React已经成为一个非常强大的JavaScript框架,它能使程序员的前端开发工作更容易。
如果你已工作于React.js一段时间了,那么你会赞同若干其他的库可以和React一起使用以获得最佳体验。
从经验来看,使用开源项目对于开发人员来说意义重大,而GitHub上提供了大量基于React的库,让人不知该如何选择。
尽管可以选择多个选项,但是将范围缩小到三两个框架和库也是极好的。因此,本文讨论了GitHub上的十大react库。所讨论的库按照其在各种代码仓库中的星星数量排序。
话不多说,让我们一起来看看吧。
1.MaterialUI
★版本0.20.0依赖性11
MaterialUI是通过使用React组件来实现Google材料设计的库。它能让Web开发、创建出色的用户界面以及开发单页面应用程序变得容易起来。
将MaterialUI用于服务器渲染时,开发人员必须为服务器和客户端使用相同的环境。
MaterialUI可以使用npm命令进行安装:
npminstallmaterial-ui
你可以从GitHub代码仓库和官方网站了解更多信息。
查看示例——由
abottega制作的MaterialUI风格动画复选框。2.AntDesign
★版本3.0.1依赖性42
AntDesign是一个基于React的库,用于为react应用程序添加可爱的设计。它专为设计桌面应用程序和提供令人愉快的开发体验而创建,以带来更好的用户体验。
虽然,这是一个来自中国的库。但是,志愿者已经正确地翻译了语言,这使得讲英语的开发者也可以很容易使用它。
你可以使用npm命令轻松安装AntDesign:
npminstallantd
AntDesign是一个非常流行的库,所以你可以从GitHub代码仓库或官方网站上找到很多信息。
请参阅CodePen上由DashBouquet(
dashbouquetdevelopment)制作的PenAnt-design。3.Storybook
16,★版本1.0.0依赖性12
借助Meteor和Firebase等框架可以使得后端开发更加容易。而ReactStorybook是为前端开发人员创建的效果相同的库。
通过提供它自己的UI开发环境,ReactStorybook允许你在应用程序之外构建和设计React应用程序的UI组件,这使得开发团队中的其他人员可以更轻松地在他们自己的项目中使用UI组件。
你可以使用npm命令轻松安装ReactStorybook:
npmi-g
storybook/clicdmy-react-appgetstorybook安装完成后,可以使用以下命令运行ReactStorybook:
npmrunstorybook
你可以从官方网站以及官方GitHub代码仓库中找到有关这个库的更多信息。
4.Gatsby
15,★版本1.9.依赖性51
Gatsby是一个建立在React.js框架之上的快速静态站点生成器。使用Gatsby,你可以将纯文本转换成超棒的网站,而无需花费大量的时间在代码上。
很多网站已经开始使用静态网站生成器来建设高质量的网站。使用Gatsby,生成的网站以后可以很容易地维护,并且允许更容易扩展web功能。
如果你作为开发人员已经花了充足的时间工作于React框架,那么与Gatsby合作会创造更好的开发体验。
你可以使用npm命令轻松安装Gatsby:
npminstallgatsby
它还附带了一个命令行工具,可以使用以下方法进行安装:
npminstall--globalgatsby-cli
更多关于这个库的信息可以在它的GitHub代码仓库和官方网站上找到。
5.Enzyme
11,★版本3.2.0依赖性11
Enzyme是一个基于React而构建的轻量级测试库,可以作为用于React的JavaScript测试实用程序。这也使得断言、操纵和遍历React组件输出的任务变得更容易。
它通过模仿jQuery的API进行DOM操作和遍历(例如查找、模拟等),并为不同类型的呈现(如shallow、mount和static)提供选项。
其他测试库如Mocha、Expect、Chai和Jasmine可以与Enzyme一起使用,而没有任何副作用。
Enzyme很容易使用和安装:
npminstallenzyme
更多关于这个伟大的库的信息可以在其GitHub代码仓库和官方网站上找到。
6.Blueprint
7,★版本1.34.0
Blueprint是一个基于UI的webReact工具包。它在为桌面应用程序构建复杂的Web界面和鼓励代码的可重用性方面非常高效。
这个库主要是为桌面应用程序构建的,但是,也可以用于为移动应用程序添加功能。它非常灵活,因此可以和其他JavaScript框架,例如Angular,Vue.js等等一起使用。
Blueprint可以与CSS、TypeScript和JavaScript一起使用。
我们可以使用npm命令轻松安装Blueprint:
npminstallblueprint
从GitHub代码仓库和官方网站