我是ReactJS的新手,我想在我的React应用程序中包括引导

我已经通过npm安装bootstrap -save安装了bootstrap

现在,我想在React应用程序中加载引导CSS和JS。

我正在使用webpack。

webpack.config.js

var config = {
    entry: './src/index',

    output: {
        path: './',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8080,
        historyApiFallback: true,
        contentBase:'./src'
    },

    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
               }
            }
        ]
    }
};

module. exports = config;

我的问题是“如何从节点模块中包含引导CSS和JS在ReactJS应用程序中?”如何设置引导包括在我的React应用程序?


当前回答

请按照下面的链接使用React引导。 https://react-bootstrap.github.io/

安装:

$ npm install --save react react-dom
$ npm install --save react-bootstrap

------------------------------------ 或 -------------------------------------

把Bootstrap CDN for CSS在index.html文件的标签在react和Bootstrap CDN for Js在index.html文件的标签。使用className而不是class 遵循下面的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="../src/images/dropbox_logo.svg">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">




  </head>
  <body>

    <div id="root"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  </body>
</html>

其他回答

通过npm,你会运行以下程序

npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev

如果bootstrap为4,也添加依赖项popper.js

npm install popper.js --save

将以下内容(作为一个新对象)添加到webpack配置中

loaders: [
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

将以下内容添加到索引或布局中

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
npm install --save bootstrap 

并将此import语句添加到index.js文件中

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

或者你可以简单地在index.html文件中添加CDN。

你不能在React应用程序中使用基于Jquery的Bootstrap Javascript组件,因为任何试图在React之外操作DOM的行为都被认为是糟糕的做法。在这里你可以阅读更多关于它的信息。

如何在React应用程序中包含Bootstrap:

1)推荐。您可以包括Bootstrap的原始CSS文件作为其他答案指定。

2)看看react-bootstrap库。它是专门为React编写的。

3) Bootstrap 4有反作用带

奖金

这些天我通常避免使用Bootstrap库,因为它提供了随时可用的组件(上面提到的react-bootstrap或reactstrap等等)。当您变得依赖于它们所采用的道具时(您不能在其中添加自定义行为),您就失去了对这些组件生成的DOM的控制。

所以要么只使用Bootstrap CSS,要么不使用Bootstrap。一般的经验法则是:如果你不确定你是否需要它,你就不需要它。我见过很多应用程序,其中包括Bootstrap,但只使用少量的CSS,有时大部分CSS被自定义样式覆盖。

如果你是React的新手,并且使用create-react-app命令行设置,运行下面的npm命令来包含最新版本的bootstrap。

npm install --save bootstrap

or

npm install --save bootstrap@latest

然后将以下import语句添加到index.js文件中。(https://getbootstrap.com/docs/4.4/getting-started/webpack/ # importing-compiled-css)

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

or

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

不要忘记在目标元素上使用className作为属性(react使用className作为属性而不是class)。

你可以在任何你想要的地方导入css文件。如果你根据需要配置了加载器,Webpack会注意捆绑css。

类似的,

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

webpack配置是这样的,

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

注意:你必须添加字体加载器,否则你会得到错误。