如何包括引导css和js在reactjs应用程序?

我是ReactJS的新手，我想在我的React应用程序中包括引导

我已经通过npm install 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应用程序?

400742 次浏览
小开

你不能在React应用程序中使用基于Jquery的Bootstrap Javascript组件，因为任何试图在React之外操作DOM的行为都被认为是糟糕的做法。在这里你可以读到更多信息。

如何在React应用程序中包含Bootstrap:

1) 推荐。您可以包括Bootstrap的原始CSS文件作为其他答案指定。

2)看一下react-bootstrap库。它是专门为React编写的。

3)对于Bootstrap 4，有reactstrap

奖金

这些天我通常避免使用Bootstrap库，因为它提供了随时可用的组件(上面提到的react-bootstrap或reactstrap等等)。当您变得依赖于它们所采用的道具时(您不能在其中添加自定义行为)，您就失去了对这些组件生成的DOM的控制。

所以要么只使用Bootstrap CSS，要么不使用Bootstrap。一般的经验法则是:如果你不确定你是否需要它，你就不需要它。我见过很多应用程序，其中包括Bootstrap，但只使用少量的CSS，有时大部分CSS被自定义样式覆盖。

小开

你可以在任何你想要的地方import css文件。如果你根据需要配置了加载器，Webpack会注意捆绑css。

类似的,

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

webpack配置是这样的，

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]

注意:你必须添加字体加载器，否则你会得到错误。

小开
最佳答案

如果你是React的新手，并且使用create-react-app cli设置，请运行下面的npm命令来包含最新版本的bootstrap。

npm install --save bootstrap

或

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';

或

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

不要忘记在目标元素上使用className作为属性(react使用className作为属性而不是class)。

小开

请按照下面的链接使用React引导。 https://react-bootstrap.github.io/ < / p >

安装:

$ npm install --save react react-dom
$ npm install --save react-bootstrap

------------------------------------ 或 -------------------------------------

在react的index.html文件的标签中放置CSS的引导CDN，在index.html文件的标签中放置Js的引导CDN。使用className而不是class 请参考index.html

.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 bootstrap

并将此import语句添加到index.js文件中

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

或者你可以简单地在index.html文件中添加CDN。

小开

你可以直接通过

$ 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，你也可以仔细阅读这个链接

read here

小开

希望这是有帮助的;)

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

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

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

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

第三步:UI组件参考下面的网站 reactstrap.github.io < / p >

小开

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

你可以，

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

这也会将引导作为依赖项添加到你的package.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';
小开

在你的项目中安装bootstrap后"npm install——save bootstrap@3.3.7" 你必须移动到项目SRC文件夹中的index.js文件，并从节点模块包中导入bootstrap。< / p >

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

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

< a href = " https://youtu。be/n4V8CJzeD54" rel="nofollow noreferrer">Import Bootstrap In React Project . bb0 Import Bootstrap In React Project

小开

由于引导/ Reactstrap已经发布了他们的最新版本，即引导4，您可以按照以下步骤使用它

  1. 导航到您的项目
  2. 打开终端
  3. 我假设npm已经安装，然后输入以下命令

    npm install --save reactstrap react react-dom < / p >

这将在您的项目中作为依赖项安装Reactstrap。

下面是使用react创建按钮的代码

import React from 'react';
import { Button } from 'reactstrap';


export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};

你可以通过访问他们的官方页面来检查Reactstrap

小开

某种程度上，公认的答案是只谈论包括css文件从bootstrap。

但是我认为这个问题与这里的问题有关 引导下拉在React中不工作 < / p >

有几个答案可以帮助你

  1. https://stackoverflow.com/a/52251319/4266842 < a href = " https://stackoverflow.com/a/52251319/4266842 " > < / >
  2. https://stackoverflow.com/a/54188034/4266842 < a href = " https://stackoverflow.com/a/54188034/4266842 " > < / >
小开

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

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

小开

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

我尝试指导:

npm install bootstrap
npm install jquery popper.js

然后在src/index.js中:

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();
小开
我只是想在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 create-react-app

这将为您提供一个开始的样板代码设置。在App.js文件中使用主逻辑。

之后你可以在CLI工具创建的index.html中使用bootstrap CDN。 或者< / p > 
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导入，以避免与引导程序冲突。

希望能有所帮助，编码愉快!!

小开
这里是如何包括最新的引导
https://react-bootstrap.github.io/getting-started/introduction < / p >

1.安装

NPM安装react-bootstrap

  1. 然后导入到App.js 进口的引导/ dist / css / bootstrap.min.css; < / p > < /李> 然后你需要导入你在应用程序中使用的组件，例如 如果你使用导航条，导航，按钮，表单，表单控件，然后导入所有这些，如下所示:

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';
小开

简单的解决方案(2020)如下:-

  1. npm install --save jquery popper.js
  2. npm install --save bootstrap
  3. npm install --save style-loader css-loader
  4. 更新webpack.config.js，你必须告诉webpack如何处理引导CSS文件，因此你必须添加一些规则，如所示

rules

  1. 在你的React应用程序的入口点(通常是index.js)添加一些导入，把它们放在顶部，确保你没有改变顺序。

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

import $ from "jquery";

import Popper from "popper.js";

import "bootstrap/dist/js/bootstrap.bundle.min";

  1. 这些步骤应该可以帮助你，如果有什么问题请评论。
小开

下面是我使用bootstrap 4和npm的方法

  1. 安装jquery , popper.js, bootstrap包

    npm install jquery popper.js bootstrap --save

  2. 使用以下导入更新index.js

    import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.js";

另外，如果你在自定义样式中使用sass，你可以安装sass包

npm install sass --save
小开
你可以使用visual studio终端添加bootstrap: YourApplicationName>NPM安装bootstrap@4.1.1

小开

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

提交答案