twitter bootstrap - example - ¿Cómo incluir bootstrap css y js en la aplicación reactjs?
react bootstrap example (16)
A través de npm , ejecutarías lo siguiente
npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev
Si bootstrap 4, también agregue popper.js
npm install popper.js --save
Agregue lo siguiente (como un nuevo objeto) a los
cargadores de configuración de
su
paquete web
loaders: [
matriz
{
test: //.css$/,
loader: ''style-loader!css-loader''
}
Agregue lo siguiente a su índice o diseño
import ''bootstrap/dist/css/bootstrap.css'';
import ''bootstrap/dist/js/bootstrap.js'';
Soy nuevo en reaccionar, quiero incluir bootstrap en mi aplicación de reacción
He instalado bootstrap por
npm install bootstrap --save
Ahora, quiero cargar bootstrap css y js en mi aplicación react.
Estoy usando 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;
Mi problema es "¿cómo incluir bootstrap css y js en la aplicación reactjs de node_modules?" ¿Cómo configurar el bootstrap para incluirlo en mi aplicación react?
De alguna manera, la respuesta aceptada solo habla de incluir el archivo css desde bootstrap.
Pero creo que esta pregunta está relacionada con la de aquí: Bootstrap Dropdown no funciona en React
Hay un par de respuestas que pueden ayudar:
- https://.com/a/52251319/4266842
- https://.com/a/54188034/4266842
Desde Bootstrap / Reactstrap ha lanzado su última versión, es decir Bootstrap 4 , puede usar esto siguiendo estos pasos
- Navega a tu proyecto
- Abre la terminal
-
Supongo que npm ya está instalado y luego escriba el siguiente comando
npm install --save reactstrap react react-dom
Esto instalará Reactstrap como una dependencia en su proyecto.
Aquí está el código para un botón creado usando Reactstrap
import React from ''react'';
import { Button } from ''reactstrap'';
export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
Puede consultar la Reactstrap visitando su reactstrap
Después de instalar bootstrap en su proyecto "npm install --save [email protected]", debe pasar al archivo index.js en la carpeta SRC del proyecto e importar bootstrap desde el paquete del módulo de nodo.
importar ''bootstrap / dist / css / bootstrap.min.css'';
Si lo desea, puede obtener ayuda de este video, seguro que lo ayudará mucho.
Espero que esto sea útil;)
Paso 1: usando NPM, instale este siguiente comando
npm install --save reactstrap@next react react-dom
Paso 2: ejemplo del comando index.js main script import bellow
import ''bootstrap/dist/css/bootstrap.min.css'';
Paso 3: los componentes de la interfaz de usuario se refieren a continuación del sitio web reactstrap.github.io
Intento con instrucciones:
<Container>
<Row>
<Col sm={4}> Test </Col>
<Col sm={8}> Test </Col>
</Row>
</Container>
luego en src / index.js:
import {Container, Row, Col} from ''react-bootstrap'';
No puede usar componentes Javascript basados en Bootstrap Jquery en la aplicación React, ya que cualquier cosa que intente manipular DOM fuera de React se considera una mala práctica. Aquí puedes leer más información al respecto .
Cómo incluir Bootstrap en tu aplicación React:
1) Recomendado Puede incluir archivos CSS sin procesar de Bootstrap como especifican las otras respuestas.
2) Echa un vistazo a la biblioteca https://react-bootstrap.github.io/ . Está escrito exclusivamente para React.
3) Para Bootstrap 4 hay reactstrap
Prima
En estos días, generalmente evito las bibliotecas Bootstrap que proporcionan componentes listos para usar (react-bootstrap o reactstrap mencionados anteriormente, etc.). A medida que se vuelve dependiente de los accesorios que toman (no puede agregar un comportamiento personalizado dentro de ellos) y pierde el control sobre DOM que producen estos componentes.
Por lo tanto, use solo CSS de Bootstrap o deje Bootstrap fuera. Una regla general es: si no está seguro de si lo necesita, no lo necesita. He visto muchas aplicaciones que incluyen Bootstrap, pero el uso de la única pequeña cantidad de CSS y, a veces, la mayoría de este CSS está anulado por los estilos personalizados.
Por si acaso puedes usar
yarn
que se recomienda para las aplicaciones React,
tu puedes hacer,
yarn add [email protected] // this is to add bootstrap with a specific version
Esto agregará el bootstrap como una dependencia a su
package.json
también.
{
"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"
}
}
Después de eso solo importa
bootstrap
en tu archivo
index.js
.
import ''bootstrap/dist/css/bootstrap.css'';
Puede
import
el archivo css donde quiera.
Webpack se encargará de agrupar el CSS si configuró el cargador según sea necesario.
Algo como,
import ''bootstrap/dist/css/bootstrap.css'';
Y la configuración del paquete web como,
loaders: [{ test: //.css$/, loader: ''style-loader!css-loader'' }]
Nota: También debe agregar cargadores de fuentes, de lo contrario, recibirá un error.
Respuesta completa para darle jquery y bootstrap ya que jquery es un requisito para bootstrap.js:
Instale jquery y bootstrap en node_modules:
npm install bootstrap
npm install jquery
Importe en sus componentes utilizando esta ruta de archivo exacta:
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'';
Si eres nuevo en React y estás usando la configuración de cli create-react-app . Luego ejecute el siguiente comando NPM para incluir la última versión de bootstrap.
npm install --save bootstrap
o
npm install --save [email protected]
Luego agregue la siguiente declaración de importación al archivo index.js
import ''../node_modules/bootstrap/dist/css/bootstrap.min.css'';
o
import ''bootstrap/dist/css/bootstrap.min.css'';
no olvides usar className como atributo (reaccionar usa className como atributo en lugar de clase )
Si usa CRA (create-react-app) en su proyecto, puede agregar esto:
npm install react-bootstrap bootstrap
Si usa bootstrap en su aplicación y no funciona, use esto en index.html:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
Hice lo anterior para resolver un problema similar. Espero que esto te sea útil :-)
Siga el siguiente enlace para usar bootstrap con React. https://react-bootstrap.github.io/
Para instalacion :
$ npm install --save react react-dom
$ npm install --save react-bootstrap
------------------------------------O------------- ------------------------
Coloque Bootstrap CDN para CSS en la etiqueta del archivo index.html en react y Bootstrap CDN para Js en la etiqueta del archivo index.html. Use className en lugar de class, siga a continuación 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>
Solo quiero agregar que instalar e importar bootstrap en su archivo index.js no será suficiente para usar componentes de bootstrap. Cada vez que quiera usar un componente, debe importarlo, como: Necesito usar un contenedor y una fila
npm install bootstrap
npm install jquery popper.js
Debes importar en tu archivo 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();
puedes instalarlo directamente a través de
$ npm install --save react react-dom
$ npm install --save react-bootstrap
luego importe lo que realmente necesita de la rutina de arranque como:
import Button from ''react-bootstrap/lib/Button'';
// o
import Button from ''react-bootstrap'';
y también puedes instalar:
npm install --save reactstrap@next react react-dom
mira esto haz clic aquí .
y para el CSS puedes leer este enlace también carfuly
npm install --save bootstrap
y agregue esta declaración de importación en su archivo index.js
import ''../node_modules/bootstrap/dist/css/bootstrap.min.css'';
o simplemente puede agregar CDN en su archivo index.html.