10 个打造 React.js App 的最佳 UI 框架
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 组件。
项目地址：http://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 组件。
项目地址：http://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 框架 的全部内容， 来源链接： utcz.com/z/381584.html
