Ich bin ein Neuling in der Reaktion. Ich möchte Bootstrap in meine Reaktions-App aufnehmen

Ich habe Bootstrap von installiert npm install bootstrap --save

Jetzt möchte ich Bootstrap CSS und JS in meine Reaktions-App laden.

Ich benutze 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 kann man Bootstrap-CSS und -JS von node_modules in die reactjs-App aufnehmen?" Wie richte ich ein, damit Bootstrap in meine Reaktions-App aufgenommen wird?

Wenn Sie mit React noch nicht vertraut sind und das create-react-appCLI-Setup verwenden, führen Sie den folgenden Befehl npm aus , um die neueste Version von Bootstrap einzuschließen.

npm install --save bootstrap

oder

npm install --save bootstrap@latest

Fügen Sie dann die folgende Importanweisung zur index.jsDatei hinzu. ( https://getbootstrap.com/docs/4.4/getting-started/webpack/#importing-compiled-css )

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

oder

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

Vergessen Sie nicht, classNameals Attribut für Zielelemente zu verwenden (reagieren Sie classNameals Attribut anstelle von class).

Über npm würden Sie das Folgende ausführen

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

Wenn Bootstrap 4, fügen Sie auch popper.js hinzu

npm install popper.js --save

Fügen Sie Ihrer Webpack-Konfiguration Folgendes hinzu (als neues Objekt) loaders: [ - Array

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

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 angesehen wird. Hier können Sie weitere Informationen darüber 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) Sehen Sie sich die React-Bootstrap- Bibliothek 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 gebrauchsfertige Komponenten bereitstellen (oben genannter React-Bootstrap oder Reactstrap usw.). Wenn Sie von den Requisiten abhängig werden, die sie benötigen (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 weg. Eine allgemeine Faustregel lautet: Wenn Sie nicht sicher sind, ob Sie es brauchen, brauchen Sie es nicht. Ich habe viele Anwendungen gesehen, die Bootstrap enthalten, aber die Verwendung der einzigen geringen Menge an CSS und manchmal des größten Teils dieses CSS wird durch benutzerdefinierte Stile überschrieben.

Sie können nur importdie CSS-Datei, wo immer Sie wollen. Webpack kümmert sich darum, das CSS zu bündeln, wenn Sie den Loader nach Bedarf konfiguriert haben.

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 Schriftlader hinzufügen, da sonst eine Fehlermeldung angezeigt wird.

Ich hatte auch ein ähnliches Szenario. Mein Setup war wie unten angegeben

npm install create-react-app

Auf diese Weise erhalten Sie zunächst eine Einrichtung für den Kesselplattencode. Spielen Sie mit der Datei App.js für die Hauptlogik.

Später können Sie das vom CLI-Tool erstellte Bootstrap-CDN in index.html verwenden. oder

npm install bootstrap popper jquery

und fügen Sie dies dann einfach in die Datei App.js ein.

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

Nur wenige Autoren haben die Verwendung des Attributs className anstelle von class erwähnt, aber in meinem Fall arbeiteten beide wie unten beschrieben. Wenn Sie jedoch class verwenden und die Konsole in den Entwicklertools des Browsers betrachten, wird ein Fehler bei der Verwendung von class angezeigt. Verwenden Sie stattdessen className.

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

Vergessen Sie nicht, die Standard-CSS-Importe zu entfernen, um Konflikte mit dem Bootstrap zu vermeiden.

Hoffe das hilft, Happy Coding !!!

Bitte folgen Sie dem Link unten, 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------------- ------------------------

Fügen Sie Bootstrap CDN für CSS in das Tag der Datei index.html in Reaktion und Bootstrap CDN für Js in das Tag der Datei index.html ein. Verwenden Sie className anstelle von class folgen unter 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>

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

npm install --save bootstrap 

und fügen Sie diese import-Anweisung 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.

Hoffe das ist hilfreich;)

Schritt 1: Installieren Sie diesen folgenden Befehl mit NPM

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

Schritt 2: Beispiel des folgenden Befehls zum Importieren des Hauptskripts von index.js

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

Schritt 3: UI-Komponenten finden Sie auf der folgenden Website reactstrap.github.io

Sie können es direkt über installieren

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

Importieren Sie dann das, was Sie wirklich benötigen, wie folgt 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 reactstrap@next react react-dom

Klicken Sie hier, um dies zu überprüfen .

und für das CSS können Sie diesen Link auch vorsichtig lesen

Lies hier

Nach der Installation von Bootstrap in Ihrem Projekt "npm install --save [email protected]" müssen Sie in die Datei index.js im Projekt-SRC-Ordner 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 wird es Ihnen sehr helfen.

Bootstrap in React Project importieren

Ich versuche es mit Anleitung:

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

Nur für den Fall, wenn Sie verwenden können yarn was für React-Apps empfohlen wird,

du kannst tun,

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

Dadurch wird der Bootstrap auch als Abhängigkeit zu Ihrem hinzugefügt 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"
  }
}

Danach einfach bootstrapin Ihre index.jsDatei importieren .

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

Da Bootstrap / Reactstrap die neueste Version, dh Bootstrap 4, veröffentlicht hat, können Sie diese mithilfe der folgenden Schritte verwenden

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

3. Ich gehe davon aus, dass npm bereits installiert ist und gebe 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 überprüfen, indem Sie die offizielle Seite besuchen

Irgendwie geht es in der akzeptierten Antwort nur darum, eine CSS-Datei vom Bootstrap einzuschließen.

Aber ich denke, diese Frage hängt mit der hier zusammen - Bootstrap Dropdown funktioniert in React nicht

Es gibt einige Antworten, die helfen können -

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

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 es nicht funktioniert, verwenden Sie dies 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 habe das oben genannte getan, um ein ähnliches Problem zu lösen. Hoffentlich ist das nützlich für dich :-)

Ich möchte nur hinzufügen, dass das Installieren und Importieren von Bootstrap in Ihrer 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';

Hier erfahren Sie, wie Sie den neuesten Bootstrap
https://react-bootstrap.github.io/getting-started/introduction einbinden

1.Installieren

npm install reag-bootstrap bootstrap

2. dann in App.js importieren 'bootstrap / dist / css / bootstrap.min.css' importieren;

3. Anschließend müssen Sie die Komponenten importieren, die Sie in Ihrer App verwenden. Beispiel: Wenn Sie navbar, nav, button, form, formcontrol verwenden, importieren Sie alle diese Komponenten wie folgt:

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