文档章节

构建 React.js 应用的十佳 UI 框架,都在这了!

编辑部的故事
 编辑部的故事
发布于 2017/05/11 17:27
字数 1030
阅读 12638
收藏 359

构建你的下一个 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 可能是一个不错的选择。

编译自:https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651

本文由开源中国整理,转载必须在正文中标注出处并保留原文链接。

© 著作权归作者所有

编辑部的故事

编辑部的故事

粉丝 1387
博文 259
码字总数 488100
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(17)

目少
这些前端组件能否交叉使用 一个项目中使用多做组件?
t
tianyaduan
使用以上框架构建前端应用时,还可以使用支持React.js的前端工具,像Wijmo这样的
全体下线
标点符号啊,完全都读不通
上水若寒
上水若寒
Mark
kubei
kubei
很有受益 匪浅
Tom-Lin
Tom-Lin
Material-UI 在手机上的 性能 貌似 很不好。不知现在 怎么样了
notreami
notreami

引用来自“SwhGo_oN”的评论

VUE
整点杀手级应用呗。
c
crackHu

引用来自“万岁爷”的评论

没antd,不信服。
有啊
SwhGo_oN
SwhGo_oN
VUE
swpcsoft
swpcsoft
车轮,车轮,都是重复的车轮。
干货分享——Javascript 的开源功能插件和框架集锦

一、MV* 框架和库 1、 Angular JS Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 web 应用的架构,无需进行手工 DOM ...

zoujiajun33
2016/12/19
7
0
程序员市场需求调查:React.js获前五!

  【IT168 资讯】Upwork的最新技能指数调查显示,与去年同期相比,排名前十的增长最快的自由职业技能列表(包括区块链,比特币,React.js,深度学习等)跃升超过200%。Swift,AngularJS和机器...

it168网站
2017/11/13
0
0
全球开发者调查:JavaScript 成最爱,还最喜欢用 React

点击上方“CSDN”,选择“置顶公众号” 关键时刻,第一时间送达! 根据最新的 State of the Octoverse 2017 报告,在现有的 337 种开发语言中,JavaScript 仍然是 GitHubbers 的最爱。 Java...

csdnnews
2017/12/16
0
0
MVC时代的终结,接下来的函数式响应型编程会成为未来的霸主

     React.js,Elm,Cycle.js和其他UI框架引入了一种构建用户界面的新方法。通过将函数式响应型编程的原理应用于UI开发中,他们甚至改变了我们对用户界面的看法。在任何时候,这些方法都...

webstack前端栈
2017/12/25
0
0
React Native 0.57.0-rc.2 发布,原生应用框架

React Native 0.57.0-rc.2 发布了,React Native 可以基于目前大热的开源 JavaScript 库 React.js 来开发 iOS 和 Android 原生 App。 React Native比起标准Web开发或原生开发能够带来的三大好...

h4cd
2018/08/23
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

php 遇到 No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1...

chenhongjiang
今天
5
0
MySQL 基础

一、常用命令 在命令行中,配置好环境变量后,通过cmd可以直接进入mysql命令行模式,同时列举几种常用命令 # 进入mysql数据库,密码可以先不写,打完-p后再输入,防止被别人看到mysql -u账...

华山猛男
今天
6
0
简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
今天
5
0
用脚本将本地照片库批量导入到Day One中

因为目前iCloud 空间已经不足,其中95%都是照片,之前入手了DayOne,且空间没有限制,订阅费一年也不少,再加上DayOne作为一款日记App 也比较有名,功能方面最大的就是地理视图与照片视图,尤...

在山的那边
昨天
19
0
jupyter部署安装

python373 -m ipykernel install --name python373 ipython kernelspec list sc create myjupyterservice binpath="D:\apply\Python373\Scripts\jupyter-notebook --config=V:/my_work/jupyt......

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部