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

Question

因为 create-react-app 隐藏了 Webpack 配置而不必使用 eject，如果我想使用像 reactstrap 或 react-bootstrap 这样的东西，我应该弹出还是没有我会没事弹射？

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

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

查看 documentation for using react-bootstrap。

无需更改 webpack 配置即可添加大多数依赖项。您可以添加包并开始使用它们。

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

的可配置替代品

Answer 2

首先，在您的应用程序中安装 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'] 
  })
]

Answer 3

使用最新版本的 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 and reactstrap 如果你更愿意使用它，你将不需要弹出。

Answer 4

有一个名为 'reactstrap' https://reactstrap.github.io/ 的项目，其中包含将 Bootstrap 与 React

集成所需的所有步骤

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

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

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

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

import { Button } from 'reactstrap';

Answer 5

对于 BS5，新的且还不稳定。

npm i bootstrap@5.0.0-alpha1 --save

然后在 index.js 文件中

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

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

In create-react-app, adding Bootstrap 4?

twitter-bootstrap

reactjs

webpack

create-react-app

reactstrap