我是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应用程序?
我也有过类似的经历。我的设置如下所示
npm install create-react-app
这将为您提供一个开始的样板代码设置。在App.js文件中使用主逻辑。
稍后，您可以在CLI工具创建的index.html中使用引导CDN。
或
npm install bootstrap popper jquery
然后简单地将其包含在App.js文件中。
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'
很少有作者提到使用className属性而不是class，但在我的例子中，两者都像下面这样工作。但是如果你使用class并在浏览器的开发工具中查看控制台，你会看到使用class的错误。所以改用className。
<div className="App" class = "container"> //dont use class attribute
不要忘记删除默认的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>
)
}
