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

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

作者:OSC-王练

来源:51CTO

时间: 2024-10-29 20:53:59

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

没有开发文档的ui框架怎么用?

问题描述 没有开发文档的ui框架怎么用? 下载了一个beyondadmin,但是只有一些简单的例子,没有任何开发文档和api说明,难道现在的ui框架都是不带开发文档的?大家一般碰到这种情况是怎么开发的? 解决方案 5大顶级移动UI开发框架 解决方案二: 有demo的话看执行看效果,阅读源码,熟悉使用方法. 现在大多数的UI 框架都是简洁好用的.

快速构建原型最好用的 10 个 ReactJS UI 框架

本文讲的是快速构建原型最好用的 10 个 ReactJS UI 框架, 我正在探索一些基于 React 的,可以很好的和 React 组件结合起来,并且能直接在你的 React 项目中插入使用的功能丰富的 UI 框架. 下面列举了一些基于 ReactJS 编译的 UI 框架(排名不分先后),希望以下内容的能帮助你快速用 ReactJS 原型实现你的想法: Material UI Material-UI 是基于 Google 的质感设计(Material Design)产生的的一套丰富的 Reac

三大JS框架的较量:Angular.js与React.js与Ember.js

通过选择合适的JavaScript框架来更好适配你的项目需求,这有利于提高你的开发能力与web apps的竞争力. 然后,你可以为基于JavaScript的应用或者网站想个极佳的主意.选择合适框架应该对你项目的成功有显著效果.它可以推到你及时完成项目,并且有助于你将来维护代码.JavaScript框架,比如Angular.js,Ember.js,或者React.js,能提供很好的代码框架,并且保持代码的组织性,从而使得你的app更具灵活性与可扩展性,开发过程更加容易. JavaScript场景的

Vue.js 2.0 和 React、Augular等其他前端框架大比拼_javascript技巧

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 相似的作用域,我们会用更多的时间来讲这一块的比较.不仅我们要保持技术的准确性,同时兼顾平衡.我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器. React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React

使用 React.js 的渐进式 Web 应用程序:第 3 部分 - 离线支持和网络恢复能力

本文讲的是使用 React.js 的渐进式 Web 应用程序:第 3 部分 - 离线支持和网络恢复能力, 本期是新系列的第三部分,将介绍使用 Lighthouse 优化移动 web 应用传输的技巧. 并看看如何使你的 React 应用离线工作. 一个好的渐进式 Web 应用,不论网络状况如何都能立即加载,并且在不需要网络请求的情况下也能展示 UI (即离线时). 再次访问 Housing.com 渐进式 Web 应用(使用 React 和 Redux 构建)能够立即加载离线缓存的 UI. 我们可

利用browserify和gulp来构建react应用

JS的世界发展的非常快,有很多好用的框架,工具层出不穷,今天就来说说怎么结合browserify,gulp,react来构建前端应用. 下面我们先一一简单介绍下browserify,gulp,react Browserify browserify是一个以commonjs规范来定义模块的打包工具. browserify是一个开发工具,它允许我们以nodejs的代码风格来定义我们的模块,使用module.exports来导出模块功能,使用require来请求某个模块,跟amd规范不一样的是,我们不需

React.js入门学习第一篇_javascript技巧

一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法

使用 React.js 的渐进式 Web 应用程序:第 4 部分 - 渐进增强

本文讲的是使用 React.js 的渐进式 Web 应用程序:第 4 部分 - 渐进增强, 渐进增强 (Progressive Enhancement) 渐进增强 (Progressive Enhancement) 意味着所有人都可以在任意一款浏览器中访问页面的基本内容和功能,在那些不支持某些特性的浏览器中访问时,体验上有所退化但仍然是可用的. - Lighthouse 一个比较完善的 Web 应用要对它所面对的市场的大部分用户是可用的.如此,如果一个 Web 应用遵循弹性开发的理念,那么它可以

使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能

本文讲的是使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能, 系列第二篇,来看看基于 React 路由分块的页面加载优化. 原文地址:Progressive Web Apps with React.js: Part 2 - Page Load Performance 原文作者:Addy Osmani 译文出自:掘金翻译计划 译者:markzhai 校对者:Romeo0906,AceLeeWinnie 使用 React.js 的渐进式 Web 应用程序:第 2 部