wake-up-neo.com

Wie füge ich bootstrap css und js in die reactjs App ein?

Ich bin Neuling zu reagieren, ich möchte Bootstrap in meine Reakt-App aufnehmen

Ich habe bootstrap von npm install bootstrap --save installiert.

Jetzt möchte ich bootstrap css und js in meine react App laden.

Ich verwende 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;

Mein Problem ist "wie man Bootstrap-css und -Js aus den node_modules in die reactjs-App einbezieht?" Wie kann ich bootstrap so einrichten, dass es in meine Reakt-App aufgenommen wird?

twitter-bootstrapreactjswebpack
78
Mehul Mali

Wenn Sie mit React und mit create-react-app cli setup noch nicht vertraut sind, führen Sie den folgenden NPM-Befehl aus, um die neueste Version von Bootstrap einzuschließen.

 npm install --save bootstrap

oder

npm install --save [email protected]

Fügen Sie dann die folgende import-Anweisung zur Datei index.js hinzu

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

oder

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

vergessen Sie nicht, className als Attribut zu verwenden. (Reagieren verwendet className als Attribut anstelle von class.)

176
Praveen M P

Sie können keine Bootstrap Jquery-basierten Javascript-Komponenten in der React-App verwenden, da alles, was versucht, DOM außerhalb von React zu manipulieren, als schlechte Praxis gilt. Hier können Sie mehr Infos dazu lesen. 

So fügen Sie Bootstrap in Ihre React-App ein:

1) Empfohlen. Sie können rohe CSS-Dateien von Bootstrap einschließen, wie in den anderen Antworten angegeben.

2) Schauen Sie sich die rease-bootstrap library an. Es ist ausschließlich für React geschrieben.

3) Für Bootstrap 4 gibt es -reactstrap

Bonus

Heutzutage vermeide ich generell Bootstrap-Bibliotheken, die betriebsbereite Komponenten bereitstellen (oben genannter reaktiver Bootstrap oder Reaktiverstrang usw.). Wenn Sie von den Requisiten abhängig werden, die sie verwenden (Sie können kein benutzerdefiniertes Verhalten hinzufügen), verlieren Sie die Kontrolle über das DOM, das diese Komponenten produzieren. 

Verwenden Sie also entweder nur Bootstrap-CSS oder lassen Sie Bootstrap aus. Als Faustregel gilt: Wenn Sie nicht sicher sind, ob Sie es brauchen, brauchen Sie es nicht. Ich habe viele Anwendungen gesehen, die Bootstrap enthalten, aber nur die geringe Menge CSS verwenden, und manchmal wird das meiste CSS durch benutzerdefinierte Stile überschrieben.

26
Shota

Über npm würden Sie folgendes ausführen

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

Bei Bootstrap 4 fügen Sie außerdem popper.js hinzu

npm install popper.js --save

Fügen Sie Folgendes als neues Objekt zu Ihrem webpack config loaders: [ Array hinzu

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

Fügen Sie Ihrem Index oder Layout Folgendes hinzu:

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

Sie können die CSS-Datei einfach import wo immer Sie möchten. Webpack achtet darauf, die CSS zu bündeln, wenn Sie den Loader nach Bedarf konfiguriert haben.

So etwas wie,

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

Und die Webpack-Konfiguration mag,

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

Hinweis: Sie müssen auch Fontloader hinzufügen, andernfalls erhalten Sie eine Fehlermeldung.

13
Thaadikkaaran

Bitte folgen Sie dem Link, um Bootstrap mit React zu verwenden. https://react-bootstrap.github.io/

Zum Installieren :

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

------------------------------------ODER------------- ------------------------

Setzen Sie Bootstrap CDN für CSS im Tag der Datei index.html in rea und das Bootstrap CDN für Js im Tag der Datei index.html. Verwenden Sie className anstelle von class Folgen Sie unterhalb von 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>
5
Aditya Parmar
npm install --save bootstrap

und fügen Sie diese Importanweisung in Ihre index.js-Datei ein

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

oder Sie können einfach CDN in Ihre index.html-Datei einfügen.

3
Nikhil

Hoffe das ist hilfreich;)

Schritt 1: Installieren Sie diesen Befehl mit NPM.

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

Schritt 2: Beispiel index.js Hauptskriptimport unten

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

Schritt 3: Komponenten der Benutzeroberfläche verweisen auf die folgende Websitereactstrap.github.io

2
Vidhyapathi Kandhasamy

sie können es direkt über installieren 

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

dann importieren Sie, was Sie wirklich benötigen, aus dem Bootstrap

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

// oder

import  Button  from 'react-bootstrap';

und Sie können auch installieren:

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

check this out hier klicken .

und für das CSS kann man diesen Link auch carfuly lesen 

Lies hier

1
Majed HORIA

Wenn Sie in Ihrem Projekt CRA (Create-React-App) verwenden, können Sie Folgendes hinzufügen:

npm install react-bootstrap bootstrap

Wenn Sie Bootstrap in Ihrer App verwenden und nicht funktionieren, verwenden Sie Folgendes in index.html:

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

Ich tat das oben, um ein ähnliches Problem zu lösen. Hoffentlich ist das nützlich für dich :-)

0
Mohamad Ali

Für den Fall, dass Sie yarn verwenden können, das für React-Apps empfohlen wird,

du kannst tun,

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

Dadurch wird der Bootstrap auch als Abhängigkeit zu Ihrem package.json hinzugefügt.

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

Danach importieren Sie einfach bootstrap in Ihre index.js-Datei.

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

Ich möchte nur hinzufügen, dass das Installieren und Importieren von bootstrap in Ihre index.js-Datei nicht ausreicht, um bootstrap -Komponenten zu verwenden. Jedes Mal, wenn Sie eine Komponente verwenden möchten, sollten Sie sie importieren, z. B .: Ich muss einen Container und eine Zeile verwenden

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

Sie sollten in Ihre js-Datei importieren

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

Nach der Installation von bootstrap in Ihrem Projekt "npm install --save boot[email protected]" Müssen Sie zur Datei index.js im SRC-Ordner des Projekts wechseln und bootstrap aus dem Knotenmodulpaket importieren. 

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

Wenn Sie möchten, können Sie Hilfe von diesem Video erhalten. Sicher, es wird Ihnen sehr helfen.

Bootstrap In React-Projekt importieren

0
Yousuf Shaikh

Da Bootstrap/Reactstrap ihre neueste Version veröffentlicht hat, d. H. Bootstrap 4, können Sie dies wie folgt ausführen

  1. Navigieren Sie zu Ihrem Projekt 
  2. Öffnen Sie das Terminal

  3. Ich gehe davon aus, dass npm bereits installiert ist und geben dann den folgenden Befehl ein

    npm install --save reactstrap react react-dom

Dadurch wird Reactstrap als Abhängigkeit in Ihrem Projekt installiert.

Hier ist der Code für eine Schaltfläche, die mit Reactstrap erstellt wurde

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

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

Sie können den Reactstrap auf der offiziellen Seite überprüfen

0
Hadi Mir

Irgendwie geht es in der akzeptierten Antwort nur um das Einschließen der CSS-Datei von Bootstrap.

Aber ich denke, diese Frage bezieht sich auf die hier - Bootstrap Dropdown funktioniert nicht in React

Es gibt einige Antworten, die helfen können - 

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

Vollständige Antwort, um Ihnen jquery und bootstrap zu geben, da jquery eine Voraussetzung für bootstrap.js ist:

Installieren Sie jquery und bootstrap in node_modules:

npm install bootstrap
npm install jquery

Importieren Sie Ihre Komponenten mit genau diesem Dateipfad:

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

Ich versuche mit Anweisung:

npm install bootstrap
npm install jquery popper.js

dann 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();
0
Morteza Fathnia