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?

Si es nuevo en React y utiliza la create-react-appconfiguración de cli, ejecute el siguiente comando npm para incluir la última versión de bootstrap.

npm install --save bootstrap

o

npm install --save bootstrap@latest

Luego agregue la siguiente declaración de importación al index.jsarchivo. ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

o

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

no olvide usar classNamecomo atributo en los elementos de destino (reaccionar utiliza classNamecomo atributo en lugar de class).

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 la siguiente (como un nuevo objeto) a su configuración webpack loaders: [ gama

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

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

Entonces, use solo Bootstrap CSS 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.

Puedes simplemente importel archivo css donde quieras. 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.

Yo también tuve un escenario similar. Mi configuración fue como se indica a continuación

npm install create-react-app

Esto le proporcionará una configuración de código de placa de caldera para comenzar. Juega un poco con el archivo App.js para la lógica principal.

Más tarde, puede usar Bootstrap CDN en index.html creado por la herramienta CLI. o

npm install bootstrap popper jquery

y luego simplemente incluya esto en el archivo App.js.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'

Pocos autores han mencionado el uso del atributo className en lugar de la clase, pero en mi caso, ambos estaban funcionando como a continuación. Pero si usa class y mira la consola en las herramientas de desarrollador en el navegador, verá un error al usar class, así que use className en su lugar.

    <div className="App" class = "container"> //dont use class attribute

Y no olvide eliminar las importaciones CSS predeterminadas para evitar conflictos con bootstrap.

Espero que ayude, feliz codificación !!!

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>

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

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.

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

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í

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

Intento con instrucciones:

npm install bootstrap
npm install jquery popper.js

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

Por si acaso, si puede usar lo yarnque se recomienda para las aplicaciones React,

tu puedes hacer,

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

Esto agregará el bootstrap como una dependencia a su package.jsontambié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 bootstrapen tu index.jsarchivo.

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

Desde Bootstrap / Reactstrap lanzó 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 página oficial

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://stackoverflow.com/a/52251319/4266842
2. https://stackoverflow.com/a/54188034/4266842

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

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

    <Container>
        <Row>
        <Col sm={4}> Test </Col>
        <Col sm={8}> Test </Col>
        </Row>
</Container>

Debe importar en su archivo js

import {Container, Row, Col} from 'react-bootstrap';

Aquí se explica cómo incluir el último bootstrap
https://react-bootstrap.github.io/getting-started/introduction

1.Instalar

npm install react-bootstrap bootstrap

2. luego importe a App.js import 'bootstrap / dist / css / bootstrap.min.css';

3. Luego, debe importar los componentes que usa en su aplicación, por ejemplo, si usa la barra de navegación, la navegación, el botón, el formulario, el control de formulario, importe todos estos de la siguiente manera:

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