twitter bootstrap - example - ¿Cómo incluir bootstrap css y js en la aplicación reactjs?

react bootstrap example

Question

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?

Answer 1

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

Answer 2

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:

1. https://.com/a/52251319/4266842
2. https://.com/a/54188034/4266842

Answer 3

Desde Bootstrap / Reactstrap ha lanzado su última versión, es decir Bootstrap 4 , puede usar esto siguiendo estos pasos

1. Navega a tu proyecto
2. Abre la terminal

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

Answer 4

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.

Importar Bootstrap en el proyecto React

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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.

Answer 10

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

Answer 11

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 )

Answer 12

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 :-)

Answer 13

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>

Answer 14

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();

Answer 15

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

leer aquí

Answer 16

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.