reactstrap react example error create bootstrap app twitter-bootstrap reactjs webpack

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:

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

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


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


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

leer aquí


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.