新浦京81707con > 功能介绍 > 10 个打造 React.js App 的最佳 UI 框架

原标题:10 个打造 React.js App 的最佳 UI 框架

浏览次数:103 时间:2019-05-02

10 个打造 React.js App 的最佳 UI 框架

2017/05/26 · 基础手艺 · React, UI

原稿出处: Vladimir Metnew   译文出处:IT程序狮   

图片 1

10 个打造 React.js App 的最佳 UI 框架

在本文中,我们将分享部分助你制作 React.js App 最棒的 UI 框架。它们有着你所须要的主导 React 组件,以及易用的 API,同时,在外观和体会上也相当棒。Have Fun !


1. Material-UI

图片 2

据悉谷歌 Material Design 设计规范的 React 组件

别的,它照旧 React 的率先个 UI 套件。Material-UI享有你所须求的有着组件(以致越来越多),以及可配置性极高的预订义调色板和``,支持你为应用程序定制相应的水彩宗旨。

鉴于 Material-UI 过去的版本中留存有的属性难题,就笔者个人来说,不是很乐意。但自3.0 版本发布后的举报来看,它在性质方面已有所改良。

项目地址:【传送门】

2. React Desktop

图片 3

专为 MacOS Sierra 和 Windows 10 提供的 React UI 组件

关于Electron 框架,作者相信你早已具有领悟。假若您对跨平台桌面应用程序 UI 组件也感兴趣的话,那么React-Desktop纯属是您的“菜”。你能够动用它轻易取得用于 Mac OS 和 Windows 十 系统上相应的 UI 组件。

品种地址:【传送门】

3. Semantic-UI-React

图片 4

由 Semantic-UI 官方出品的 React UI 组件

就个人来讲,笔者以为它是最棒用的 React UI 框架。它是由法定基于Semantic-UI制作的 React 组件,它差不离涵盖了 Semantic-UI 上的有着组件,而且它还有二个易用的 Declarative API,以及用于 React 组件的 shorthand props,同时它亦可达成jQuery-free。

其余,小编做了三个运用 React-Semantic-UI,Webpack 营造项目的菜鸟示例,你也能够来探望。

项目地址:【传送门】

4. Ant-design

图片 5

1套公司级 UI 设计语言和基于 React 达成的 Web 组件库的体验消除方案

引用官方文书档案介绍:

  • 用来 Web 应用程序的集团级 UI 设计语言。
  • 一套开箱即用的高格调 React 组件。
  • 由 TypeScript 营造,并具有完全定义类型。
  • 依靠 npm webpack dva 前端开拓工作流。

它接济浏览器、服务器端渲染和 Electron 情状,并负有丰盛的机件,你还是可以经过Create-react-app 来学习。来看看Ant-design demo吧!

品种地址:【传送门】

5. Blueprint

图片 6

引用自官方文书档案:

“它将为具有卷帙浩繁、数据密集的 Web 界面包车型大巴桌面应用程序实行宏观优化。倘若您重视移动端的交互体验,并且正探索移动优先的 UI 套件的话,它或然不吻合您。”

Blueprint 是由 TypeScript 营造,并保有卓绝的运用文书档案。它富含了增加(30 )的 React 基础零部件,从开关到表单控件、工具提醒均有涉及。其余,它的每一个组件都包涵了 CSS 样式。并且,你还足以采取 Sass 和 Less 变量、优雅的调色板和二种尺寸的 300 UI Logo等工具,来塑造一款专属于你的零部件和应用程序。

类型地址:【传送门】

6. React-Bootstrap

图片 7

用 React 构建的 Bootstrap 3 组件

引用自官方文档:

React-Bootstrap是一个可选拔的前端组件库。通过运用 Instagram(脸谱) 的 React.js 框架来得到 Instagram Bootstrap 的外观与体会,以及更清楚的代码。

简单易行,它是名满天下的 Bootstrap 组件的 React 落成。

项目地址:【传送门】

7. React-Toolbox

图片 8

一套基于谷歌 Material Design 标准和 CSS 模块的 React 组件

您听大人说过CSS Modules吗? React-Toolbox便依靠于它。React-Toolbox 是一个装有 30 开箱即用组件的万丈可定制框架。从此,你能够不要选拔类似Purify-CSS那般的工具,仅通过所需的 CSS 便得以开始展览项目的支出。

品种地址:【传送门】

8. Grommet

图片 9

用来集团应用的进步的 UX 框架

Grommet 不仅仅是 UX 框架,它还提供了从理论到应用程序开拓所需的富有指引、组件以及设计能源。举个例子,它提供了 React 编写的丰硕的 UX 组件、自带的 grommet-cli 、入门学习指南、预设模版、非凡的应用文书档案等能源。

品类地址:【传送门】

9. Fabric

图片 10

用以为 Office 和 Office 36五 构建用户体验的 React 组件

在过去的几年里,微软公司帮衬并创立了许多开源项目,举个例子 Angular 贰、TypeScript、VS Code(基于 Electron)以及Fabric。

Fabric是行使 TypeScript 编写的法定 Office 库,它兼具“入门”指南、博客、法定调色板和字体以及项目所需的享有组件。

连串地址:【传送门】

10. React-md

图片 11

这是另1个基于谷歌(Google) Material Design 设计标准的库。React-md全数众多周围的 Material 组件,你能够轻巧地依照本人的要求开始展览定制。同时,它还具有优良的利用文书档案,以及急忙入门指南。

而是,近年来那些库仅有壹位开始展览保证和支出。 要是你想为开源项目做些进献,也许 React-md 是多少个不利的选项。

类型地址:【传送门】


多谢你的开卷。若你抱有收获,招待点赞与享受。

注:

  1. 正文版权归原来的书文者全体,仅用于学习与调换;
  2. 如需转发译文,烦请按江湖注脚出处新闻,多谢!

英文原来的书文:Best UI Frameworks for your new React.js App
作者:Vladimir Metnew
译者:IT程序狮
译文地址:

1 赞 2 收藏 评论

图片 12

本文由新浦京81707con发布于功能介绍,转载请注明出处:10 个打造 React.js App 的最佳 UI 框架

关键词: 新浦京81707con 基础技术

上一篇:支持单个文件下载,前端代码异常监控实战

下一篇:没有了