Osheep

时光不回头,当下最重要。

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

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

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

在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架。它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒。Have Fun !


1. Material-UI

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

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

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

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

项目地址:【传送门

2. React Desktop

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

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

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

项目地址:【传送门

3. Semantic-UI-React

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

由 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

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

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

引用官方文档介绍:

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

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

项目地址:【传送门

5. Blueprint

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

引用自官方文档:

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

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

项目地址:【传送门

6. React-Bootstrap

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

用 React 构建的 Bootstrap 3 组件

引用自官方文档:

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

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

项目地址:【传送门

7. React-Toolbox

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

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

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

项目地址:【传送门

8. Grommet

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

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

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

项目地址:【传送门

9. Fabric

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

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

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

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

项目地址:【传送门

10. React-md

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

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

点赞