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


当前回答

引导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>
  )
}

其他回答

希望这是有帮助的;)

第一步:使用NPM安装以下命令

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

步骤2:示例index.js主脚本导入bellow命令

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

步骤3:UI组件参考以下网站 reactstrap.github.io

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

以防万一,如果你可以使用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';

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

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