我是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应用程序?


当前回答

你可以直接通过

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

然后从bootstrap导入你真正需要的东西,比如:

import Button from 'react-bootstrap/lib/Button';

/ /或

import  Button  from 'react-bootstrap';

你还可以安装:

npm install --save reactstrap@next react react-dom

点击这里查看。

关于CSS,你也可以仔细阅读这个链接

在这里阅读

其他回答

你可以直接通过

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

然后从bootstrap导入你真正需要的东西,比如:

import Button from 'react-bootstrap/lib/Button';

/ /或

import  Button  from 'react-bootstrap';

你还可以安装:

npm install --save reactstrap@next react react-dom

点击这里查看。

关于CSS,你也可以仔细阅读这个链接

在这里阅读

在你的项目中安装引导程序后“npm install—save bootstrap@3.3.7” 你必须移动到项目SRC文件夹中的index.js文件,并从节点模块包中导入bootstrap。

导入“引导/ dist / css / bootstrap.min.css”;

如果你想从这个视频中得到帮助,它肯定会对你有很大帮助。

在React项目中导入Bootstrap

我也有过类似的经历。我的设置如下所示

npm install create-react-app

这将为您提供一个开始的样板代码设置。在App.js文件中使用主逻辑。

稍后,您可以在CLI工具创建的index.html中使用引导CDN。 或

npm install bootstrap popper jquery

然后简单地将其包含在App.js文件中。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

很少有作者提到使用className属性而不是class,但在我的例子中,两者都像下面这样工作。但是如果你使用class并在浏览器的开发工具中查看控制台,你会看到使用class的错误。所以改用className。

    <div className="App" class = "container"> //dont use class attribute

不要忘记删除默认的CSS导入,以避免与引导程序冲突。

希望能有所帮助,编码愉快!!

你可以使用visual studio终端添加bootstrap: YourApplicationName> npm install bootstrap@4.1.1

你不能在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被自定义样式覆盖。