文档章节

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

编辑部的故事
 编辑部的故事
发布于 2017/05/11 17:27
字数 1030
阅读 2.7W
收藏 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

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

编辑部的故事

编辑部的故事

粉丝 1667
博文 289
码字总数 602499
作品 0
深圳
运营/编辑
私信 提问
加载中
此博客有 18 条评论,请先登录后再查看。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
5分钟 maven3 快速入门指南

前提条件 你首先需要了解如何在电脑上安装软件。如果你不知道如何做到这一点,请询问你办公室,学校里的人,或花钱找人来解释这个给你。 不建议给Maven的服务邮箱来发邮件寻求支持。 安装Mav...

fanl1982
2014/01/23
1.2W
6
TDD的测试框架--Machine.Specification

Machine.Specification 是一个 TDD 测试驱动开发的测试框架,简化了测试,无需关心语言本身特性。 Machine.Specifications 带来的好处是不需要在代码里有注释,但同时阅读代码的人可以一目了...

匿名
2013/01/22
1K
0
mvc框架--Razor

Razor 是一个轻巧而优雅的servlet mvc框架 # 又一个轮子? no,写就她是为了证实我个人的某些想法,并在这个过程中练练手,这两种冲动碰撞在一起,自然而然地产生了Razor # Razor的现在和未来...

dtubest
2013/01/25
2.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

【c++灵魂科普】(1) 第一部分第一章-初识c++语言

今天带来一篇灵魂科普~ 主要是认识c++语言~话不多说 走起! 【全是干货!】 第一节 c++语言简介 信息学奥林匹克竞赛是一项益智性的竞赛活动,核心是考查选手的智力和使用计算机解题的能力,选...

osc_facwbzof
6分钟前
0
0
谈谈AMD CPU购机心得 与 写代码的感受

序 之前用的是华硕飞行保垒。具体是几代忘记了。。I7 4代的标压CUP。 8G内存 换成了联想yoga 14s。 换电脑的原因 网卡问题,老旧的网卡争网络实在争不过别人。每次看别人网络很好,我却连不上...

osc_0m0d4mbq
7分钟前
0
0
springboot 定时任务

一、在 DemoApplycation.java 写入如下代码 package com.taven.demo;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootA......

tavenpy
8分钟前
8
0
2020年8月中国编程语言排行榜

编程语言比例(市场份额) 工资 排名 编程语言 平均工资 中位数 最低()95% 最高(95%) 人数 百分比 1 julia 22539 22500 9000 37500 17 0.00% 2 rust 20987 18500 5371 45000 548 0.11% 3 scal...

osc_kvcz9ju6
8分钟前
0
0
北风在这里给大家拜年了!!!祝大家2020鼠年大吉!忠心祝愿❤在新的一年里:工作的朋友工作顺利,还在读书的童鞋硕果累累,学技术的伙伴技术更上一层楼!同时祝大家2020百毒不侵!😄最后:武汉...

本文分享自微信公众号 - 北风IT之路(beifengtz)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

beifengtz
01/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部