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


当前回答

这里是如何包括最新的引导 https://react-bootstrap.github.io/getting-started/introduction

1.安装

NPM安装react-bootstrap

然后导入到App.js 导入“引导/ dist / css / bootstrap.min.css”; 然后你需要导入你在应用程序中使用的组件,例如 如果你使用导航条,导航,按钮,表单,表单控件,然后导入所有这些如下所示:

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';

其他回答

完整的答案是给你jquery和bootstrap,因为jquery是bootstrap.js的要求:

安装jquery和bootstrap到node_modules:

npm install bootstrap
npm install jquery

在你的组件中使用这个确切的文件路径:

import 'jquery/src/jquery'; //for bootstrap.min.js
//bootstrap-theme file for bootstrap 3 only
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

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

这里是如何包括最新的引导 https://react-bootstrap.github.io/getting-started/introduction

1.安装

NPM安装react-bootstrap

然后导入到App.js 导入“引导/ dist / css / bootstrap.min.css”; 然后你需要导入你在应用程序中使用的组件,例如 如果你使用导航条,导航,按钮,表单,表单控件,然后导入所有这些如下所示:

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'


// or less ideally
import { Button } from 'react-bootstrap';

如果你在项目中使用CRA(create-react-app),你可以添加这个:

npm install react-bootstrap bootstrap

如果你在你的应用中使用bootstrap,如果它不起作用,那么在index.html中使用这个:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

我用上面的方法来解决类似的问题。希望这对你有用:-)

你可以直接通过

$ 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,你也可以仔细阅读这个链接

在这里阅读