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

最新推荐文章于 2020-08-07 17:04:23 发布
最新推荐文章于 2020-08-07 17:04:23 发布
阅读量243 收藏
点赞数
文章标签： ui javascript ux ViewUI
原文链接：https://my.oschina.net/editorial-story/blog/897707
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

构建你的下一个 React.js APP，有这些优秀的 UI 框架就够了。

1、Material-UI

一套实现 Google Material Design 的 React 组件

同时，它也是 React 的第一批 UI 工具套件之一。Material-UI 包含你需要的所有组件（甚至更多）。 Material-UI 预定义的调色板和 <MuiThemeProvider>  可配置性极高，允许为 APP 自定义颜色主题。

Material-UI 之前的版本个人认为有一些性能问题，但从 3.0 版本的发布来看，性能有所改善。

102318_fcMI_2896879.png

2、React Desktop

MacOS Sierra 和 Windows 10 的 React UI 组件。

如果你对跨平台桌面应用程序的 UI 组件感兴趣，那么 React-Desktop 就是为你而设。你可以在上面找到 Mac OS 和 Windows 10 的均可用 UI 组件。

React-Desktop 可与 NW.js 和 Electron.js 完美结合，也可用于任何 JavaScript 驱动的项目。

102754_KJgU_2896879.png

3、Semantic-UI-React

Semantic-UI 的官方 React 组件

就个人而言，我认为这是 React 最好的 UI 框架。

Semantic-UI-React 几乎拥有 Semantic-UI 中所有有用的组件，同时也有一个非常好的 Declarative API ，和用于 React 组件的 shorthand props ，并且 jQuery-Free。

103201_5K4O_2896879.png

4、Ant-design

一套企业级的前端设计语言和基于 React 的前端框架实现。

官方文档介绍：

  • 一种用于 Web 应用的企业级 UI 设计语言
  • 一套开箱即用的高质量 React 组件
  • 使用 TypeScript 构建，提供完整的类型定义文件
  • 基于 npm + webpack + babel 的工作流

它支持所有现代浏览器（IE9 以上），支持服务端渲染和 Electron 环境，拥有许多组件。

Ant-design demo

103600_NIa6_2896879.png

5、Blueprint

针对构建复杂、数据密集的 Web 界面的桌面应用进行了最优化。如果你重度依赖移动互动，并且正在寻找 mobile-first 的 UI 工具包，它可能不适合你。

Blueprint 同样是用 TypeScript 编写的，有良好的文档。

它包含 30+ 的 React 组件，涵盖几乎所有的通用界面元素，从按钮到表单控件到工具提示等等。 它还包括每个组件的 CSS 样式和使用 Sass 和 Less 变量设计自己的组件和应用的工具，以及一个优雅的调色板和两种尺寸的 300 多个 UI 图标，旨在让你专注于构建产品。

104232_CyxZ_2896879.png

6、React-Bootstrap

React 构建的 Bootstrap 3 组件。

React-Bootstrap 是一个可重复使用的前端组件库。你可以通过 Facebook 的 React.js 框架获得 Twitter  Bootstrap 的体验，而且有更为清晰的代码。

简而言之，这是老牌的 Bootstrap 组件，用 React 重新编写。

104535_XuoM_2896879.png

7、React-Toolbox

一组使用 CSS 模块实现 Google Material Design 的 React 组件。

你是否听说过 CSS Modules? React-Toolbox 依赖于它。它允许你只使用所需的 CSS ，而不用使用像 Purify-CSS 这样的工具。除此之外，React-Toolbox 是具有30 +组件，开箱即用的，高度可定制的框架。

104735_jvhs_2896879.png

8、Grommet

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

Grommet 不仅仅是一个 UX 框架，它所包含的东西要比单纯的 UX 框架多得多。

Grommet = 用 React 编写的一堆 UX 组件和工具 + 自有的 grommet-cli +“入门” 指南 + 预建模板 + 良好的文档+ 与 Sketch 集成 。

104937_GOI2_2896879.png

9、Fabric

用于构建与 Office 和 Office 365 界面相类似的 Web 应用的 React 组件。

在过去几年中，微软支持并构建了许多开源项目 - Angular 2、TypeScript、VS Code 和 Fabric。

Fabric 是用 TypeScript 编写的官方 Office 库，包含“入门”指南、博客、官方调色板和字体，以及构建项目所需的所有组件。

105207_QNg3_2896879.png

10、React-md

又一个实现 Material Design 的库。React-md 可以轻松地根据自己的需要进行定制，拥有良好的文档和快速上手的“入门”指南，以及许多常见的 Material 组件。

不过现状是，这个库只有一个人在进行维护和开发。如果你想为开源项目做贡献，React-md 可能是一个不错的选择。

105347_TJSf_2896879.png

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

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

转载于:https://my.oschina.net/editorial-story/blog/897707

weixin_34192816
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-desktop:使用React和nw.js构建桌面应用程序的样板
05-11
React桌面 科洛丰 （以前称为node-webkit）是基于Chromium和Node.js的应用程序运行时，可让您直接从DOM调用Node.js模块，并提供了一种使用所有Web技术编写本机应用程序的新方式。 是一个用于构建用户界面JavaScript库。 是JavaScript应用程序的可预测状态容器。 是用于编写下一代JavaScript的编译器。 是围绕Node.js fs.watch和fs.watchFile的简洁包装。
react17.x+MDUI实现todo小案例，react动态添加与删除元素属性
超小少的博客
12-01 800
很长一段时间没有使用react做项目了，一看官网已经更新到17.x版本了，记得今年上班的时候才v13.x，由于平时项目开发用vue的时候居多，对于react长时间不用怕忘了，赶紧写个小案例练练手，使用版本说明： react：v17.0.1 MDUI：v1.0.1 官方描述：MDUI 漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用。官网地址https://www.mdui.org/ 先上效果图： 至于为啥使用MDUI，我也是在头条上刷资讯的时候偶然看见的，因为平时在上面
nw-react-app:该项目是通过Create NW.js React App启动的
05-25
Create NW.js React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项（we
推荐几款ReactJS最优秀的UI框架
Rebirth 重生
07-06 2万+
使用优秀的UI框架来构建你的ReactJS应用。Material-UI一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。查看地址：https://github.com/callemall/material-uiReact DesktopReact-Desktop一款面向MacOS Sierra和Windows10桌面风格的R...
react-komik, 基于 fabric.js 画布绘制的基于ReactJS的漫画.zip
09-17
react-komik, 基于 fabric.js 画布绘制的基于ReactJS的漫画 响应 Komik ！基于ReactJS的漫画条创建器使用 fabric.js 画布渲染。 这就像的眼镜但是对于漫画。 你可以在渲染后编辑( 定位，缩放，着色) 。 Reactify任何东西，Reactify漫画。 用法模块
构建React.js应用的十佳UI框架.docx
10-25
构建React.js应用的十佳UI框架.docx
react-ui:基于react.js构建的UI套件
05-08
React用户界面该项目是通过引导的。 yarn installyarn startyarn build资料夹结构.├── build # Production version (for deploy)├── config # Configuration files for webpack├── public # Template files...
toast-ui.react-image-editor:用于React.js的TOAST UI ImageEditor包装器
03-18
TOAST UI图像编辑器的React Wrapper应用Google Analytics（分析）（GA）来收集有关开源使用情况的统计信息，以便确定TOAST UI图像编辑器在全世界的使用范围。 它也是确定项目未来走向的重要指标。 要收集location....
react.js、react-dom.js、babel.js文件包下载
02-22
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
react-carousel:在 React.js 中构建的 Carousel UI 组件
06-14
React轮播 在 React.js 中构建的轮播 安装 $ npm install react-carousel 发展 npm run dev open http://localhost:3000/ 部署 npm run release 执照 react-carousel 是。
w2ui-starter
05-15
w2ui-starter 这个仓库很小，模块化，易于扩展，可以使用w2ui来构建应用程序。 它使用ES6 Modules 。 此仓库的目的是作为起点并提供结构。 它是一个前端框架，因此不包括服务器端代码。 有一些静态json文件供您使用。 我在src/libs文件夹中包含了最新的jQuery和w2ui。 我不建议包括任何主要框架，例如React或Angular，但这取决于您。 档案结构 克隆github存储库并打开/ src文件夹。 这是所有前端代码所在的位置。 您将找到以下结构： /app - all front-end code is here /less - global less files /icons - svg files for icons and generated icon font /main
整全完美的 fabric.js ，支持手机及图片滤镜，无报错
08-30
官网自定下载，有很多问题，git下载的，又不支持手机触屏事件。这个是个人整合的相关完美无报错版本---version: '2.0.0-beta6'
ts-react-bulma-nwjs-boilerplate:使用打字稿，react，bulma，nw.js的示例项目设置
05-26
打字稿，React，布尔玛，NW.JS样板 这是我当前最喜欢的前端技术堆栈。 如果需要，可以删除nw.js。 入门 安装依赖项 npm install 然后运行开发服务器 npm run start 使用生产设置进行构建 npm run build 堆栈 参见package.json 。 项目结构 源代码树如下 src/ app/您的应用代码在这里 style/用于Sass内置样式
推荐5个优秀的React UI框架
前端视听
08-07 1800
1：Ant-design 推荐指数：star:60.2k 官网：https://ant.design/docs/react/introduce-cn Github: https://github.com/ant-design/ant-design/ Ant Design一套企业级 UI 设计语言和 React 组件库，基于Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品，风格素雅简洁，喜欢的可以选择使用，目前在react技术栈领域使用的较为广泛，各种文档也比较齐全，遇
几款ReactJS最优秀的UI框架
热门推荐
dt1991524的博客
01-21 3万+
上篇文章中写了流行的前端UI几大框架，发现大部分评价都是Vue的UI组件库，从评论中得知漏掉了很多，也有人问React ui，自己就搜索总结下适应于ReactJS的UI组件库。 一.Material-UI   Material-UI是一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。使用它可以快速搭建出赏心悦目的应...
NW.js之入门篇(1)
zhangrui_web的博客
09-20 3651
目录 1.1 环境安装 1.1.1 windows下的安装 1.1.2 linux环境下的安装 1.2 hello world 1.1 环境安装 webkit是开源项目，项目地址为https://github.com/rogerwang/node-webkit。 我们可以在该项目首页找到downloads节（https://github.com/rogerwang/node-we...
我的第一个nw.js爬虫
MAILLIBIN的专栏
01-25 1796
最近想找一个英语音标数据库，但是一直没有找到满意的，于是想到自己做个网络爬虫爬取有道词典的英语音标。 由于自己比较喜欢用javascript写代码，虽听说用python也可以写爬虫，但是我很不习惯哪种没有;{}边界符号的代码，因为难以阅读，不便于调试和维护，所以找到了nw.js这个基于node.js的工具，其实用node.js就可以写爬虫了，但是想更加直观点，将结果反馈输出到图形界面上。
React 白板组件分享 FabricJs
04-09 1703
fabric-whiteboard 基于NodeJs、React开发的白板组件，通过这次也学习了如何新建、开发、测试、发布单独的React组件。半吊子前端，不喜勿喷嘿嘿。 还有一些功能和优化要做，持续更新中 ScreenShots Features Freely drag the palette. Arrow,Square,Ellipse,Line,DotLine,Select,Erase...
Full Stack GraphQL Applications With React, Node.js, and Neo4j
最新发布
03-13
"《Full Stack GraphQL Applications With React, Node.js, and Neo4j》是由William Lyon撰写的一本书，探讨如何使用React、Node.js和Neo4j构建全栈GraphQL应用程序。书中的示例展示了如何通过GraphQL API在Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值