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

Question

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

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

Answer 1

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

安装反应引导

npm install --save react-bootstrap bootstrap@3

您必须通过将其添加到您的顶部来单独导入 csssrc/index.js

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

查看使用 react-bootstrap 的文档。

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

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

Answer 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，并且您不需要弹出。

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

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

Answer 5

对于BS5，新的还不稳定。

npm i bootstrap@5.0.0-alpha1 --save

然后在 index.js 文件中

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