React Bootstrap 安装

React Bootstrap 是一个基于组件的库，它在纯 React 组件中提供原生的 Bootstrap 功能。它将所有的 JavaScript 函数转换为 React，并将它们与组件捆绑在一起，而不是使用 Bootstrap JavaScript 库。

React Bootstrap 与所有 Bootstrap 主题兼容，以提供一致的用户界面。

但是，我们可以通过在 React 组件中定义 claasName 属性来使用传统的 Bootstrap 库和类。但这对于 React JS 开发者来说不是一个好的方法。它不能充分利用 React 作为你首选的 UI 框架的优势。

React Bootstrap 组件不会将整个 Bootstrap 库渲染到你的网页上；相反，它只渲染使用的组件。这就是为什么在 React JS 中，首选使用 React Bootstrap。

让我们了解如何在 React 项目中安装 React Bootstrap。

创建一个 React 应用

在安装 React Bootstrap 之前，让我们创建一个 React 应用。

要创建一个 React 应用，创建一个目录，打开你的终端，并导航到你想创建 React 应用的目录。现在，执行以下命令

上面的命令将显示以下确认消息；输入 Y 并按 Enter 键继续。

它将启动一个守护进程，该进程将安装 React 应用所需的必要包和 Node 模块。如果成功执行，上面的命令将显示以下输出

Creating a new React app in E:\jtp\React-App\myapplication.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1364 packages in 5m

169 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at tryGitInit (E:\jtp\React-App\myapplication\node_modules\react-scripts\scripts\init.js:46:5)
    at module.exports (E:\jtp\React-App\myapplication\node_modules\react-scripts\scripts\init.js:276:7)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:305:38)
    at node:internal/process/execution:75:19
    at [eval]-wrapper:6:22
    at evalScript (node:internal/process/execution:74:60) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 12040,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 33 packages in 16s

169 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1397 packages in 8s

169 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created myapplication at E:\jtp\React-App\myapplication
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    , and scripts into the app directory. If you do this, you can't go back!

We suggest that you begin by typing:

  cd myapplication
  npm start

Happy hacking!

如果你能在你的终端中看到上面的输出。这意味着 React 应用已在你的目录中成功创建。

现在我们可以运行上面的应用程序来测试它是否成功创建。

要运行 React 应用，通过执行以下命令，从你的终端将目录更改为创建的应用

上面的应用程序会将目录更改为我们的 React 应用程序。 现在，通过执行以下命令来运行 React 应用程序

上面的应用程序将启动节点服务器，并在 localhost 上渲染默认的应用程序数据。 默认情况下，React 应用程序使用端口 3000 来提供应用程序数据。 但是，可以通过在 package.json 文件中指定端口号来更改端口号。

要访问应用程序数据，请打开 Web 浏览器并导航到以下地址

你将能够看到以下输出

现在我们已经成功创建了 React 应用程序。 React 应用程序的基本结构如下

从 App.js 文件中删除默认代码。 它看起来如下所示

我们将使用此项目来渲染 Bootstrap 组件。要了解有关 React 项目结构和安装过程的更多信息，请访问我们的 React JS 教程。

现在，在此项目中安装 React Bootstrap。

安装 React Bootstrap

将 React Bootstrap 库导入到你的项目的最佳方式是使用 npm 包，可以使用 npm 命令安装它。 执行以下命令将 React Bootstrap 安装到你的项目中

它将根据指定的版本安装 React Bootstrap 和 Bootstrap 两个包。 例如，我们正在安装 Bootstrap 版本 5.1.3。 如果上面的命令成功执行，你将能够看到以下输出

added 23 packages, and audited 1420 packages in 21s

171 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

我们可以从上面的输出中看到，Bootstrap 包已添加到我们的项目中。 要验证，请打开 package.json 文件； 在这里，我们可以找到 React Bootstrap 库的条目。

现在，React Bootstrap 已成功安装在我们的项目中。

添加样式表

React Bootstrap 组件不包含要提供的样式； 我们必须将 Bootstrap 样式表添加到我们的应用程序中。 要添加样式表，请将它们导入到你的 app.js 或 index.js 文件中。 要导入 CSS 文件，请在文件的导入部分（顶部）中包含以下行

我们也可以使用 CDN 来添加样式表。 要使用 CDN 包含样式表，请将以下 link 标签添加到你的 index.html 文件的 head 中

导入 Sass 文件

如果你想使用 Sass 文件而不是 CSS 文件，使用 Sass 文件最简单的方法是包含 Bootstrap 的 Sass 文件。 必须在 src/index.js 文件或 App.js 文件中要求 Sass 文件。

要使用 Sass 文件而不是 CSS 文件，请在 App.js 文件中导入以下文件

此外，在 Index.js 或 App.js 文件中包含以下文件

它将在你的项目中包含 Bootstrap SCSS 文件。

自定义 Bootstrap 文件

我们可以通过添加自定义 CSS 或 SCSS 文件来自定义现有的 Bootstrap 文件。 要自定义现有的 Bootstrap 文件，请在自定义文件中编写 CSS，如下所示

它将覆盖现有的 CSS。 确保将自定义 CSS 文件包含在 Bootstrap 文件下方，并将其导入到 index.js 或 app.js 文件中。

Bootstrap 组件中的 "AS" Prop

"as" prop 允许我们修改渲染组件的行为。 借助 as prop，我们可以保留特定 Bootstrap 组件的所有样式，但将其切换到将要渲染的不同组件。

例如，我们想将按钮组件渲染为 col 组件，因此我们可以使用 "as" prop 来做到这一点。

请看以下示例

导入 React Bootstrap 组件

React Bootstrap 允许我们导入单个组件。 我们可以从 Bootstrap 库中导入单个组件，例如 react-bootstrap/Button，而不是整个库。 它将仅从库中提取特定组件，并减少使用 React 的代码行数。

例如，如果我们想从 React Bootstrap 导入主按钮； 我们的 App.js 代码将如下所示

App.js

输出

从上面的输出中，我们可以看到主按钮已渲染到我们的网页上。 同样，我们可以从 React Bootstrap 库导入其他组件。