在 create-react-app 中，添加 Bootstrap 4？

Posted 2023-03-23

【中文标题】在 create-react-app 中，添加 Bootstrap 4？

【英文标题】：In create-react-app, adding Bootstrap 4?

【发布时间】：2018-06-12 15:54:38

【问题描述】：

由于 create-react-app 隐藏了 Webpack 配置而不必使用 eject，如果我想使用 reactstrap 或 react-bootstrap 之类的东西，我应该弹出还是不弹出就可以了？

只是好奇人们会在什么时候决定何时需要eject 才能使用他们需要的东西？在我的应用程序的这一点上，我只是在进行原型设计，但它会随着更多的依赖关系和诸如此类的东西走得更远。

【问题讨论】：

如果可以的话，尽量不要弹出。我没有看到任何需要修改 webpack 的 react-bootstrap

【参考方案1】：

使用 create-react-app 时，您无需弹出或编辑 webpack 配置即可使用 react-bootstrap。

安装 react-bootstrap

npm install --save react-bootstrap bootstrap@3

您必须单独导入 css，方法是将其添加到 src/index.js 的顶部

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

查看documentation for using react-bootstrap。

大多数依赖项都可以在不更改 webpack 配置的情况下添加。您可以添加包并开始使用它们。

如果您真的担心更改 webpack 配置的可能性，我建议您查看 roadhog。它是 create-react-app 的可配置替代方案

【讨论】：

我认为我们需要强调这必须在 first 行。

【参考方案2】：

现在使用最新版本的引导程序更容易：https://getbootstrap.com/docs/4.1/getting-started/webpack/

安装引导程序和依赖项：

npm install bootstrap jquery popper.js --save

然后在您的应用入口点 (index.js) 中导入引导程序和 css：

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

一切顺利！

编辑

create-react-app 文档中现在有一个部分：https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

如果您更愿意使用它们，他们会提到 react-bootstrap 和 reactstrap，并且您不需要弹出。

【讨论】：

希望我早点看到这个，谢谢！在升级过程中，它一直在寻找不应该的东西

问题在于，许多人试图避免使用 jquery 或将其与他们的项目混合使用。

为什么要添加 jquery ？这不违反 React 原则吗？或者这是 bootstrap 的必备工具？

是的 jquery 是引导程序所必需的。有不需要 jquery 的 react-bootstrap，但它只在 bootstrap 3：react-bootstrap.github.io

【参考方案3】：

首先，在您的应用程序中安装引导程序的最新版本。

//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save

注意：jQuery 和 popper.js 是 bootstrap 的依赖。

在你的根目录下的 index.js 中添加下面一行

//Include bootstrap's css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

在 webpack.config.dev.js（寻找插件并添加以下代码）

new webpack.ProvidePlugin(
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
)

所以它看起来像这样。

plugins: [
  ....
  new webpack.ProvidePlugin(
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
  )
]

【讨论】：

谢谢。虽然这样可行，但我更喜欢不使用 JQuery 实现。也就是说，在 React 中，我发现 reactstrap做得很好。

【参考方案4】：

有一个名为“reactstrap”https://reactstrap.github.io/ 的项目，其中包含将 Bootstrap 与 React 集成所需的所有步骤

npm install bootstrap --save
npm install --save reactstrap react react-dom

在 src/index.js 文件中导入 Bootstrap CSS：

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

在 src/App.js 文件或您的自定义组件文件中导入所需的 reactstrap 组件：

import  Button  from 'reactstrap';

【讨论】：

谢谢，我就是这么做的。

【参考方案5】：

对于 BS5，新的且尚未稳定。

npm i bootstrap@5.0.0-alpha1 --save

然后在 index.js 文件中

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