您的位置:首页 » 分类: 前端资源 & React » 文章: 构建 React 应用的最佳 UI 框架

构建 React 应用的最佳 UI 框架

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

构建应用程序,使用这些最佳 UI 框架就够了。

Material-UI

一套实现 Google Material Design 设计规范的 React 组件;

此外,它也是 React 第一批 UI 套件之一 。Material-UI 具备你所需要的所有组件(甚至更多),Material-UI 中预定义 调色板<muithemeprovider> 的可配置性极高, 允许你为应用程序定制相应的颜色主题

课程内容大纲 | 开篇:一线大公司对中高级前端工程师的要求

  • 1 JavaScript 测试基础
  • 2 JavaScript 难点选讲
  • 3 异步流程控制
  • 4 模块化
  • 5 模板引擎
  • 6 webpack
  • 7 学会性能测试对比
  • 8 基于缓存的前端性能优化
  • ......
点击报名

Material-UI 之前的版本个人认为有一些性能问题,就我个人而言,不是很满意。但自 3.0 版本 发布后的反馈来看,性能方面已有所改善。

callemall / material-ui

React Components that Implement Google's Material Design.

http://www.material-ui.com

React Desktop

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

关于 Electron 框架,我相信你已经有所了解。如果你对跨平台桌面应用程序 UI 组件也感兴趣,那么 React-Desktop 就是为你准备的。你可以轻松找到 Mac OS 和 Windows 10 系统上相应的 UI 组件。

gabrielbull / react-desktop

React UI Components for macOS Sierra and Windows 10

http://reactdesktop.js.org

Semantic-UI-React

Semantic-UI 的官方 React 组件

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

Semantic-UI-React 是 Semantic-UI 的 React 版本,它几乎涵盖了 Semantic-UI 上所有最常用的组件,同时也有一个非常好用的 Declarative API ,以用于 React 组件的 shorthand props ,并且能够做到 jQuery free。

此外,我有一个启动器(包括演示),结合了 Semantic-UI-React、Webpack 和 其他一些好东西

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

http://react.semantic-ui.com

Ant-design

一套企业级 UI 设计语言和基于 React 实现的 Web 组件库的体验解决方案

引用官方文档介绍:

  • 用于 Web 应用程序的企业级 UI 设计语言。
  • 一套开箱即用的高品质 React 组件。
  • 由 TypeScript 构建,并具备完整定义类型。
  • 基于 npm + webpack + dva 前端开发工作流。

它支持浏览器、服务器端渲染和 Electron 环境,并具备丰富的组件,你还可以 通过Create-react-app 来学习

这里是 Ant-design demo

ant-design / ant-design

🐜 A UI Design Language

http://ant.design

Blueprint

引用文档:

针对构建复杂、数据密集的 Web 界面的桌面应用进行了全面优化。如果你注重移动端的交互体验,并且正寻找移动优先的 UI 套件的话,它可能不适合你。

Blueprint 是由 TypeScript 构建,并具备良好的使用文档。它包含了丰富(30+)的 React 基础组件,从按钮到表单控件、工具提示均有涉及。此外,它的每个组件都包含了 CSS 样式。并且,你还可以使用 Sass 和 Less 变量、优雅的调色板和两种尺寸的 300+ UI 图标等工具,来打造一款专属于你的组件和应用程序。

palantir / blueprint

A React-based UI toolkit for the web

http://blueprintjs.com/

React-Bootstrap

用 React 构建的 Bootstrap 3 组件

引用自官方文档:React-Bootstrap 是一个可重用的前端组件库。通过使用 Facebook 的 React.js 框架来获得 Twitter Bootstrap 的外观与体验,以及更清晰的代码。

简而言之,它是知名的 Bootstrap 组件的 React 实现。

react-bootstrap / react-bootstrap

Bootstrap 3 components built with React

https://react-bootstrap.github.io/

React-Toolbox

一套使用 CSS 模块实现 Google Material Design 设计规范的 React 组件

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

react-toolbox / react-toolbox

A set of React components implementing Google's Material Design specification with the power of CSS Modules

http://www.react-toolbox.com

Grommet

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

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

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

grommet / grommet

The most advanced UX framework for enterprise applications.

https://grommet.github.io

Fabric

用于为 Office 和 Office 365 构建用户体验的 React 组件

在过去的几年里,微软公司支持并创建了许多开源项目,例如 Angular 2、TypeScript、VS Code(基于 Electron)以及 Fabric

Fabric 是利用 TypeScript 编写的官方 Office 库,它具有 入门指南博客官方调色板和字体 以及 项目所需的所有组件

OfficeDev / office-ui-fabric-react

React components for building experiences for Office and Office 365.

http://dev.office.com/fabric#/components

微软吓到我了。 感谢 @aslamhadi 提供的 这个链接

React-md

又一个实现 Material Design 的库。但等一下,给它一个机会。React-md 可以轻松地根据自己的需要进行定制,拥有良好的文档和快速上手的“入门”指南 ,以及许多常见的 Material 组件。有一个问题是,这个库只有一个人在进行维护和开发。如果你想为开源项目做贡献,或许 React-md 可能是一个不错的选择。

感谢 Nikita Sukhov 推荐这个库。

原文链接:https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

2 条评论 - 关于 “构建 React 应用的最佳 UI 框架

发表评论

电子邮件地址不会被公开。 必填项已用*标注