图片 12

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

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 !


1. Material-UI

图片 2

基于谷歌 Material Design 设计规范的 React 组件

此外,它还是 React 的第一个 UI
套件。Material-UI具备你所需要的所有组件(甚至更多),以及可配置性极高的预定义调色板和“,帮助你为应用程序定制相应的颜色主题

由于 Material-UI
过去的版本中存在一些性能问题,就我个人而言,不是很满意。但自3.0
版本
发布后的反馈来看,它在性能方面已有所改善。

项目地址:【传送门

2. React Desktop

图片 3

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

关于Electron
框架
,我相信你已经有所了解。如果你对跨平台桌面应用程序
UI
组件也感兴趣的话,那么React-Desktop绝对是你的“菜”。你可以使用它轻松获取用于
Mac OS 和 Windows 10 系统上相应的 UI 组件。

项目地址:【传送门

3. Semantic-UI-React

图片 4

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

就个人而言,我认为它是最好用的 React UI
框架。它是由官方基于Semantic-UI打造的
React 组件,它几乎涵盖了 Semantic-UI 上的所有组件,而且它还有一个易用的
Declarative API,以及用于 React 组件的 shorthand props,同时它能够做到
jQuery-free。

另外,我做了一个使用 React-Semantic-UI,Webpack
构建项目的新手示例,你也可以来看看。

项目地址:【传送门

4. Ant-design

图片 5

一套企业级 UI 设计语言和基于 React 实现的 Web 组件库的体验解决方案

引用官方文档介绍:

  • 用于 Web 应用程序的企业级 UI 设计语言。
  • 一套开箱即用的高品质 React 组件。
  • 由 TypeScript 构建,并具备完整定义类型。
  • 基于 npm + webpack + dva 前端开发工作流。

它支持浏览器、服务器端渲染和 Electron
环境,并具备丰富的组件,你还可以通过Create-react-app
来学习
。来看看Ant-design
demo
吧!

项目地址:【传送门

5. Blueprint

图片 6

引用自官方文档:

“它将为拥有复杂、数据密集的 Web
界面的桌面应用程序进行全面优化。如果你注重移动端的交互体验,并且正寻找移动优先的
UI 套件的话,它可能不适合你。”

Blueprint 是由 TypeScript
构建,并具备良好的使用文档。它包含了丰富(30+)的 React
基础组件,从按钮到表单控件、工具提示均有涉及。此外,它的每个组件都包含了
CSS 样式。并且,你还可以使用 Sass 和 Less 变量、优雅的调色板和两种尺寸的
300+ UI 图标等工具,来打造一款专属于你的组件和应用程序。

项目地址:【传送门

6. React-Bootstrap

图片 7

用 React 构建的 Bootstrap 3 组件

引用自官方文档:

React-Bootstrap是一个可重用的前端组件库。通过使用
Facebook 的 React.js 框架来获得 Twitter Bootstrap
的外观与体验,以及更清晰的代码。

简而言之,它是知名的 Bootstrap 组件的 React 实现。

项目地址:【传送门

7. React-Toolbox

图片 8

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

你听说过CSS Modules吗?
React-Toolbox便依赖于它。React-Toolbox
是一个具有 30+
开箱即用组件的高度可定制框架。从此,你可以不必使用类似Purify-CSS这样的工具,仅通过所需的
CSS 便可以进行项目的开发。

项目地址:【传送门

8. Grommet

图片 9

用于企业应用的先进的 UX 框架

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

项目地址:【传送门

9. Fabric

图片 10

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

在过去的几年里,微软公司支持并创建了许多开源项目,例如 Angular
2、TypeScript、VS Code(基于
Electron)以及Fabric

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

项目地址:【传送门

10. React-md

图片 11

这是另一个基于谷歌 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

1 赞 2 收藏
评论

图片 12