React 的 7 大 UI 库和工具包

2025-06-07

React 的 7 大 UI 库和工具包

作者：Chidume Nnamdi ✏️

React 目前位于 JavaScript 食物链的顶端。参与 StackOverflow 的“ 2020 年开发者调查”的开发者将 React 评选为他们首选的 JavaScript 框架。

由于其流行，许多 UI 库都构建了自定义 React 组件，以方便轻松集成并改善开发人员体验。

如今，React UI 工具包和库琳琅满目。本指南将重点介绍七个最实用的工具包和库，并展示如何在你的下一个 React 应用中使用它们。其中一些很受欢迎，一些则鲜为人知，但其中任何一个都能满足你下一个 React 项目的独特需求。

LogRocket 免费试用横幅

1. Shards React

Shards React是由 DesignRevision 创建的全新 UI 库。它完全遵循现代开发最佳实践，并实现了极快的性能。

碎片反应

开始使用 Shards React 非常容易。

npm i shards-react
Enter fullscreen mode Exit fullscreen mode

现在，我们可以导入组件和所需的样式：

import { Button } from "shards-react"
import "shards-ui/dist/css/shards.min.css"

function ButtonsEx() {
    return (
        <div>
            <Button>Primary</Button>
            <Button theme="info">Info</Button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

这些命令将显示两个按钮，每个按钮都采用 Shards UI 样式。

如您所见，Shards 使用起来非常简单。请参阅文档，了解有关 Shards 及其组件的更多信息。

2. React Suite

React Suite是另一个很棒的 React UI 套件，顾名思义，它是一套 React 组件。它拥有合理的 UI 设计和友好的开发体验，专为中端平台和后端产品设计。

React 套件

在GitHub上查看。

该套件使用起来非常简单。首先，通过 pm 安装它。

npm i rsuite --save
Enter fullscreen mode Exit fullscreen mode

React Suite 拥有海量组件。要使用其中某个组件，只需从 重构即可rsuite。

要从庞大的组件池中使用某个组件，我们只需从 rsuite 中对其进行解构即可。

import { Button } from "rsuite"
Enter fullscreen mode Exit fullscreen mode

3. PrimeReact

PrimeReact是我见过的最出色的 React UI 套件之一。它拥有超过 70 个组件可供选择，能够显著加速前端设计和开发。

PrimeReact

该 UI 套件由PrimeTek Informatics构建。

除了各种各样的组件外，PrimeReact 还具有自定义主题、高级应用程序模板、a11y 以及响应式和触摸式 UI 组件，可在任何设备上提供出色的 UI 体验。

有关更多详细信息，请查看GitHub上的 PrimeReact 。

该套件易于安装和使用。

npm i primereact --save
Enter fullscreen mode Exit fullscreen mode

对于图标，您可以下载 PrimeIcons 库。

npm i primeicons --save
Enter fullscreen mode Exit fullscreen mode

要使用组件，请在组件文档的导入部分导入它。

import { Button } from "primereact/button"

function PrimeButtonEx() {
    return (
        <div>
            <Button>Button</Button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

4. 索环

Grommet是一个基于 React 的 UI 库，它兼具设计与框架的双重功能。它拥有一系列优秀的组件，让您轻松上手。此外，它还提供了强大的主题工具，让您可以根据所需的布局、颜色和类型定制组件库。

索环用户界面

Grommet 设计套件是一款拖放式工具，可让您轻松设计布局和组件。它包含丰富的贴纸、应用模板和图标。

索环 UI 设计

要设置 Grommet，请在 React 应用中运行以下命令。

npm i grommet
Enter fullscreen mode Exit fullscreen mode

要使用诸如 之类的组件Button，请将其从"grommet"包中解构。

import { Grommet, Button } from "grommet"

function GrommetButtonEx() {
    return (
        <Grommet className="App">
            <Button
                label="Button" 
            />
        </Grommet>
    )
}
Enter fullscreen mode Exit fullscreen mode

5. 温泉UI

如果您想让您的 Web 应用拥有原生体验，那么这个 UI 库非常适合您。Onsen UI旨在通过类似移动设备的体验来丰富用户体验。它包含许多功能，可提供原生 iOS 和 Android 设备的 UI 体验。

温泉用户界面

Onsen 的 UI 元素和组件采用原生设计，非常适合开发混合应用和 Web 应用。该库可以模拟页面过渡、动画、涟漪效果、弹出模型——基本上，所有原生 Android 和 iOS 设备上都能找到的效果。

Onsen UI 示例

在 React 应用中使用 Onsen非常简单。首先，安装 npm 包。

npm i onsenui react-onsenui --save
Enter fullscreen mode Exit fullscreen mode

onsenui包含 Onsen UI 核心实例。react-onsenui包含 React 组件。

import { Page, Button } from "react-onsenui"

function OnsenButtonEx() {
    return (
        <Page>
            <Button> Click Me!!</Button>
        </Page>
    )
}
Enter fullscreen mode Exit fullscreen mode

然后，导入 onsen CSS。

import "onsenui/css/onsenui.css"
import "onsenui/css/onsen-css-components.css"
Enter fullscreen mode Exit fullscreen mode

我亲切地将 Onsen UI 称为网络的原生 CSS。

6.Material-UI

Material-UI 基于 Google 的 Material Design，提供使用 Material Design 构建的 React 组件。

材料用户界面

要安装，请运行以下命令。

npm i @material-ui/core
Enter fullscreen mode Exit fullscreen mode

接下来，从 导入您想要使用的组件@material-ui/core。

import Button from "@material-ui/core/Button"

function MatButtonEx() {
    return (
        <div>
            <Button color="primary">
                Button
            </Button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

Material-UI 还提供精美的高级主题和模板，您可以购买它们来启动您的项目。

在GitHub上查找源代码。

7. React Bootstrap

顾名思义，React Bootstrap提供使用世界上最流行的 CSS 框架 Bootstrap 构建的 React 组件。

React Bootstrap 做得很好，它移除了 Bootstrap JavaScript 的大部分依赖项，例如 jQuery，并且在构建时充分考虑了兼容性和 a11y 特性。它还附带了各种各样的组件。

反应引导

要在您的项目中安装 React Bootstrap，请运行以下命令。

npm i react-bootstrap
Enter fullscreen mode Exit fullscreen mode

您可以导入单个组件：

import Button from "react-bootstrap/Button"

function BootstrapButtonEx() {
    return (
        <div>
            <Button>
                Click Me
            </Button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

查看GitHub上的源代码。

荣誉奖

以下是一些不太流行但值得一提的 UI 库。

结论

在本指南中，我们涵盖了 React UI 套件的全面列表——从像 Shard 这样的创新新秀，到像 Google 的 Material Design 和 Twitter 的 Bootstrap 这样的热门老牌套件，应有尽有。我们还列出了一些虽然不那么热门，但仍然功能强大的 React UI 套件。

现在您应该拥有为下一个 React 项目选择正确的 UI 工具包所需的基本基础知识。

全面了解生产 React 应用程序

调试 React 应用可能很困难，尤其是当用户遇到难以复现的问题时。如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket。

替代文本

LogRocket就像 Web 应用的 DVR，可以记录 React 应用上发生的所有事件。您无需猜测问题发生的原因，而是可以汇总并报告问题发生时应用程序的状态。LogRocket 还可以监控应用的性能，并报告客户端 CPU 负载、客户端内存使用情况等指标。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。LogRocket 会记录 Redux 存储中的所有操作和状态。

实现 React 应用程序调试方式的现代化 —开始免费监控。

文章“React 的 7 大 UI 库和工具包”首先出现在LogRocket 博客上。

文章来源：https://dev.to/logrocket/top-7-ui-libraries-and-kits-for-react-4hga
Devto 翻译
PREV
🚀 10+ 个有望赢得 2024 年黑客马拉松的项目🏆💻
NEXT
我在 SRE 面试中提出的问题