构建React.js应用的十佳UI框架,都在这了!
构建你的下一个 React.js APP,有这些优秀的 UI 框架就够了。其中Material-UI 包含你需要的所有组件(甚至更多)。 Material-UI 预定义的调色板和
- 作者:OSC-王练来源:开源中国|2017-05-12 20:10
技术沙龙 | 4月21日多位区块链专家进行区块链技术应用场景解读!
构建你的下一个 React.js APP,有这些优秀的 UI 框架就够了。
1、Material-UI
一套实现 Google Material Design 的 React 组件
同时,它也是 React 的第一批 UI 工具套件之一。Material-UI 包含你需要的所有组件(甚至更多)。 Material-UI 预定义的调色板和 <MuiThemeProvider> 可配置性极高,允许为 APP 自定义颜色主题。
Material-UI 之前的版本个人认为有一些性能问题,但从 3.0 版本的发布来看,性能有所改善。
2、React Desktop
MacOS Sierra 和 Windows 10 的 React UI 组件。
如果你对跨平台桌面应用程序的 UI 组件感兴趣,那么 React-Desktop 就是为你而设。你可以在上面找到 Mac OS 和 Windows 10 的均可用 UI 组件。
React-Desktop 可与 NW.js 和 Electron.js 完美结合,也可用于任何 JavaScript 驱动的项目。
3、Semantic-UI-React
Semantic-UI 的官方 React 组件
就个人而言,我认为这是 React 最好的 UI 框架。
Semantic-UI-React 几乎拥有 Semantic-UI 中所有有用的组件,同时也有一个非常好的 Declarative API ,和用于 React 组件的 shorthand props ,并且 jQuery-Free。
4、Ant-design
一套企业级的前端设计语言和基于 React 的前端框架实现。
官方文档介绍:
- 一种用于 Web 应用的企业级 UI 设计语言
- 一套开箱即用的高质量 React 组件
- 使用 TypeScript 构建,提供完整的类型定义文件
- 基于 npm + webpack + babel 的工作流
它支持所有现代浏览器(IE9 以上),支持服务端渲染和 Electron 环境,拥有许多组件。
Ant-design demo
5、Blueprint
针对构建复杂、数据密集的 Web 界面的桌面应用进行了最优化。如果你重度依赖移动互动,并且正在寻找 mobile-first 的 UI 工具包,它可能不适合你。
Blueprint 同样是用 TypeScript 编写的,有良好的文档。
它包含 30+ 的 React 组件,涵盖几乎所有的通用界面元素,从按钮到表单控件到工具提示等等。 它还包括每个组件的 CSS 样式和使用 Sass 和 Less 变量设计自己的组件和应用的工具,以及一个优雅的调色板和两种尺寸的 300 多个 UI 图标,旨在让你专注于构建产品。
6、React-Bootstrap
React 构建的 Bootstrap 3 组件。
React-Bootstrap 是一个可重复使用的前端组件库。你可以通过 Facebook 的 React.js 框架获得 Twitter Bootstrap 的体验,而且有更为清晰的代码。
简而言之,这是老牌的 Bootstrap 组件,用 React 重新编写。
7、React-Toolbox
一组使用 CSS 模块实现 Google Material Design 的 React 组件。
你是否听说过 CSS Modules? React-Toolbox 依赖于它。它允许你只使用所需的 CSS ,而不用使用像 Purify-CSS 这样的工具。除此之外,React-Toolbox 是具有30 +组件,开箱即用的,高度可定制的框架。
8、Grommet
用于企业应用最先进的 UX 框架。
Grommet 不仅仅是一个 UX 框架,它所包含的东西要比单纯的 UX 框架多得多。
Grommet = 用 React 编写的一堆 UX 组件和工具 + 自有的 grommet-cli +“入门” 指南 + 预建模板 + 良好的文档+ 与 Sketch 集成 。
9、Fabric
用于构建与 Office 和 Office 365 界面相类似的 Web 应用的 React 组件。
在过去几年中,微软支持并构建了许多开源项目 - Angular 2、TypeScript、VS Code 和 Fabric。
Fabric 是用 TypeScript 编写的官方 Office 库,包含“入门”指南、博客、官方调色板和字体,以及构建项目所需的所有组件。
10、React-md
又一个实现 Material Design 的库。React-md 可以轻松地根据自己的需要进行定制,拥有良好的文档和快速上手的“入门”指南,以及许多常见的 Material 组件。
不过现状是,这个库只有一个人在进行维护和开发。如果你想为开源项目做贡献,React-md 可能是一个不错的选择。
【编辑推荐】
点赞 0
- 大家都在看
- 猜你喜欢
编辑推荐
- 24H热文
- 一周话题
- 本月最赞
- 坐在马桶上看算法:快速排序评测:四款面向数据可视化的超酷JavaScript工具成人网站YouPorn使用Redis之经验谈Java数组声明、创建、初始化Java 中常用缓存Cache机制的实现深入理解Java对象序列化5个强大的Java分布式缓存框架推荐Java程序员新手老手都离不开八大开发工具
- 评测:四款面向数据可视化的超酷JavaScript工具坐在马桶上看算法:快速排序成人网站YouPorn使用Redis之经验谈Java数组声明、创建、初始化5个强大的Java分布式缓存框架推荐Java 中常用缓存Cache机制的实现深入理解Java对象序列化放弃Dubbo,选择最流行的Spring Cloud微服务架构实践与经验总结
- 评测:四款面向数据可视化的超酷JavaScript工具成人网站YouPorn使用Redis之经验谈坐在马桶上看算法:快速排序Java数组声明、创建、初始化5个强大的Java分布式缓存框架推荐放弃Dubbo,选择最流行的Spring Cloud微服务架构实践与经验总结Java 中常用缓存Cache机制的实现Java程序员新手老手都离不开八大开发工具
视频课程+更多
-
Swift全面深入详解视频课程
讲师:张荣超157553人学习过
-
2018年软考-信息系统项目管理师-基础知识(上)
讲师:小任老师297250人学习过
-
跟上Java8 Lambda表达式实战视频教程
讲师:刘宗泽43219人学习过
- 精选博文
- 论坛热帖
- 下载排行
- keepalived+nginx负载均衡反向代理Android 音视频深入 十九 使用ijkplAzure Linux 虚机图像化配置之四:配从零开始创建自己的区块链应用(JAVA51CTO博客2.0造星计划粉丝大奖赛参赛
- 34岁就要被清退,工程师的路在何方?茶碗的南下实录(已更新至2018年2月4吐槽,普通运维的生存倒计时...一个 Python 下发送邮件的库京东Java实习生面经
- 在Windows上搭建Android的JAVA开发环LinuxCBT CentOS 6 Edition_30.part1java教程快速2D绘制RazorGDIPainter源码LiteBlog(MVC)博客 v1.33源码
读 书 +更多
Visual C# 2005从入门到精通
Microsoft Visual C#功能强大、使用简单。本书全面介绍了如何利用Visual Studio2005和NET Framework来进行C#编程。作者将C#的各种特性娓娓...
-
订阅51CTO邮刊
点击这里查看样刊