Estoy newb a reactjs, quiero incluir bootstrap en mi reaccionan aplicación

He instalado bootstrap por npm install bootstrap --save

Ahora, desea cargar el bootstrap css y js en mi reaccionan de la aplicación.

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 reactjs aplicación de node_modules?» Cómo el programa de instalación para el bootstrap para incluir en mi reaccionan app?

  • Estás usando Node.js en el backend?
  • Importar archivos Bootstrap en su página HTML
  • No, no estoy usando Node.js.
  • Está usted usando la menor versión de bootstrap o el simple css? Para esto último basta con incluir el css que utilizan los servicios de versión y nos reaccionar bootstrap para la parte de JavaScript.
  • He utilizado la llanura de css. No quiero CDN. Quiero usar bootstrap de node_modules.
  • ¿Cuál es el propósito de utilizar el mecanismo nacional de prevención de la versión? Si usted está usando Node.js puede crear una ruta estática que apunta al directorio node_modules. Si no, usted puede asegurarse de unir algo con webpack css con cargador pero el hecho de que usted consigue pegado para una tarea que le llevará 5s si usted sólo tiene que descargar el css y lo ponga en su proyecto, debería decir algo. En cualquier caso: el uso de reaccionar-bootstrap para la parte de JavaScript.
  • para que la respuesta tan clara como sea posible: el uso de reaccionar-bootstrap! Saludos
  • He encontrado este artículo, reactstrap.github.io

InformationsquelleAutor Mehul Mali | 2016-10-14

16 Comentarios

  1. 166

    Si usted es nuevo a Reaccionar y el uso de crear-reaccionar-aplicación de la cli la instalación. A continuación, ejecute el siguiente comando NPM para incluir la última versión de bootstrap.

     npm install --save bootstrap

    o

    npm install --save [email protected].0.0-alpha.6 

    A continuación, agregue la siguiente instrucción import a index.js archivo

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

    o

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

    no olvides usar className como atributo (reaccionar utiliza className como atributo en lugar de clase)

    • Si desea utilizar Bootstrap 4 utilice el siguiente comando: npm install [email protected] –save (a partir de ahora el comando de instalación por encima de la voluntad de instalar la última versión estable de Bootstrap, que es 3.3.7)
    • Relative imports outside of src/ are not supported.
    • Yo no se por qué no acaba de enlace en la plantilla html
    • Estoy asumiendo que usted se está refiriendo a la CDN enlaces… creo que esto ayuda stackoverflow.com/questions/26192897/…
    • La solución que se describe a continuación: github.com/facebook/create-react-app/issues/301
    • ¿qué acerca de js? jquery bootstrap.js
    • Si tengo varios archivos que contiene cada uno de los componentes, necesito importar css en cada archivo ?
    • Creo que la importación de la CSS, JS archivos, sólo permite que determinado archivo JS para acceder a las clases CSS (a través de className atributo). Si quiero acceder a estas clases en otros componentes (en la que cada componente se define en un seprate archivo JS), entonces voy a tener que importar el mismo archivo CSS en todos estos lugares. Eso es muy malo!
    • en mi solución, yo no soy la importación en cada archivo js. Yo mantengo que en index.js archivo. es el punto de partida de Reaccionar de la aplicación y carga una sola vez. espero que tu duda se borra.
    • Sé que son sólo la importación de bootstrap css en index.js archivo, pero entonces, ¿cómo va a otro js archivos (archivos de componente) ser capaz de acceder a clases de bootstrap? Como cualquier importar en un archivo js local del archivo.Bootstrap clases son comunes y que son requeridos por casi todos Reaccionan de componentes.
    • He encontrado este artículo y que podría ser útil blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121
    • sólo una INTENSA, que será el resultado en la consola de advertencia etiquetas de la cabeza no debe ser puesto dentro de las etiquetas div en el componente de Reaccionar

  2. 29

    No puede usar Bootstrap Jquery de Javascript basado en componentes en Reaccionar de la aplicación, como cualquier cosa que intenta manipular el DOM fuera de Reaccionar se considera una mala práctica. Aquí puedes leer más info sobre ella.

    Cómo incluir Bootstrap en su Reaccionan de la aplicación:

    1) Recomienda. Usted puede incluir las primas de los archivos CSS de Bootstrap como las otras respuestas especificar.

    2) echar un vistazo a reaccionar-bootstrap de la biblioteca. Es exclusivamente por escrito para Reaccionar.

    3) Para el Bootstrap 4 hay reactstrap

    Bono

    Estos días que en general, evitar Bootstrap bibliotecas que proporcionan listo para usar componentes (mencionado más arriba reaccionar-bootstrap o reactstrap y así sucesivamente). Como ustedes se están convirtiendo en dependientes de los puntales que tomar (no se puede personalizar el comportamiento dentro de ellas) y se pierde el control de DOM que estos componentes producen.

    Así que usa sólo Bootstrap CSS o dejar de Bootstrap a cabo. Una regla general es: Si no está seguro de si usted lo necesita, usted no lo necesita. He visto un montón de aplicaciones que incluyen Bootstrap, pero usando sólo una pequeña cantidad de CSS de la misma y, a veces, la mayoría de este CSS es reemplazado por estilos personalizados.

    • Con la opción 1), ¿cómo se puede incluir Bootstrap de Javascript (y jquery)? O no?
    • Desafortunadamente, ni reaccionar-bootstrap o reactstrap apoyo Bootstrap 4 sin embargo.
    • «dejar de bootstrap» es una bonita opción viable. Un gran consejo.
  3. 24

    A través de mecanismo nacional de prevención, ejecute los siguientes

    npm install bootstrap jquery --save
    npm install css-loader style-loader --save-dev

    Si bootstrap 4, también agregar popper.js

    npm install popper.js --save

    Agregar la siguiente (como un objeto nuevo) a su webpack config loaders: [ matriz

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

    Añada lo siguiente a su índice, o diseño

    import 'bootstrap/dist/css/bootstrap.css';
    import 'bootstrap/dist/js/bootstrap.js';
    • Uno de los perfectos hasta la fecha de respuesta +1
  4. 14

    Sólo puede import el archivo css donde quieras. Webpack se ocupará de paquete de la caja de seguro social si usted configura el cargador como se requiere.

    Algo como,

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

    Y el webpack de configuración como,

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

    Nota: Usted tiene que agregar la fuente cargadores así, de lo contrario usted podría estar recibiendo el error.

    • Gracias, por la respuesta. Necesita ningún mecanismo nacional de prevención de módulos para el estilo de cargador y css-cargador?
    • Sí utilice style-loader css-loader cargadores
    • Ok, ahora a ver lo que es webpack (un poco como lo de incluir algo y el uso que se convirtió en una horrible otro js-cosa que aprender), ny aspirationw fue el uso de un bootstrap3 estilo de botón en mi tutorial de la aplicación…. ahora no me
    • si usted está usando Facebook del crear-reaccionar-app se establecerá webpack con style-loader para usted.
  5. 5

    Por favor siga el enlace de abajo para usar bootstrap con Reaccionar.
    https://react-bootstrap.github.io/

    Para la instalación :

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

    ————————————O————————————-

    Poner Bootstrap CDN para la CSS en la etiqueta de index.html archivo en reaccionar y Bootstrap CDN para Js en la etiqueta de index.html archivo. El uso de nombre de la clase en lugar de la clase
    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>
    • El vínculo que siempre está muerto
    • Hola David, Poner Bootstrap CDN para CSS en <head> etiqueta de index.js archivo en reaccionar y Bootstrap CDN para Js en <body> etiqueta de index.js archivo. Uso className instrad de clase.
    • Respuesta actualizada.
  6. 3
    npm install --save bootstrap 

    y añadir esta declaración de importación en su index.js archivo

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

    o simplemente puede añadir CDN en su index.html archivo.

    • ¿qué acerca de jquery?
    • para agregar jquery para su proyecto: npm me jquery –guardar, a continuación, importar $ de ‘jquery’
  7. 3

    Espero que esto sea útil 😉

    Paso 1: uso del MECANISMO nacional de prevención de instalar esta debajo de comando

    npm install --save [email protected] react react-dom

    Paso 2: ejemplo index.js principal importación de secuencia de comandos de abajo comando

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

    Paso 3: componentes de interfaz de usuario referencia de abajo del sitio web
    reactstrap.github.io

  8. 1

    se puede instalar dirctly a través de

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

    a continuación, importar lo que usted realmente necesita desde el bootstrap como :

    import Button from 'react-bootstrap/lib/Button';

    //o

    import  Button  from 'react-bootstrap';

    y también se puede instalar :

    npm install --save [email protected] react react-dom

    comprobar esto haga clic aquí .

    y para la CSS se puede leer en este enlace también carfuly

    leer aquí

  9. 0

    Sólo en caso de que si se puede usar yarn que se recomienda para Reaccionar aplicaciones,

    que usted puede hacer,

    yarn add [email protected].1.1 //this is to add bootstrap with a specific  version

    Esto agregará el bootstrap como una dependencia a su package.json así.

    {
      "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 que acaba de importar bootstrap en su index.js archivo.

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

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

    1. Vaya a su proyecto
    2. Abrir el terminal
    3. Supongo mecanismo nacional de prevención ya está instalado y, a continuación, escriba el comando siguiente

      npm install --save reactstrap react react-dom

    Esto instalará Reactstrap como una dependencia en su proyecto.

    Aquí es el código de un botón creado usando Reactstrap

    JS:

    import React from 'react';
    import { Button } from 'reactstrap';
    
    export default (props) => {
      return (
        <Button color="danger">Danger!</Button>
      );
    };

    Puede comprobar el Reactstrap visitando su oficial de la página

  11. 0

    Si el uso del CRA(crear-reaccionar-app) en su proyecto, puede añadir esto:

    npm install react-bootstrap bootstrap

    Si utiliza bootstrap en su aplicación y si no funciona, a continuación, utilizar esta 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 el anterior para resolver un problema similar. Espero que esto sea de utilidad 🙂

  12. 0

    Respuesta completa a dar jquery y bootstrap ya que jquery es un requisito para bootstrap.js:

    Instalar jquery y bootstrap en node_modules:

    npm install bootstrap
    npm install jquery

    De importación en sus componentes por medio de este exacto filepath:

    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';
  13. 0

    Trato con la instrucción:

    npm install bootstrap
    npm install jquery popper.js

    a continuación, 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();
  14. 0

    Solo quiero añadir que la instalación y la importación de bootstrap en su index.js archivo no será suficiente para el uso de componentes de bootstrap.
    Cada vez que usted desea utilizar un componente que debe importar, 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';

Dejar respuesta

Please enter your comment!
Please enter your name here