后端开发教程 - Java、Spring Boot 实战 - msg200.com
React.js 的最佳 UI 框架
React（也称为 React.js 或 ReactJS）是一个免费的开源 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 以及由个人开发者和公司组成的社区维护。React 是一个流行的前端框架，在 GitHub 上拥有超过 17.2 万颗星。越来越多的支持库可以帮助我们高效地定制 UI 组件。
在这里，我们将介绍一些您可以在项目中采用的最佳React UI 框架。
此处的比较基于以下可靠来源的用户评论：
- GitHub
- npm.js
- StackShare
- Stackoverflow
1）Ant Design --- 全球第二流行的 React UI 框架
它是一种企业级的 UI 设计语言，拥有一套高质量的 React UI 组件。它是企业级 React UI 库中最好的之一。它提供了许多可用于构建完整应用程序的精美组件。其文档内容丰富，包含大量示例，并保持更新。
要查找基于 Ant Design 构建的网站示例，请点击此处。
开发者： Ant Design
统计数据：
- GitHub 星数： 73.4k
- 11,749 个网站使用 ANT Design
使用此功能的顶级公司：
优点：
- 数十种语言的国际化支持，
- 强大的主题定制和 Typescript 支持。
- 现代浏览器和 Internet Explorer 11 支持 Ant 设计。
- 企业外观和感觉。
- 高品质图标。
2）Material UI --- React UI 组件，实现更快、更轻松的 Web 开发。
Material-UI 是最流行的 React UI 框架，它提供了开箱即用的 Google Material Design 设计风格。Material Design 的设计灵感源自现实世界和纹理，同时将实际的 UI 元素保持在最低限度。
在此处查看使用 Material UI 的公共应用程序的完整展示。
开发者： Hai Nguyen
统计数据：
- GitHub 星数： 7 万
- 193,907 个网站使用 Material-UI
使用此功能的顶级公司：
优点：
- 自动颜色变化。
- 在 RTL 和非 RTL 之间切换
- 与 Figma、Sketch 和 Adobe XD 等设计工具包集成。
- 有各种有用的组件可用，如应用栏、自动完成、徽章、按钮、卡片、对话框、图标、菜单、滑块等。
- Material-UI 还提供 React 主题和模板，因此您可以为您的应用自定义颜色主题。
3）React Bootstrap ---为 React 重建的 最流行的前端 UI 框架。
React-Bootstrap 取代了 Bootstrap JavaScript。每个组件都是从头构建的，作为真正的 React 组件，没有 jQuery 等不必要的依赖项。React Bootstrap 是最古老的 React UI 库之一，并且随着 React 的发展而稳步发展。虽然 React-Bootstrap 不提供任何官方支持，但 Bootstrap 拥有庞大活跃的社区和丰富的资源。
开发者： Mark Otto、 Jacob Thornton
统计数据：
- GitHub 星数： 19.7k
使用此功能的顶级公司：
优点：
- Bootstrap 的网格系统允许您的布局完全响应一系列容器、行和列。
- 有数十种组件可供选择，包括徽章、旋转木马、祝酒词和巨型电子显示屏。
- React 组件模型让我们能够更好地控制每个组件的形式和功能。
4）Semantic UI React --- Semantic UI 官方插件
Semantic UI React 是 Semantic UI 的官方插件。该库拥有超过 50 个组件，包括片段、进度条、过渡、分页等等。然而，尽管它拥有所有这些独特的功能，但如果您没有 JavaScript 的实际经验，可能会觉得这个库有点复杂。
开发者： Jack Lukic
统计数据：
- GitHub 星数： 12.4k
使用此功能的顶级公司：
优点：
- 令人印象深刻的定制和主题功能。
- 没有任何 jQuery 代码的痕迹，简化了应用程序开发。
- 为开发人员提供超过 50 个 UI 组件的广泛集合。
- 完整的 SUI 组件定义支持。
- 简单的声明式组件 API 与脆弱的 HTML 标记。
5）Chakra UI——适用于您的React应用程序的 简单、模块化且可访问的React UI组件
Chakra UI 提供了一组易于访问、可复用且可组合的React UI 组件，让您轻松创建网站和应用。Chakra UI 组件基于 React UIPrimitive 构建，可实现无限组合性。Chakra UI 社区非常活跃。无论您何时遇到困难，都能获得所需的一切帮助。
开发者： Segun Adebayo
统计数据：
- GitHub 星数： 19.6k
使用此功能的顶级公司：
优点：
- Chakra UI 包含一组布局组件，如 Box 和 Stack，可以通过传递 props 轻松地设置组件的样式。
- Chakra UI 中的大多数组件都兼容暗模式。
- Chakra UI 组件遵循 WAI-ARIA 指南规范。
- 您可以根据需要使用相同的反应组件，并对其进行自定义以供进一步使用。
- Chakra UI 库为您提供模块化反应 UI 组件，帮助您编写干净、最佳的代码。
- 该库不需要任何繁重的设置来实现，并且简单易用。
6）Blueprint --- 基于 React 的 Web UI 工具包
Blueprint 是一个新开源的设计系统，由一系列可组合的 React 组件组成，并针对桌面应用进行了优化。它并非移动优先的 UI 工具包。
开发者： Palantir
统计数据：
- GitHub 星数： 18k
使用此功能的顶级公司：
优点：
- React UI 库有超过 40 个组件，专门针对桌面应用程序的复杂数据密集型界面进行了优化。
- 包含许多有用的组件，如面包屑、按钮、标注、卡片、分隔线、导航栏、选项卡、标签等等。
- 该库支持 Chrome、Firefox、Safari、IE 11 和 Microsoft Edge。
7）Grommet ---专注于本质体验
Grommet 是一个基于 React 的框架，它在一个简洁的包中提供了可访问性、模块化、响应性和主题功能。Grommet 是一个专为响应式、可访问性和移动优先的 Web 项目设计的组件库。它甚至还提供了一个 SVG 图标列表。
开发者： 惠普企业
统计数据：
- GitHub 星数： 7.4k
使用此功能的顶级公司：
优点：
- 它采用原子设计方法并允许键盘导航、屏幕阅读器标签等。
- 强大的主题工具，可让您根据颜色、类型和布局需求定制组件库。您甚至可以控制组件交互。
- 定制复合组件。
- 灵活的布局。
8）Evergreen --- Segment 的 React UI 框架
Evergreen 包含一组开箱即用的精美 React UI 组件。它采用企业级 Web 应用程序的 UI 设计语言。
开发者： Segment
统计数据：
- GitHub 星数： 10.9k
使用此功能的顶级公司：
- 仪表板、堆栈
优点：
- Evergreen 包含一组开箱即用的精致 React UI 组件。
- Evergreen 具有适用于企业级 Web 应用程序的 UI 设计语言。
- Evergreen 有超过 30 个组件，包括按钮、文件选择器、选择菜单、微调器、侧边栏、表格等。
- 他们提供了一个 figma 库，并且正在研究处理“错误消息”和“表格布局”的模式。
9) Fluent UI --- 用于 Web、移动和桌面应用程序开发的 Microsoft UI 套件。
Fluent UI Web 是用于构建 Web 应用程序的实用程序、React 组件和 Web 组件的集合。它包含适用于 iOS、macOS、Android 和 Windows 的 Web 组件和原生库。
开发者： 微软
统计数据：
- GitHub 星数： 11.8k
- 97 个网站使用 Fluent UI
- NPM 每周下载量： 53,498
使用此功能的顶级公司：
优点：
- 它具有用于构建表单和列表的组件，但也提供了非常具体的组件，例如 PeoplePicker。
- 无需任何代码即可实现良好的默认样式功能。
- 良好的灵活性和定制组件外观和功能的能力。
10) Rebass --- 使用 styled-system 构建的 React 原始 UI 组件。
Rebass 是最好的网格库之一，它提供 UI 组件，让开发者只需专注于页面开发。Rebass 提供了网格、导航栏和图片卡等常见用例的文档。
开发者： 布伦特·杰克逊
统计数据：
- GitHub 星数： 7.4k
- NPM 每周下载量： 65,779
使用此功能的顶级公司：
优点：
- 一流的主题支持和与主题 UI 的完全兼容性。
- 具有基于数组的语法的快速、移动优先响应样式。
- 使用 Box 和 Flex 组件进行 Flexbox 布局。
- 最小占用空间约为 4KB。
- 采用Styled System道具的最佳开发人员人体工程学。
最初发布于 raftlabs.co
文章来源：https://dev.to/raftlabs/best-ui-frameworks-for-react-js-b49