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


当前回答

我只是想在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';

其他回答

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

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

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

在React项目中导入Bootstrap

请按照下面的链接使用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 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,你也可以仔细阅读这个链接

在这里阅读

引导5(更新2021年)

Bootstrap 5是模块化的,不再需要jQuery。因此,您可以导入Bootstrap组件并直接从Bootstrap引用它们。这意味着你不再需要像react-bootstrap或reactstrap这样的第三方库。

使用React + Bootstrap 5:

1_安装bootstrap并将其添加到package.json…

npm install 'bootstrap' --save

2_导入bootstrap和/或特定组件…

import { Collapse, Popover, Toast, Tooltip, Alert, Modal, Dropdown } from bootstrap

3_使用Bootstrap组件。例如,这里是下拉菜单…

// component
const DropdownDemo = () => {
    const ddRef = useRef()  

    useEffect(() => {
        var dd = new Dropdown(ddRef.current, {})
    })
    
    return (
        <div className="py-2">
            <div className="dropdown">
              <button className="btn btn-secondary dropdown-toggle" type="button" ref={ddRef} aria-expanded="false">
                Dropdown button
              </button>
              <ul className="dropdown-menu" aria-labelledby="dropdown1">
                <li><a className="dropdown-item" href="#">Action</a></li>
                <li><a className="dropdown-item" href="#">Another action</a></li>
                <li><a className="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </div>
        </div>
    )
}

// React app
function App() {
  const [mounted, setMounted] = useState(true);

  return (
    <div>
        {mounted &&
            <div>
                <DropdownDemo />
            </div>
        }
    </div>
  )
}