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

查看使用react-bootstrap的文档 。

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

如果您真的担心更改webpack配置的可能性，我会敦促您检查roadhog 。 它是create-react-app的可配置替代品

Answer 2

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

安装引导程序和依赖项：

npm install bootstrap jquery popper.js --save

然后在你的app入口点（ 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 ，你不需要弹出。

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

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