Logo

菜单

发布于 2026-01-06 0 阅读
0

React 控制面板教程：学习如何使用 React.js 和 Bootstrap 5 构建管理界面

React 控制面板教程：学习如何使用 React.js 和 Bootstrap 5 构建管理界面

在本教程中，我将向您展示如何使用 React.js 和最新版本的 Bootstrap 5 编写的仪表盘来构建交互式 Web 应用程序。完成本教程后，您将了解如何创建页面、使用和创建 React 组件以及自定义应用程序的外观。

React 控制面板教程

在开始之前，让我先介绍一下本教程中将要用到的两种主要技术。

React.js

React 是世界上最流行的 Web 前端库之一，根据 NPM 趋势追踪器的数据，其每月下载量接近 3000 万次。它是一个声明式、基于组件的库，利用所谓的状态（state）将更改传播到应用程序的各个组件。

Bootstrap 5

你可能听说过世界上最流行的 CSS 框架 Bootstrap。但你或许不知道，几个月前 Bootstrap 发布了新版本，不再依赖 jQuery，引入了 RTL 支持、实用 API，并在样式和标记方面进行了改进。我们还撰写了一篇关于 Bootstrap 5 的详细教程，如果你想了解更多信息，可以参考一下。

本教程将以我们 Themesberg 开发的免费开源后台管理面板模板为起点。该模板基于上述两种技术构建：React.js 和 Bootstrap 5。

下载并安装 Volt React 仪表盘

本教程的第一步是下载我们将要使用的基础项目，这是一个使用 React.js 和 Bootstrap 5 构建的管理仪表盘界面。您可以在 Themesberg 创建一个免费帐户并直接下载，或者从官方 Github 存储库克隆该项目。

Volt React 仪表盘

解压缩文件（如果您已下载）后，请使用终端并进入项目根目录。本教程将使用“yarn”来安装依赖项并进行项目开发。

运行程序yarn -v以确保已安装。

步骤 1：安装项目依赖项

成功安装 Yarn 后，运行以下命令安装项目依赖项：

yarn install
Enter fullscreen mode Exit fullscreen mode

这将安装第三方库，例如 React、Bootstrap 以及本项目所需的其他项目。

步骤 2：运行开发模式

现在依赖项已经安装完毕，您可以开始使用控制面板了。但首先，您需要运行以下命令：

yarn start
Enter fullscreen mode Exit fullscreen mode

这将打开一个本地开发服务器，您的更改将在此服务器上生效并编译。默认浏览器中将打开一个新窗口，地址为指定http://localhost:3000地址。如果未自动打开，请直接在浏览器地址栏中输入地址。

如果您更喜欢使用 NPM 而不是 Yarn，您可以按照官方存储库中的说明，通过 NPM 安装 Volt React Dashboard。

了解项目结构

在开始构建新组件和编写代码之前，让我们先浏览一下项目文件，了解其底层工作原理：

  • public/此文件夹包含 index.html 文件，其中包含了编译后的 Javascript，您还可以在此处调整页面属性，例如标题、属性、网站图标等等。您也可以在此处添加图片等资源，但我们建议通过 src/ 文件夹的导入功能添加资源；
  • src/：您将在此文件夹中编写大部分代码，因为它是您正在构建的应用程序的源代码。资源、组件、数据、页面、路由，甚至样式表都可以在这里找到；
  • src/assets/：这是您应该放入图像、字体以及您将导入到应用程序中的任何其他静态资源的文件夹；
  • src/components/：我们建议在此文件夹中构建新的组件，这些组件将在整个项目中用作 UI 元素；
  • src/data/这是数据应该来自的文件夹，虽然官方存储库中只有以对象数组形式提供的虚拟数据，但数据文件夹应该包含应用程序后端的 API 调用；
  • src/pages/：此文件夹包含您的应用程序页面，这些页面已在 routes.js 文件中注册为路由；
  • src/scss/在这里，您可以编写和修改应用程序的样式表，还可以更改 Sass 变量和 mixin，从而轻松无缝地改变项目的外观；
  • src/index.js这是主包装文件，项目的路由和基本布局都组合在一起；
  • src/routes.js这是您首先声明应用程序路由的文件，稍后会在 Homepage.js 组件中注册，该组件将从 index.js 文件渲染；
  • package.json这是一个重要的文件，其中包含项目依赖项、构建生产代码时项目的基本 URL，以及一些可以通过 NPM 使用的有用脚本；
  • node_modules/：这是运行 yarn install 后所有依赖项将要安装的文件夹；
  • .gitignore在这里，您可以添加要被 git 版本控制系统忽略的文件或文件夹，例如 node_modules 文件夹。

现在我们已经分解了文件夹结构，并简要解释了每个文件夹和文件的作用，让我们继续本教程，从创建一个新的 React 组件开始。

探索 React UI 组件

我之所以选择 Volt React Dashboard 项目作为本教程的教程，是因为它提供了大量的 UI 组件和页面，您可以立即使用这些组件和页面来构建新的页面和界面，而无需事先自己构建。

Volt React按钮组件

要开始探索此项目的 UI 元素，只需转到组件侧边栏，即可查看所有组件，例如手风琴、按钮、警告框、模态框等等。您可以查看上面示例中的按钮组件示例。

我建议您花些时间仔细查看所有组件，阅读文档，并尝试修改代码。正如您所见，示例是可以编辑的，更改会反映在说明文字下方的渲染框中。

例如，尝试将第一个按钮的 variant 属性从 primary 改为 secondary，你会发现第一个按钮也会变成蓝色，和第二个按钮一样。这将让你更好地了解以后使用这些 UI 元素有多么容易。

创建新页面

在您了解了用户界面组件之后，接下来我们将向您展示如何创建一个全新的页面，向其中添加新组件，将其注册为路由并将其添加到侧边栏。您将创建一个用于显示用户列表的页面。

用户页面 React.js

步骤 1：创建一个新文件

第一步是在pages/文件夹内创建一个新文件，并将其命名为Users.js。在该文件中创建一个新类，并导入 React：

import React from "react";

export default () => {
    return (
        <></>
    );
};
Enter fullscreen mode Exit fullscreen mode

步骤 2：声明并注册路由

现在我们来注册一条路由。打开routes.jssrc 文件夹下的文件，并在 Routes 常量中添加以下代码行：

Settings: { path: "/settings" },
Upgrade: { path: "/upgrade" },
Users: { path: "/users" }, // add it here
BootstrapTables: { path: "/tables/bootstrap-tables" },
Billing: { path: "/examples/billing" },
Enter fullscreen mode Exit fullscreen mode

现在转到文件夹Homepage.js中的文件src/pages/，导入该Users.js文件，并在 Homepage 组件的 render 方法中声明一个新<RouteWithSidebar>组件，并将 Users 组件与路由选项连接起来route.js：

// import at the top of Homepage.js
import Users from "./Users";
Enter fullscreen mode Exit fullscreen mode

在渲染方法中：

<RouteWithSidebar exact path={Routes.Settings.path} component={Settings} />
<RouteWithSidebar exact path={Routes.Users.path} component={Users} /> {/* register this new route */}
<RouteWithSidebar exact path={Routes.BootstrapTables.path} component={BootstrapTables} />
Enter fullscreen mode Exit fullscreen mode

如果您现在访问该页面，http://localhost:3000/#/users您将看到一个空白的新页面，其中包含侧边栏、导航和页脚。

步骤 3：使用 React 组件构建页面

做得好！现在你已经创建了一个新页面，可以使用 Volt React Dashboard 项目提供的 UI 元素自由地构建它。页面需要标题、描述和一些面包屑导航元素。请将以下代码添加到 Users 组件的 render 方法中：

<div className="d-lg-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
    <div className="mb-4 mb-lg-0">
        <Breadcrumb className="d-none d-md-inline-block" listProps={{ className: "breadcrumb-dark breadcrumb-transparent" }}>
            <Breadcrumb.Item><FontAwesomeIcon icon={faHome} /></Breadcrumb.Item>
            <Breadcrumb.Item>Volt</Breadcrumb.Item>
            <Breadcrumb.Item active>Users List</Breadcrumb.Item>
        </Breadcrumb>
        <h4>Users List</h4>
        <p className="mb-0">Your web analytics dashboard template.</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

如果你打开浏览器，会看到一些错误信息，提示某些组件未定义。你只需要在文件顶部导入这些组件即可：

import React from "react";
import { Breadcrumb } from "@themesberg/react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome } from '@fortawesome/free-solid-svg-icons';
Enter fullscreen mode Exit fullscreen mode

React 用户组件

现在返回浏览器，你会看到页面上添加了面包屑导航组件、标题和描述。

接下来，我们将添加一些功能，让您可以搜索、更新列表或向列表中添加新用户：

<div className="d-lg-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
    <div className="mb-4 mb-lg-0">
        <Breadcrumb className="d-none d-md-inline-block" listProps={{ className: "breadcrumb-dark breadcrumb-transparent" }}>
            <Breadcrumb.Item><FontAwesomeIcon icon={faHome} /></Breadcrumb.Item>
            <Breadcrumb.Item>Volt</Breadcrumb.Item>
            <Breadcrumb.Item active>Users List</Breadcrumb.Item>
        </Breadcrumb>
        <h4>Users List</h4>
        <p className="mb-0">Your web analytics dashboard template.</p>
    </div>
    <div className="btn-toolbar mb-2 mb-md-0">
        <Button variant="primary" size="sm">
            <FontAwesomeIcon icon={faPlus} className="me-2" /> Add New User
        </Button>
        <ButtonGroup className="ms-3">
            <Button variant="outline-primary" size="sm">Share</Button>
            <Button variant="outline-primary" size="sm">Export</Button>
        </ButtonGroup>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

别忘了继续导入组件：

import React from "react";
import { Breadcrumb, Button, ButtonGroup } from "@themesberg/react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faPlus } from '@fortawesome/free-solid-svg-icons';
Enter fullscreen mode Exit fullscreen mode

接下来，我们继续利用 Bootstrap 网格系统，在其他元素下方添加一个搜索表单输入框、一个下拉列表元素和两个图标下拉列表项：

<div className="table-settings mb-4">
    <Row className="justify-content-between align-items-center">
        <Col xs={9} lg={4} className="d-flex">
            <InputGroup className="me-2 me-lg-3">
                <InputGroup.Text>
                    <FontAwesomeIcon icon={faSearch} />
                </InputGroup.Text>
                <Form.Control type="text" placeholder="Search" />
            </InputGroup>
            <Form.Select className="w-25">
                <option defaultChecked>All</option>
                <option value="1">Active</option>
                <option value="2">Inactive</option>
                <option value="3">Pending</option>
                <option value="3">Canceled</option>
            </Form.Select>
        </Col>
        <Col xs={3} lg={8} className="text-end">
            <Dropdown as={ButtonGroup} className="me-2">
                <Dropdown.Toggle split as={Button} variant="link" className="text-dark m-0 p-0">
                    <span className="icon icon-sm icon-gray">
                        <FontAwesomeIcon icon={faSlidersH} />
                    </span>
                </Dropdown.Toggle>
                <Dropdown.Menu className="dropdown-menu-right">
                    <Dropdown.Item className="fw-bold text-dark">Show</Dropdown.Item>
                    <Dropdown.Item className="d-flex fw-bold">
                        10 <span className="icon icon-small ms-auto"><FontAwesomeIcon icon={faCheck} /></span>
                    </Dropdown.Item>
                    <Dropdown.Item className="fw-bold">20</Dropdown.Item>
                    <Dropdown.Item className="fw-bold">30</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
            <Dropdown as={ButtonGroup}>
                <Dropdown.Toggle split as={Button} variant="link" className="text-dark m-0 p-0">
                    <span className="icon icon-sm icon-gray">
                        <FontAwesomeIcon icon={faCog} />
                    </span>
                </Dropdown.Toggle>
                <Dropdown.Menu className="dropdown-menu-right">
                    <Dropdown.Item className="fw-bold text-dark">Show</Dropdown.Item>
                    <Dropdown.Item className="d-flex fw-bold">
                        10 <span className="icon icon-small ms-auto"><FontAwesomeIcon icon={faCheck} /></span>
                    </Dropdown.Item>
                    <Dropdown.Item className="fw-bold">20</Dropdown.Item>
                    <Dropdown.Item className="fw-bold">30</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
        </Col>
    </Row>
</div>
Enter fullscreen mode Exit fullscreen mode

导入语句应该如下所示：

import React from "react";
import { Breadcrumb, Button, ButtonGroup, Row, Col, InputGroup, Form, Dropdown } from "@themesberg/react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faPlus, faCog, faCheck, faSearch, faSlidersH } from '@fortawesome/free-solid-svg-icons';
Enter fullscreen mode Exit fullscreen mode

做得好！现在你已经添加了此页面顶部的所有必要元素。在你的浏览器中，最终效果应该如下图所示。

React 用户搜索

现在我们需要创建一些元素来显示每个用户，包括他们的头像、姓名、邮箱和公司职位。我们先来创建一个空表：

<Card border="light" className="table-wrapper table-responsive shadow-sm">
    <Card.Body>
        <Table hover className="user-table align-items-center">
            <thead>
                <tr>
                    <th className="border-bottom">Name</th>
                    <th className="border-bottom">Email</th>
                    <th className="border-bottom">Position</th>
                    <th className="border-bottom">User Created at</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </Table>
    </Card.Body>
</Card>
Enter fullscreen mode Exit fullscreen mode

添加以下导入语句，确保包含所有组件：

import React from "react";
import { Breadcrumb, Button, ButtonGroup, Row, Col, InputGroup, Form, Dropdown, Card, Table } from "@themesberg/react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faPlus, faCog, faCheck, faSearch, faSlidersH } from '@fortawesome/free-solid-svg-icons';
Enter fullscreen mode Exit fullscreen mode

结果应该如下所示：

React 用户组件为空

让我们添加一行用户数据并设置相应的值。请在<tbody>元素内添加以下代码：

现在我们需要创建一些元素来显示每个用户，包括他们的头像、姓名、邮箱和公司职位。我们先来创建一个空表格：

<tr> <td> <Card.Link className="d-flex align-items-center"> <Image src={Thomas} className="user-avatar rounded-circle me-3" /> <div className="d-block"> <span className="fw-bold">Thomas Shelby</span> </div> </Card.Link> </td> <td>[email protected]</td>
    <td>Boss</td>
    <td>January 20, 1921</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

别忘了添加导入项：

import React from "react";
import { Breadcrumb, Button, ButtonGroup, Row, Col, InputGroup, Form, Image, Dropdown, Card, Table } from "@themesberg/react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faPlus, faCog, faCheck, faSearch, faSlidersH } from '@fortawesome/free-solid-svg-icons';
import Thomas from "../assets/img/team/thomas.jpg"
Enter fullscreen mode Exit fullscreen mode

我们下载了一张《浴血黑帮》中我们最喜欢的角色的图片。您可以选择自己喜欢的角色，但请务必将其添加到assets/img/team文件夹中，并相应地导入到Users.js文件中。

结果应该类似于这样：

React 用户单

太棒了！现在表格里已经有了一个用户。但问题是，以后用户数量可能会更多，在组件的渲染方法里手动编写这段代码可能不太明智，所以应该从数据源获取数据，最好是 API。在这个例子中，我们只使用对象数组，但通常情况下，数据应该来自数据库。

在数据文件夹中创建一个名为 `.data` 的新文件users.js，并添加以下代码：

import Thomas from "../assets/img/team/thomas.jpg"
import Arthur from "../assets/img/team/arthur.jpg"
import Polly from "../assets/img/team/polly.jpeg"
import John from "../assets/img/team/john.jpeg"
import Grace from "../assets/img/team/grace.jpg" export default [{ "key": 1, "image": Thomas, "name": "Thomas Shelby", "email": "[email protected]", "position": "Boss", "dateCreated": "January 20, 1921", }, { "key": 2, "image": Arthur, "name": "Arthur Shelby", "position": "Second boss", "email": "[email protected]", "dateCreated": "March 20, 1917", }, { "key": 3, "image": Polly, "name": "Polly Gray", "position": "Company treasurer", "email": "[email protected]", "dateCreated": "March 20, 1912", }, { "key": 4, "image": John, "name": "John Shelby", "position": "Fixer", "email": "[email protected]", "dateCreated": "December 20, 1924", }, { "key": 5, "image": Grace, "name": "Grace Shelby", "position": "Miscellaneous", "email": "[email protected]",
        "dateCreated": "April 20, 1921",
    },
];
Enter fullscreen mode Exit fullscreen mode

Users.js然后，像这样将这些数据导入到文件中：

import users from '../data/users';
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要遍历用户数组，并将变量注入到相应的表格数据元素中。请用以下代码替换之前包含<tr>Thomas 的元素：

{users.map(u => (
    <tr key={u.key}>
        <td>
            <Card.Link className="d-flex align-items-center">
                <Image src={u.image} className="user-avatar rounded-circle me-3" />
                <div className="d-block">
                    <span className="fw-bold">{u.name}</span>

                </div>
            </Card.Link>
        </td>
        <td><span className="fw-normal"><div className="small text-gray">{u.email}</div></span></td>
        <td><span className="fw-normal"><div className="small text-gray">{u.position}</div></span></td>
        <td><span className="fw-normal">{u.dateCreated}</span></td>
    </tr>
))}
Enter fullscreen mode Exit fullscreen mode

这里我们所做的，是让该users.map方法遍历data/users.js数据集中的每个用户，并为每个用户创建一个新的表格行元素，同时将数据添加到相应的表格数据元素中。结果应该如下所示：

React 用户组件

恭喜！现在你已经学会了如何使用 React 组件和数据源构建新页面、数据源并显示多个用户。

下一节我将向您展示如何使用 Sass 变量轻松更改仪表板的外观。

使用 Sass 变量进行自定义

您很可能需要更新应用程序的外观，例如颜色、字体以及其他一些设置。幸运的是，由于使用了 Sass 源文件，这可以轻松实现。我们来把蓝色改成红色。

使用 React 自定义 Sass

请前往src/scss/volt/_variables.scss并更新以下值：

$secondary: #E2252B;

$ct-series-colors: (
    #E2252B,
    #E2252B,
    #262B40,
    #f5b759,
    #C96480,
    #ffffff,
    #E2252B,
);
Enter fullscreen mode Exit fullscreen mode

你只需保存文件，打开浏览器，就会发现所有蓝色都变成了红色，包括图表。是不是很神奇？你可以使用变量更改许多其他选项，也可以编写新的样式。

编写代码并将其上传到服务器

您已经安装了项目，创建了新页面，使用了数据源，甚至还自定义了项目的外观。但是，如果您无法将其上传到网上，让大家都能看到您的杰作，那么这些努力就没什么意义了，对吗？

要创建最终项目，您只需将package.json文件中的 homepage 值更新为与您拥有的域名路径相等即可：

"homepage": "https://demo.themesberg.com/volt-react-dashboard",
Enter fullscreen mode Exit fullscreen mode

在我们的例子中，我们将其上传到了 demo.themesberg.com 子域名的子目录中，但也可以是像 example.com 这样的子域名。

然后您需要在终端中运行以下命令：

yarn build
Enter fullscreen mode Exit fullscreen mode

这将创建一个名为 build 的新文件夹。你需要将该文件夹的内容上传到你的服务器。就这么简单。

结论

恭喜！您已经学会了如何安装 React 项目、构建新页面、自定义 Sass 变量以及构建最终的生产文件。希望您收获颇丰，也希望这个控制面板能对您的前端开发职业生涯和项目有所帮助。

在你离开之前，我想向你介绍一下 Volt React Dashboard 的高级版本，与开源版本相比，它拥有两倍的组件、页面、插件以及更多功能。

Volt Premium React 仪表盘

Volt Pro React Dashboard 是一款高级管理后台模板，它基于世界上最流行的前端库 React.js 构建，其 UI 元素基于最新版本的 Bootstrap 5。它包含 200 多个 React 组件、自定义插件和示例页面，您可以利用这些资源快速启动您的 Web 应用程序开发。

文章来源：https://dev.to/themesberg/react-dashboard-tutorial-learn-how-to-get-started-with-an-admin-interface-built-with-react-js-and-bootstrap-5-2c6l
Beginner's guide ...
RESTful Web 服务简介