在 React 应用程序中导入 Bootstrap CSS

1. 在 React 中导入和使用 Bootstrap CSS 来设置 create-react-app
2. 在 React 中导入和使用 Bootstrap CSS 进行自定义 Webpack 配置

从头开始创建和设置 React 组件的样式可能是一个耗时的过程。这就是为什么这么多 React 开发人员依赖像 Bootstrap 这样的外部库来设置他们的组件样式的原因。

这些库激发了 UI 组件的样式，例如按钮和输入字段。

安装 Bootstrap 不会使其样式在你的应用程序中自动可用；你仍然需要导入库。

在你的 React 应用程序中使用 Bootstrap 的确切过程取决于你的设置和环境。本文将探讨使库在你的应用程序中可用的最常见解决方案。

在 React 中导入和使用 Bootstrap CSS 来设置 create-react-app

create-react-app 设置使导入和使用 Bootstrap CSS 变得容易。如果你像大多数初学者 React 开发人员一样使用此环境，那么你只需遵循简单的步骤。

首先，你必须安装 Bootstrap。

npm install bootstrap

下一步是导入 CSS 文件。为此，你必须使用 import 语句。

你必须在 index.js 文件中导入 Bootstrap CSS 文件，该文件包含整个组件树。一旦你找到了这个文件，你所要做的就是在顶部添加 import 语句。

import 'bootstrap/dist/css/bootstrap.min.css';

完成后，你可以使用 Bootstrap CSS 中的样式和类。请记住，在 React 中，class 是一个保留字，因此我们使用 className 属性将类应用于元素。

在 React 中导入和使用 Bootstrap CSS 进行自定义 Webpack 配置

如果你使用自定义 webpack 配置，你必须找到配置文件并将另一个对象添加到 loaders 数组。实物如下。

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
 }

你还需要安装 Bootstrap 库本身。

一旦你安装了它并编辑了 webpack 配置，就只剩下一步了。你必须在 index.js 文件中导入 Bootstrap CSS 和 JS 文件。

找到文件后，应在顶部添加以下内容。

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

完成后，你可以在 React 中使用样式和基于 jQuery 的元素。但是，React 不能很好地与 jQuery 和其他 JavaScript 工具配合使用。

这是因为 jQuery 和类似的库在 React 框架的边界之外改变了状态，这使得 React 很难跟踪状态变化。所以避免在 React 中使用基于 jQuery 的元素。

用于 React 的 Bootstrap 库

许多 Web 开发人员喜欢使用 Bootstrap 的稳定性和灵活性。然而，正如我们之前提到的，CSS 库不能很好地与 React 结合。

有两个优秀的库受 Bootstrap 的启发，但被定制为与 React 兼容。

react-bootstrap 库是 Bootstrap 的修订版。它提供了自定义组件，而不是传统的 jQuery 和 CSS，这些组件提供了许多主要的库功能。

它允许开发人员自定义 React 应用程序的感觉、功能和外观。该包是轻量级的，更重要的是，它允许你导入特定的模块。

例如，如果你不需要其他任何东西，你可以只导入自定义的 Button 组件。

reactstrap 是另一个库，旨在在你的 React 应用程序中提供 Bootstrap 的特性和功能。你可以使用 npm 安装它或通过 CDN 包含它。

这个库没有它的样式，但会对主 Bootstrap 库的样式定义做出 React。

与 react-bootstrap 一样，它允许你导入特定的自定义组件。你可以使用许多 props 来自定义自定义组件的功能和外观。

在 React 中你应该使用 Bootstrap

许多 React 开发人员选择其他替代方案，例如 Material UI 而不是受 Bootstrap 影响的库。

尽管 react-bootstrap 和 reactstrap 库提供了很多定制机会，但它们的组件仍然只接受有限数量的 props，这可能会限制某些人。

一般来说，在这里和那里使用 Bootstrap CSS 没有任何问题。但是，如果你只使用少量的 Bootstrap CSS，那么导入整个库可能不值得。

最好找另一个框架或自己编写那些自定义样式。