个好玩的

10 个打造 React.js App 的最佳 UI 框架

2017/05/26 · 基本功技术 ·
React,
UI

原文出处: Vladimir
Metnew   译文出处:IT程序狮   

亚洲必赢官网 1

10 个打造 React.js App 的最佳 UI 框架

在本文中,大家将享用部分助你制作 React.js App 最佳的 UI
框架。它们有着你所急需的骨干 React 组件,以及易用的
API,同时,在外观和感受上也卓殊棒。Have Fun !


亚洲必赢官网 2

 

2017 年 3 月:15 个有意思的 JS 和 CSS 库

1. Material-UI

亚洲必赢官网 3

依照谷歌 Material Design 设计规范的 React 组件

别的,它仍旧 React 的第二个 UI
套件。Material-UI持有你所急需的保有组件(甚至越多),以及可配置性极高的预约义调色板和“,援救你为应用程序定制相应的颜色主旨。

个好玩的。由于 Material-UI
过去的本子中存在部分特性难点,就自我个人而言,不是很乐意。但自3.0
版本发布后的上报来看,它在性质方面已有所改良。

项目地址:【传送门】

10 个打造 React.js App 的最佳 UI 框架

亚洲必赢官网 4

咱俩创设 Tutorialzine 的任务是让你马上的刺探 Web
开发中前卫、最酷的可行性。所以,每个月我们都会发布部分细密选取的理想 Web
开发资源,同时我们也相信,它们值得您的关爱。

2. React Desktop

亚洲必赢官网 5

专为 MacOS Sierra 和 Windows 10 提供的 React UI 组件

关于Electron
框架,我深信您早就持有通晓。要是你对跨平台桌面应用程序
UI
组件也感兴趣的话,那么React-Desktop绝对是你的“菜”。你可以行使它轻松到手用于
Mac OS 和 Windows 10 系统上相应的 UI 组件。

体系地址:【传送门】

在本文中,大家将享用部分助你制作 React.js App 最佳的 UI
框架。它们具有你所必要的基本 React 组件,以及易用的
API,同时,在外观和感受上也分外棒。Have Fun !

10 个打造 React.js App 的最佳 UI 框架


3. Semantic-UI-React

亚洲必赢官网 6

由 Semantic-UI 官方出品的 React UI 组件

就个人而言,我以为它是最好用的 React UI
框架。它是由官方基于Semantic-UI制作的
React 组件,它大致涵盖了 Semantic-UI 上的具备组件,而且它还有一个易用的
Declarative API,以及用于 React 组件的 shorthand props,同时它亦可成功
jQuery-free。

其余,我做了一个施用 React-Semantic-UI,Webpack
营造项目标新手示例,你也足以来探视。

品种地址:【传送门】


在本文中,我们将分享部分助你制作 React.js App 最佳的 UI
框架。它们具有你所急需的着力 React 组件,以及易用的
API,同时,在外观和体会上也分外棒。Have Fun !

1. Propeller

Propeller

Propeller
是基于Bootstrap与谷歌(谷歌(Google))的Material
Design的 CSS
组件框架。它富含了 25 个响应式组件,同时具备一流的 Material Design
动画。你可以将它当作 Bootstrap
的焦点,或者完全的框架以及独立组件举行应用。

品种地址:【传送门】

4. Ant-design

亚洲必赢官网 7

一套集团级 UI 设计语言和按照 React 落成的 Web 组件库的体会解决方案

引用官方文档介绍:

  • 用以 Web 应用程序的店堂级 UI 设计语言。
  • 一套开箱即用的高格调 React 组件。
  • 由 TypeScript 创设,并富有完整定义类型。
  • 按照 npm + webpack + dva 前端开发工作流。

它辅助浏览器、服务器端渲染和 Electron
环境,并装有丰硕的机件,你还足以经过Create-react-app
来学习。来看看Ant-design
demo吧!

品类地址:【传送门】

1. Material-UI

亚洲必赢官网 8

按照谷歌(Google) Material Design 设计规范的 React 组件

其它,它依然 React 的第三个 UI
套件。Material-UI不无你所急需的所有组件(甚至越来越多),以及可配置性极高的预订义调色板和<MuiThemeProvider>,支持你为应用程序定制相应的颜色主旨。

由于 Material-UI
过去的本子中存在部分特性难点,就自我个人而言,不是很满意。但自3.0
版本公布后的举报来看,它在性质方面已有所改正。

项目地址:【传送门】

  1. [React

    Desktop]()

亚洲必赢官网 9

专为 MacOS Sierra 和 Windows 10 提供的 React UI 组件

关于Electron
框架,我深信不疑你早已持有驾驭。要是您对跨平台桌面应用程序
UI
组件也感兴趣的话,那么React-Desktop相对是您的“菜”。你可以选择它轻松收获用于
Mac OS 和 Windows 10 系统上相应的 UI 组件。

项目地址:【传送门】


1. BaguetteBox

BaguetteBox

BaguetteBox 是一个选用纯 JavaScript
编写的库,它可用来创建响应式灯箱画廊效果。它是轻量级的,可自定义设置,并协理移动端,同时它还自带了相应的
CSS3 过渡。

大家近年来应用这些库制作了4 个免费的 Bootstrap Gallery
模板包,我想大家曾经喜欢上它了。

品类地址:【传送门】

5. Blueprint

亚洲必赢官网 10

引用自官方文档:

“它将为拥有卷帙浩繁、数据密集的 Web
界面的桌面应用程序进行完善优化。借使您珍重移动端的交互体验,并且正探寻移动优先的
UI 套件的话,它或许不切合你。”

Blueprint 是由 TypeScript
创设,并有着卓越的利用文档。它包罗了增进(30+)的 React
基础零部件,从按钮到表单控件、工具提醒均有提到。其它,它的各样组件都包涵了
CSS 样式。并且,你还足以动用 Sass 和 Less 变量、优雅的调色板和三种尺寸的
300+ UI 图标等工具,来创制一款专属于你的机件和应用程序。

品类地址:【传送门】

1. Semantic-UI-React

亚洲必赢官网 11

由 Semantic-UI 官方出品的 React UI 组件

就个人而言,我认为它是最好用的 React UI
框架。它是由官方基于Semantic-UI制作的
React 组件,它大概涵盖了 Semantic-UI 上的富有组件,而且它还有一个易用的
Declarative API,以及用于 React 组件的 shorthand props,同时它亦可成功
jQuery-free。

其它,我做了一个应用 React-Semantic-UI,Webpack
打造项目标新手示例,你也得以来看望。

类型地址:【传送门】

1. Material-UI

亚洲必赢官网 12

依照谷歌 Material Design 设计规范的 React 组件

别的,它仍旧 React 的首先个 UI
套件。Material-UI 拥有你所急需的有着组件(甚至越多),以及可配置性极高的预约义调色板和<MuiThemeProvider>,帮助你为应用程序定制相应的颜色宗旨。

由于 Material-UI
过去的版本中设有一些特性难点,就自身个人而言,不是很惬意。但自3.0
版本布告后的举报来看,它在质量方面已有所革新。

花色地址:

1. Whitestorm

Whitestorm

Whitestorm
是基于Three.js引擎用来支付
3D Web APPS 和玩耍的框架。它为众多周边的 Three.js
义务提供了简易的包装,使搭建环境、创立对象、添加物件等操作更为的概括。官方也提供了以身作则项目,以及与
React
集成的工具,便于你急迅的开始工作。

花色地址:【传送门】

6. React-Bootstrap

亚洲必赢官网 13

用 React 构建的 Bootstrap 3 组件

引用自官方文档:

React-Bootstrap是一个可选择的前端组件库。通过接纳Facebook 的 React.js 框架来获取 推文(Tweet) Bootstrap
的外观与经验,以及更明显的代码。

简短,它是名牌的 Bootstrap 组件的 React 完毕。

项目地址:【传送门】

1. Ant-design

亚洲必赢官网 14

一套集团级 UI 设计语言和依照 React 落成的 Web 组件库的体会解决方案

引用官方文档介绍:

  • 用来 Web 应用程序的店堂级 UI 设计语言。
  • 一套开箱即用的高格调 React 组件。
  • 由 TypeScript 创设,并具备完整定义类型。
  • 按照 npm + webpack + dva 前端开发工作流。

它辅助浏览器、服务器端渲染和 Electron
环境,并兼有丰硕的机件,你还能通过Create-react-app
来学习。来看看Ant-design
demo吧!

系列地址:【传送门】

2. React Desktop

亚洲必赢官网 15

专为 MacOS Sierra 和 Windows 10 提供的 React UI 组件

关于 Electron
框架,我信任你已经怀有驾驭。借使您对跨平台桌面应用程序
UI
组件也感兴趣的话,那么 React-Desktop 纯属是您的“菜”。你可以动用它轻松获取用于
Mac OS 和 Windows 10 系统上相应的 UI 组件。

花色地址:

1. Animatelo

Animatelo

Animatelo
是风靡的Animate.css库的接口,它采用Web
Animation
API代替了
CSS 过渡,并将 Animate.css 库中的所有机能再次出现了出去。但它的 API 是基于
Javascript 方法的,而不是 CSS 类。同时,它也是轻量级的库,不依靠
jQuery,但在一部分老版本的浏览器上或者要选择 polyfill。

品类地址:【传送门】

7. React-Toolbox

亚洲必赢官网 16

一套基于谷歌 Material Design 规范和 CSS 模块的 React 组件

您听说过CSS Modules吗?
React-Toolbox便借助于它。React-Toolbox
是一个具备 30+
开箱即用组件的可观可定制框架。从此,你可以不必选拔类似Purify-CSS那样的工具,仅经过所需的
CSS 便足以举行项目的付出。

品种地址:【传送门】

1. Blueprint

亚洲必赢官网 17

引用自官方文档:

“它将为所有卷帙浩繁、数据密集的 Web
界面的桌面应用程序举行宏观优化。即使你着重移动端的交互体验,并且正探寻移动优先的
UI 套件的话,它恐怕不符合你。”

Blueprint 是由 TypeScript
打造,并保有得天独厚的运用文档。它包涵了增进(30+)的 React
基础零部件,从按钮到表单控件、工具提醒均有关系。别的,它的种种组件都饱含了
CSS 样式。并且,你还是能利用 Sass 和 Less 变量、优雅的调色板和二种尺寸的
300+ UI 图标等工具,来制作一款专属于你的机件和应用程序。

花色地址:【传送门】

3. Semantic-UI-React

亚洲必赢官网 18

由 Semantic-UI 官方出品的 React UI 组件

就个人而言,我认为它是最好用的 React UI
框架。它是由官方基于 Semantic-UI 制作的
React 组件,它大概涵盖了 Semantic-UI 上的有着组件,而且它还有一个易用的
Declarative API,以及用于 React 组件的 shorthand props,同时它可以不辱任务jQuery-free。

别的,我做了一个运用 React-Semantic-UI,Webpack
创设项目的新手示例,你也足以来看望。

品类地址:

1. FuseBox

FuseBox

FuseBox 是一个用于 JavaScript 和 CSS 的包装程序,并具有用于
TypeScript,Sass
等的增大组件。它的安顿意见是简单与特性,也为Webpack提供了卓有功效的替代解决方案。

为了让您神速开首,官方提供了Angular 2 +
TypeScript,React
+
Babel,Vue.js,Electron和其它版本的立即示例教程。

项目地址:【传送门】

8. Grommet

亚洲必赢官网 19

用以公司应用的进步的 UX 框架

Grommet 不仅仅是 UX
框架,它还提供了从理论到应用程序开发所需的享有引导、组件以及设计资源。例如,它提供了
React 编写的拉长的 UX 组件、自带的 grommet-cli
、入门学习指南、预设模版、卓绝的接纳文档等资源。

项目地址:【传送门】

1. React-Bootstrap

亚洲必赢官网 20

用 React 构建的 Bootstrap 3 组件

引用自官方文档:

React-Bootstrap是一个可拔取的前端组件库。通过利用
Facebook 的 React.js 框架来取得 推文(Tweet) Bootstrap
的外观与感受,以及更清晰的代码。

概括,它是资深的 Bootstrap 组件的 React 落成。

类型地址:【传送门】

4. Ant-design

亚洲必赢官网 21

一套集团级 UI 设计语言和基于 React 完毕的 Web 组件库的感受解决方案

引用官方文档介绍:

  • 用于 Web 应用程序的公司级 UI 设计语言。
  • 一套开箱即用的高格调 React 组件。
  • 由 TypeScript 创设,并负有完整定义类型。
  • 基于 npm + webpack + dva 前端开发工作流。

它援救浏览器、服务器端渲染和 Electron
环境,并兼有丰硕的组件,你还足以因此Create-react-app
来学习。来看看 Ant-design
demo 吧!

品种地址:

1. Yargs

Yargs

Yargs 是使用 Node.js
创设成效齐全的命令行应用程序的框架。你能够轻松的布署命令、解析四个参数以及安装高速操作办法。甚至,它还能自动生成帮衬菜单。

品类地址:【传送门】

9. Fabric

亚洲必赢官网 22

用于为 Office 和 Office 365 打造用户体验的 React 组件

在过去的几年里,微软集团协理并成立了重重开源项目,例如 Angular
2、TypeScript、VS Code(基于
Electron)以及Fabric。

Fabric是利用 TypeScript 编写的官方
Office
库,它拥有“入门”指南、博客、法定调色板和字体以及项目所需的亚洲必赢官网 ,具有组件。

花色地址:【传送门】

1. React-Toolbox

亚洲必赢官网 23

一套基于谷歌(Google) Material Design 规范和 CSS 模块的 React 组件

您听说过CSS
Modules吗?
React-Toolbox便借助于它。React-Toolbox
是一个富有 30+
开箱即用组件的莫大可定制框架。从此,你可以不要选择类似Purify-CSS那般的工具,仅透过所需的
CSS 便可以展开项目标支付。

类型地址:【传送门】

5. Blueprint

亚洲必赢官网 24

引用自官方文档:

“它将为保有卷帙浩繁、数据密集的 Web
界面的桌面应用程序举行完美优化。如果你器重移动端的交互体验,并且正寻找移动优先的
UI 套件的话,它可能不合乎你。”

Blueprint 是由 TypeScript
创设,并拥有突出的选择文档。它含有了丰盛(30+)的 React
基础零部件,从按钮到表单控件、工具提示均有涉嫌。其余,它的每个组件都富含了
CSS 样式。并且,你还足以选拔 Sass 和 Less 变量、优雅的调色板和二种尺寸的
300+ UI 图标等工具,来制作一款专属于您的零件和应用程序。

类型地址:

1. WebGradients

WebGradients

WebGradients 收集了一文山会海可以的色彩渐变,你可以将它们轻松的利用在其余HTML
页面上。你可以由此快速预览,或是全屏查看可用的渐变色,然后仅要求一键复制
CSS 属性,即可将它们拔取到你的品种中去。

项目地址:【传送门】

10. React-md

亚洲必赢官网 25

那是另一个基于谷歌(Google) Material Design
设计规范的库。React-md怀有众多大规模的
Material
组件,你可以轻松地依据自己的急需举办定制。同时,它还装有可以的利用文档,以及高速入门指南。

但是,如今以此库仅有一个人展开维护和开发。 假如你想为开源项目做些贡献,或许 React-md 是一个没错的选项。

项目地址:【传送门】


谢谢你的开卷。若你有着收获,欢迎点赞与分享。

注:

  1. 正文版权归原小编所有,仅用于学习与沟通;
  2. 如需转载译文,烦请按江湖表明出处音信,谢谢!

英文原稿:Best UI Frameworks for your new React.js
App
作者:Vladimir Metnew
译者:IT程序狮
译文地址:

1 赞 2 收藏
评论

亚洲必赢官网 26

1. Grommet

亚洲必赢官网 27

用以集团应用的提高的 UX 框架

Grommet 不仅仅是 UX
框架,它还提供了从理论到应用程序开发所需的兼具率领、组件以及设计资源。例如,它提供了
React 编写的增加的 UX 组件、自带的 grommet-cli
、入门学习指南、预设模版、卓越的利用文档等资源。

品种地址:【传送门】

6. React-Bootstrap

亚洲必赢官网 28

用 React 构建的 Bootstrap 3 组件

引用自官方文档:

React-Bootstrap 是一个可选择的前端组件库。通过应用
Facebook 的 React.js 框架来获取 推特 Bootstrap
的外观与体会,以及更显然的代码。

大致,它是妇孺皆知的 Bootstrap 组件的 React 完毕。

项目地址:

1. Sticky-Kit

Sticky-Kit

Sticky-kit 是一个 jQuery
插件,它可以将元素附加到页面上的某部区域,并使元素保持其边界。那样随着页面的滚动,在父容器中的特定元素将会维持始终可见。

花色地址:【传送门】

1. Fabric

亚洲必赢官网 29

用来为 Office 和 Office 365 构建用户体验的 React 组件

在过去的几年里,微软集团协助并创办了多如牛毛开源项目,例如 Angular
2、TypeScript、VS Code(基于
Electron)以及Fabric。

Fabric是采取TypeScript 编写的法定 Office
库,它富有“入门”指南、博客、合法调色板和字体以及项目所需的享有组件。

品种地址:【传送门】

7. React-Toolbox

亚洲必赢官网 30

一套基于谷歌 Material Design 规范和 CSS 模块的 React 组件

你听说过 CSS
Modules 吗? React-Toolbox 便借助于它。React-Toolbox
是一个持有 30+
开箱即用组件的中度可定制框架。从此,你可以不用采用类似 Purify-CSS 如此那般的工具,仅经过所需的
CSS 便得以开展项目的开销。

序列地址:

1. ScrollDir

ScrollDir

ScrollDir 是一款超轻量的,不借助于 JavaScript 的库,用于监测 CSS
中的滚动方向。它可以考察滚动条的位移方向,并按照你挑选的元一贯切换上/下方向的数目属性。同时,它忽略了小的轮转动作,力求创设一个稳定的体验。

品类地址:【传送门】

1. React-md

亚洲必赢官网 31

这是另一个基于谷歌(谷歌(Google)) Material Design
设计规范的库。React-md有着众多普遍的
Material
组件,你可以轻松地依据自己的需求开展定制。同时,它还兼具出色的选用文档,以及快捷入门指南。

然则,近期这几个库仅有一个人进行爱慕和开发。 假若您想为开源项目做些进献,或许 React-md 是一个正确的取舍。

品类地址:【传送门】


感谢您的翻阅。若您抱有收获,欢迎点赞与享受。

注:

  1. 正文版权归原作者所有,仅用于学习与沟通;
  2. 如需转发译文,烦请按江湖注脚出处信息,谢谢!

英文原文:Best UI Frameworks for your new React.js
App
作者:Vladimir Metnew
译者:IT程序狮
译文地址:http://www.jianshu.com/p/bba3662fa8ab

8. Grommet

亚洲必赢官网 32

用来集团应用的进取的 UX 框架

Grommet 不仅仅是 UX
框架,它还提供了从理论到应用程序开发所需的持有引导、组件以及设计资源。例如,它提供了
React 编写的增加的 UX 组件、自带的 grommet-cli
、入门学习指南、预设模版、卓越的应用文档等资源。

种类地址:

1. Svgo

Svgo

那是一个用于优化 SVG 文件的 Node.js 工具,它可以去除那多少个无用的 SVG
音信,例如编辑器元新闻、注释、隐藏元素以及不影响渲染向量的别的质量。同时,它按照插件格局构建,所以你可以随意的选取想要删除的内容。

花色地址:【传送门】

9. Fabric

亚洲必赢官网 33

用来为 Office 和 Office 365 打造用户体验的 React 组件

在过去的几年里,微软公司帮助并创造了不少开源项目,例如 Angular
2、TypeScript、VS Code(基于
Electron)以及 Fabric。

Fabric 是拔取 TypeScript 编写的合法
Office
库,它具有“入门”指南、博客、官方调色板和字体以及项目所需的持有组件。

项目地址:

1. Store.js

Store.js

Store.js 是用于地方存储的跨浏览器解决方案。近年来,它的 2.0
版本也已公布,在创新了好多功力的同时,扩充了一些外加的功力,例如数组/对象操作以及改革了过期选项。

在上一期的每月 Web
开发资源列表中,大家为我们大饱眼福了一个名为localForage的库。它提供了许多与
Store.js 类似的功用,但是所有更多的 localStorage
类语法。喜欢的话,不妨来看看。

品类地址:【传送门】

10. React-md

亚洲必赢官网 34

这是另一个基于谷歌(谷歌) Material Design
设计规范的库。React-md 有着众多普遍的
Material
组件,你可以轻松地依据自己的急需开展定制。同时,它还存有出色的动用文档,以及高效入门指南。

但是,近期那些库仅有一个人进行爱慕和开发。 假使您想为开源项目做些贡献,或许 React-md 是一个没错的取舍。

种类地址:


感谢你的阅读。

上学进程中际遇什么样难点要么想博得学习资源的话,欢迎参加学习沟通群
343599877,我们联合学前端!

若你拥有收获,欢迎点赞与分享。

 

 

1. Snarkdown

Snarkdown

Snarkdown 是一个利用 JavaScript 编写的超不难的 马克down
解析器。诚然,它不是最复杂或效益最全的解析器,但它可能是最不难落成的。

Snarkdown 只有 1kb 大小,且唯有一种艺术,使其变为速成项目标八面驶风拔取。

品种地址:【传送门】

1. Unfetch

Unfetch

Fetch
API是
XMLHttpRequest
接口的当代重制,它为开发人员提供了一种更好的拍卖异步请求的格局。尽管,它协理大部分现代浏览器,可是fetch()方法在
IE 中依旧不可用。

Unfetch 的面世便解决了fetch()艺术在 IE 中不可用的难点,它提供了一体化
fetch API 的子集,且 fetch polyfill 仅有 500 bytes。

类型地址:【传送门】

1. Scrollanim

Scrollanim

Scrollanim 是用来滚动动画的 Vanilla JavaScript
库。由于放置的Animate.css依傍关系,Scrollanim
提供了大气的自定义选项,单独的 HTML 和 JavaScript API 以及超越 50
种流畅的卡通片效果。

花色地址:【传送门】

1. Neurojs

Neurojs

Neurojs 是一款用于在浏览器中展开深度学习 JavaScript
框架,它具有可以经过增强学习陶冶的全栈神经网络。

譬如说,该类型就展现了一个很酷的Demo,其中自动驾驶小车在
2D 环境中学习导航。

花色地址:【传送门】


谢谢您的翻阅。

注:

  1. 正文版权归原小编所有,仅用于学习与交换。
  2. 如需转发译文,烦请按江湖注解出处音信,谢谢!

英文原文:15 Interesting JavaScript and CSS Libraries for March
2017
作者:Danny Markov
译者:IT程序狮
译文地址:http://www.jianshu.com/p/879be1dcbec6

网站地图xml地图