在create-react-app中如何添加Bootstrap 4？

Question

由于 create-react-app 隐藏了 Webpack 配置而无需使用 eject，如果我想使用像 reactstrap 或 react-bootstrap 这样的东西，是否应该弹出或不弹出就可以了？

只是好奇什么时候需要决定何时需要 eject 以使用所需内容？ 在我的应用程序中，我只是原型设计，但会使用更多依赖项等等。

- Mark

---

尽可能不要强制退出。我没有看到任何关于react-bootstrap需要修改webpack的内容。 - azium

Answer 1

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

安装react-bootstrap。

npm install --save react-bootstrap bootstrap@3

您需要将以下代码添加到您的src/index.js文件顶部，单独导入CSS样式表：

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

查看使用React Bootstrap的文档。

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

如果您真的担心可能会更改webpack配置，请尝试Roadhog。这是一个可配置的create-react-app替代品。

- sudo bangbang

---

我认为我们需要强调这必须在第一行。 - Prabu

Answer 2

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

安装bootstrap及其依赖项：

npm install bootstrap jquery popper.js --save

在您的应用程序入口点（index.js）中导入bootstrap和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，并且你将不需要弹出。

- mofojed

---

希望我早点看到这个，谢谢！在升级过程中，它正在查找不应该存在的东西。 - BRogers

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

为什么要添加jQuery？这不违背React原则吗？还是说在使用Bootstrap时必须添加？ - Ragnar

是的，Bootstrap需要使用jQuery。不过也有React-Bootstrap，它不需要jQuery，但是只支持Bootstrap 3版本：https://react-bootstrap.github.io/ - mofojed

Answer 3

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

//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'] 
  })
]

- Johnsackson

---

谢谢。虽然那样做可以运行，但我更希望不使用JQuery实现。话虽如此，在React中，我发现“reactstrap”非常好用。 - Mark

Answer 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';

- sendon1982

---

谢谢，那就是我所采取的方法。 - Mark

Answer 5

对于BS5，它是新的且尚不稳定。

npm i bootstrap@5.0.0-alpha1 --save

然后在 index.js 文件中

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

- eliram9