我是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)。
通过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';
引导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>
)
}
请按照下面的链接使用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>
