构建 React 应用的最佳 UI 框架

10年服务1亿前端开发工程师

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

Material-UI

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

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

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

[repo owner=”callemall” name=”material-ui”]

React Desktop

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

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

[repo owner=”gabrielbull” name=”react-desktop”]

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 和 其他一些好东西

[repo owner=”Semantic-Org” name=”Semantic-UI-React”]

Ant-design

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

引用官方文档介绍:

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

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

这里是 Ant-design demo

[repo owner=”ant-design” name=”ant-design”]

Blueprint

引用文档:

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

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

[repo owner=”palantir” name=”blueprint”]

React-Bootstrap

用 React 构建的 Bootstrap 3 组件

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

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

[repo owner=”react-bootstrap” name=”react-bootstrap”]

React-Toolbox

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

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

[repo owner=”react-toolbox” name=”react-toolbox”]

Grommet

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

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

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

[repo owner=”grommet” name=”grommet”]

Fabric

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

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

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

[repo owner=”OfficeDev” name=”office-ui-fabric-react”]

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

React-md

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

[repo owner=”mlaursen” name=”react-md”]

感谢 Nikita Sukhov 推荐这个库。

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 构建 React 应用的最佳 UI 框架

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    React框架,现在流行吗。想知道

    Web前端之家2年前 (2017-07-11)回复
  2. #-48

    哪位大神知道,现在哪些公司的网站是用现在新框架React做的啊,急求!!

    Alice2年前 (2017-07-12)回复
    • 淘宝 我的订单页
      新版知乎等等

      旋律1年前 (2017-07-23)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏