WEBAPP开发教程10 个打造 React.js App 的最佳 UI 框架-职坐标

WEBAPP开发教程10 个打造 React.js App 的最佳 UI 框架

凌雪 2018-11-08 来源：网络阅读 1356 评论 0

摘要：本文将带你了解WEBAPP开发教程10 个打造 React.js App 的最佳 UI 框架，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发教程10 个打造 React.js App 的最佳 UI 框架，希望本文对大家学WEBAPP有所帮助。

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

在本文中，我们将分享一些助你打造 React.js App 最佳的 UI 框架。它们具备你所需要的基本 React 组件，以及易用的 API，同时，在外观和体验上也非常棒。Have Fun ！
1. Material-UI

基于谷歌 Material Design 设计规范的 React 组件

此外，它还是 React 的第一个 UI 套件。Material-UI 具备你所需要的所有组件（甚至更多），以及可配置性极高的预定义调色板和<MuiThemeProvider>，帮助你为应用程序定制相应的颜色主题。

由于 Material-UI 过去的版本中存在一些性能问题，就我个人而言，不是很满意。但自3.0 版本发布后的反馈来看，它在性能方面已有所改善。

项目地址：https://github.com/callemall/material-ui

2. React Desktop

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

关于 Electron 框架，我相信你已经有所了解。如果你对跨平台桌面应用程序 UI 组件也感兴趣的话，那么 React-Desktop 绝对是你的“菜”。你可以使用它轻松获取用于 Mac OS 和
Windows 10 系统上相应的 UI 组件。

项目地址：//reactdesktop.js.org/

3. Semantic-UI-React

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

就个人而言，我认为它是最好用的 React UI 框架。它是由官方基于 Semantic-UI 打造的 React 组件，它几乎涵盖了 Semantic-UI 上的所有组件，而且它还有一个易用的 Declarative API，以及用于 React 组件的 shorthand props，同时它能够做到 jQuery-free。

另外，我做了一个使用 React-Semantic-UI，Webpack 构建项目的新手示例，你也可以来看看。

项目地址：https://github.com/Semantic-Org/Semantic-UI-React

4. Ant-design

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

引用官方文档介绍：
用于 Web 应用程序的企业级 UI 设计语言。一套开箱即用的高品质 React 组件。由 TypeScript 构建，并具备完整定义类型。基于 npm + webpack + dva 前端开发工作流。
它支持浏览器、服务器端渲染和 Electron 环境，并具备丰富的组件，你还可以通过Create-react-app 来学习。来看看 Ant-design demo 吧！

项目地址：https://github.com/ant-design/ant-design

5. Blueprint

引用自官方文档：

“它将为拥有复杂、数据密集的 Web 界面的桌面应用程序进行全面优化。如果你注重移动端的交互体验，并且正寻找移动优先的 UI 套件的话，它可能不适合你。”

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

项目地址：https://github.com/palantir/blueprint

6. React-Bootstrap

用 React 构建的 Bootstrap 3 组件

引用自官方文档：

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

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

项目地址：https://github.com/react-bootstrap/react-bootstrap

7. React-Toolbox

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

你听说过 CSS Modules 吗？ React-Toolbox 便依赖于它。React-Toolbox 是一个具有 30+ 开箱即用组件的高度可定制框架。从此，你可以不必使用类似 Purify-CSS 这样的工具，仅通过所需的
CSS 便可以进行项目的开发。

项目地址：https://github.com/react-toolbox/react-toolbox/

8. Grommet

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

Grommet 不仅仅是 UX 框架，它还提供了从理论到应用程序开发所需的所有指导、组件以及设计资源。例如，它提供了 React 编写的丰富的 UX 组件、自带的 grommet-cli 、入门学习指南、预设模版、优秀的使用文档等资源。

项目地址：https://github.com/grommet/grommet

9. Fabric

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

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

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

项目地址:https://github.com/OfficeDev/office-ui-fabric-react

10. React-md

这是另一个基于谷歌 Material Design 设计规范的库。React-md 具备众多常见的 Material 组件，你可以轻松地根据自己的需求进行定制。同时，它还具有良好的使用文档，以及快速入门指南。

但是，目前这个库仅有一个人进行维护和开发。如果你想为开源项目做些贡献，或许 React-md 是一个不错的选择。

项目地址：https://github.com/mlaursen/react-md

感谢你的阅读。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

若你有所收获，欢迎点赞与分享。

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

在本文中，我们将分享一些助你打造 React.js App 最佳的 UI 框架。它们具备你所需要的基本 React 组件，以及易用的 API，同时，在外观和体验上也非常棒。Have Fun ！
1. Material-UI

基于谷歌 Material Design 设计规范的 React 组件

此外，它还是 React 的第一个 UI 套件。Material-UI 具备你所需要的所有组件（甚至更多），以及可配置性极高的预定义调色板和<MuiThemeProvider>，帮助你为应用程序定制相应的颜色主题。

由于 Material-UI 过去的版本中存在一些性能问题，就我个人而言，不是很满意。但自3.0 版本发布后的反馈来看，它在性能方面已有所改善。

项目地址：https://github.com/callemall/material-ui

2. React Desktop

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

关于 Electron 框架，我相信你已经有所了解。如果你对跨平台桌面应用程序 UI 组件也感兴趣的话，那么 React-Desktop 绝对是你的“菜”。你可以使用它轻松获取用于 Mac OS 和
Windows 10 系统上相应的 UI 组件。

项目地址：//reactdesktop.js.org/

3. Semantic-UI-React

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

就个人而言，我认为它是最好用的 React UI 框架。它是由官方基于 Semantic-UI 打造的 React 组件，它几乎涵盖了 Semantic-UI 上的所有组件，而且它还有一个易用的 Declarative API，以及用于 React 组件的 shorthand props，同时它能够做到 jQuery-free。

另外，我做了一个使用 React-Semantic-UI，Webpack 构建项目的新手示例，你也可以来看看。

项目地址：https://github.com/Semantic-Org/Semantic-UI-React

4. Ant-design

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

引用官方文档介绍：
用于 Web 应用程序的企业级 UI 设计语言。一套开箱即用的高品质 React 组件。由 TypeScript 构建，并具备完整定义类型。基于 npm + webpack + dva 前端开发工作流。
它支持浏览器、服务器端渲染和 Electron 环境，并具备丰富的组件，你还可以通过Create-react-app 来学习。来看看 Ant-design demo 吧！

项目地址：https://github.com/ant-design/ant-design

5. Blueprint

引用自官方文档：

“它将为拥有复杂、数据密集的 Web 界面的桌面应用程序进行全面优化。如果你注重移动端的交互体验，并且正寻找移动优先的 UI 套件的话，它可能不适合你。”

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

项目地址：https://github.com/palantir/blueprint

6. React-Bootstrap

用 React 构建的 Bootstrap 3 组件

引用自官方文档：

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

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

项目地址：https://github.com/react-bootstrap/react-bootstrap

7. React-Toolbox

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

你听说过 CSS Modules 吗？ React-Toolbox 便依赖于它。React-Toolbox 是一个具有 30+ 开箱即用组件的高度可定制框架。从此，你可以不必使用类似 Purify-CSS 这样的工具，仅通过所需的
CSS 便可以进行项目的开发。

项目地址：https://github.com/react-toolbox/react-toolbox/

8. Grommet

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

Grommet 不仅仅是 UX 框架，它还提供了从理论到应用程序开发所需的所有指导、组件以及设计资源。例如，它提供了 React 编写的丰富的 UX 组件、自带的 grommet-cli 、入门学习指南、预设模版、优秀的使用文档等资源。

项目地址：https://github.com/grommet/grommet

9. Fabric

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

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

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

项目地址:https://github.com/OfficeDev/office-ui-fabric-react

10. React-md

这是另一个基于谷歌 Material Design 设计规范的库。React-md 具备众多常见的 Material 组件，你可以轻松地根据自己的需求进行定制。同时，它还具有良好的使用文档，以及快速入门指南。

但是，目前这个库仅有一个人进行维护和开发。如果你想为开源项目做些贡献，或许 React-md 是一个不错的选择。

项目地址：https://github.com/mlaursen/react-md

感谢你的阅读。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

若你有所收获，欢迎点赞与分享。