Sono un novellino di reazioni, voglio includere bootstrap nella mia app di reazione

Ho installato bootstrap da npm install bootstrap --save

Ora, voglio caricare bootstrap css e js nella mia app di reazione.

Sto usando il 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;

Il mio problema è "come includere bootstrap css e js nell'app di reazioni da nodo_moduli?" Come configurare Bootstrap per includerlo nella mia app di reazione?

Se sei nuovo di React e stai usando create-react-appcli setup, esegui il comando npm di seguito per includere l'ultima versione di bootstrap.

npm install --save bootstrap

o

npm install --save bootstrap@latest

Quindi aggiungere la seguente dichiarazione di importazione al index.jsfile. ( 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';

non dimenticare di usare classNamecome attributo sugli elementi target (reagisce usa classNamecome attributo invece che class).

Via npm , gestiresti il folowing

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

Se bootstrap 4, aggiungi anche popper.js

npm install popper.js --save

Aggiungi quanto segue (come nuovo oggetto) all'array di configurazione del webpack loaders: [

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

Aggiungi quanto segue al tuo indice o layout

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

Non è possibile utilizzare i componenti Javascript basati su Bootstrap Jquery nell'app React, in quanto tutto ciò che tenta di manipolare il DOM all'esterno di React è considerato una cattiva pratica. Qui puoi leggere maggiori informazioni a riguardo .

Come includere Bootstrap nella tua app React:

1) raccomandato . Puoi includere file CSS non elaborati di Bootstrap come specificato dalle altre risposte.

2) Dai un'occhiata alla libreria React-bootstrap . È scritto esclusivamente per React.

3) Per Bootstrap 4 è presente il reagente

indennità

In questi giorni in genere evito le librerie Bootstrap che forniscono componenti pronti per l'uso (summenzionato reagire-avviare o reagire e così via). Man mano che diventi dipendente dagli oggetti di scena che prendono (non puoi aggiungere comportamenti personalizzati al loro interno) e perdi il controllo sul DOM prodotto da questi componenti.

Quindi utilizzare solo Bootstrap CSS o lasciare Bootstrap fuori. Una regola generale è: se non sei sicuro di averne bisogno, non ne hai bisogno. Ho visto molte applicazioni che includono Bootstrap, ma usando solo una piccola quantità di CSS e talvolta la maggior parte di questo CSS è sovrascritta da stili personalizzati.

Puoi solo importil file CSS dove vuoi. Webpack si occuperà di raggruppare i CSS se hai configurato il caricatore come richiesto.

Qualcosa di simile a,

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

E il webpack configura come

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

Nota: è necessario aggiungere anche caricatori di font, altrimenti si verificherebbe un errore.

Anch'io ho avuto uno scenario simile. La mia configurazione era come indicato di seguito

npm install create-react-app

Ciò fornirà una configurazione del codice della piastra della caldaia per iniziare. Gioca con il file App.js per la logica principale.

Successivamente è possibile utilizzare bootstrap CDN in index.html creato dallo strumento CLI. o

npm install bootstrap popper jquery

e quindi includi semplicemente questo nel file App.js.

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

Pochi autori hanno menzionato l'uso dell'attributo className anziché della classe, ma nel mio caso, entrambi funzionavano come di seguito. Ma se usi class e dai un'occhiata alla console negli strumenti di sviluppo sul browser, vedrai un errore nell'uso di class, quindi usa className.

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

E non dimenticare di rimuovere le importazioni CSS predefinite per evitare conflitti con bootstrap.

Spero che aiuti, Buona codifica !!!

Seguire il link seguente per utilizzare bootstrap con React. https://react-bootstrap.github.io/

Per l'installazione:

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

------------------------------------O------------- ------------------------

Inserisci Bootstrap CDN per CSS nel tag del file index.html nel reagire e Bootstrap CDN per Js nel tag del file index.html. Usa className invece di class segui index.html sotto

<!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>

Risposta completa per darti jquery e bootstrap poiché jquery è un requisito per bootstrap.js:

Installa jquery e bootstrap in node_modules:

npm install bootstrap
npm install jquery

Importa nei componenti utilizzando questo percorso file esatto:

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 

e aggiungi questa dichiarazione di importazione nel tuo file index.js

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

oppure Potresti semplicemente aggiungere CDN nel tuo file index.html.

Spero che questo sia utile;)

Passo 1: usando NPM installa questo comando qui sotto

npm install --save reactstrap@next react react-dom

Passaggio 2: esempio comando muggito di importazione dello script principale index.js

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

Passaggio 3: i componenti dell'interfaccia utente fanno riferimento al seguente sito Web reagtstrap.github.io

puoi installarlo direttamente tramite

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

quindi importa ciò di cui hai veramente bisogno dal bootstrap come:

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

// o

import  Button  from 'react-bootstrap';

e inoltre puoi installare:

npm install --save reactstrap@next react react-dom

controlla questo clicca qui .

e per il CSS puoi leggere questo link anche con attenzione

leggi qui

Dopo aver installato bootstrap nel progetto "npm install --save bootstrap@3.3.7" è necessario passare al file index.js nella cartella del progetto SRC e importare bootstrap dal pacchetto del modulo nodo.

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

Se ti piace, puoi ottenere aiuto da questo video, sicuramente ti sarà di grande aiuto.

Importa Bootstrap nel progetto React

Provo con le istruzioni:

npm install bootstrap
npm install jquery popper.js

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

Nel caso in cui è possibile utilizzare ciò yarnche è raccomandato per le app React

tu puoi fare,

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

Questo aggiungerà il bootstrap come dipendenza anche al tuo package.json.

{
  "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"
  }
}

Dopo di ciò basta importare bootstrapnel tuo index.jsfile.

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

Poiché Bootstrap / Reactstrap ha rilasciato la sua ultima versione, ovvero Bootstrap 4, è possibile utilizzarla seguendo questi passaggi

1. Passa al tuo progetto
2. Apri il terminale

3. Presumo che npm sia già installato e quindi digito il seguente comando

   npm install --save reactstrap react react-dom

Questo installerà Reactstrap come dipendenza nel tuo progetto.

Ecco il codice per un pulsante creato usando Reactstrap

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

Puoi controllare il Reactstrap visitando la loro pagina ufficiale

In qualche modo la risposta accettata parla solo dell'inclusione del file css da bootstrap.

Ma penso che questa domanda sia collegata a quella qui - Dropstrap Dropdown non funziona in React

Ci sono un paio di risposte che possono aiutare -

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

Se usi CRA (create -eagire-app) nel tuo progetto, puoi aggiungere questo:

npm install react-bootstrap bootstrap

Se usi bootstrap nella tua app e se non funziona, usa questo in index.html:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

Ho fatto quanto sopra per risolvere un problema simile. Spero che questo ti sia utile :-)

Voglio solo aggiungere che l'installazione e l'importazione di bootstrap nel tuo file index.js non saranno sufficienti per l'utilizzo dei componenti bootstrap. Ogni volta che si desidera utilizzare un componente, è necessario importarlo, ad esempio: Devo utilizzare un contenitore e una riga

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

Dovresti importare nel tuo file js

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

Ecco come includere l'ultimo bootstrap
https://react-bootstrap.github.io/getting-started/introduction

1.Installare

npm install reagire bootstrap bootstrap

2. quindi importare in App.js import 'bootstrap / dist / css / bootstrap.min.css';

3. Quindi devi importare i componenti che usi nella tua app, esempio Se usi navbar, nav, button, form, formcontrol, importa tutti questi come di seguito:

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