我是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的新手,并且使用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)。

其他回答

完整的答案是给你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';

我只是想在index.js文件中添加安装和导入bootstrap对于使用bootstrap组件是不够的。 每次你想要使用一个组件时,你都应该导入它,比如: 我需要使用一个容器和一行

    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

你应该在js文件中导入

import {Container, Row, Col} from 'react-bootstrap';

以防万一,如果你可以使用React应用程序推荐使用的yarn,

你可以,

yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific  version

这将把引导程序作为依赖项添加到包中。Json也是。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.1", // it will add an entry here
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后在index.js文件中导入bootstrap。

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

如果你在项目中使用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"
/>

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

这里是如何包括最新的引导 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';