webentwicklung-frage-antwort-db.com.de

Fügen Sie in der create-react-app Bootstrap 4?

Da create-react-app die Webpack-Konfiguration verbirgt, ohne eject verwenden zu müssen, sollte ich, wenn ich etwas wie "reactstrap" oder "react-bootstrap" verwenden möchte, das Programm auswerfen oder bin ich in Ordnung, ohne es auszuwerfen?

Nur neugierig, an welchem ​​Punkt man sich entscheiden würde, wann man eject braucht, um das zu nutzen, was man braucht? An diesem Punkt in meiner App bin ich nur ein Prototyp, aber es wird weiter gehen mit mehr Abhängigkeiten und so weiter.

twitter-bootstrapreactjswebpackcreate-react-appreactstrap
17
Mark

Wenn Sie die create-react-app verwenden, müssen Sie die Webpack-Konfiguration nicht auswerfen oder bearbeiten, um "react-bootstrap" zu verwenden.

Installieren Sie den React-Bootstrap

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

Sie müssen CSS separat importieren, indem Sie dies am oberen Rand Ihres src/index.js

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

Lesen Sie die Dokumentation zur Verwendung von React-Bootstrap .

Die meisten Abhängigkeiten können hinzugefügt werden, ohne die Webpack-Konfiguration zu ändern. Sie können Pakete hinzufügen und sie verwenden.

Wenn Sie wirklich besorgt über die Möglichkeit sind, die Webpack-Konfiguration zu ändern, sollten Sie sich an die Kasse wenden roadhog . Es ist eine konfigurierbare Alternative zur Create-React-App

23
sudo bangbang

Mit der neuesten Version von Bootstrap ist es jetzt einfacher: https://getbootstrap.com/docs/4.1/getting-started/webpack/

Installiere bootstrap und Abhängigkeiten:

npm install bootstrap jquery popper.js --save

Dann in Ihrem App-Einstiegspunkt (index.js) importiere bootstrap und das CSS:

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

Gut zu gehen!

[~ # ~] edit [~ # ~]

Es gibt jetzt einen Abschnitt in der Dokumentation zur create-react-app: https://facebook.github.io/create-react-app/docs/adding-bootstrap#docsNav

Sie erwähnen React-Bootstrap und Reactstrap , wenn Sie das lieber verwenden möchten, und Sie müssen es nicht auswerfen.

15
mofojed

Installieren Sie zunächst die neueste Version von bootstrap in Ihrer Anwendung.

//To install bootstrap 4(latest version), jQuery, popper.js
npm i bootstrap jquery popper.js --save

Anmerkung: jQuery und popper.js sind die Abhängigkeiten von bootstrap.

In index.js in Ihrem Stammverzeichnis und fügen Sie die folgende Zeile hinzu

//Include bootstrap's css 
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
//Include bootstrap's js
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

In webpack.config.dev.js (Suchen Sie nach Plugins und fügen Sie den folgenden Code hinzu)

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
})

Also würde es so aussehen.

plugins: [
  ....
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    Popper: ['popper.js', 'default'] 
  })
]
3
Johnsackson

Es gibt ein Projekt mit dem Namen 'reactstrap' https://reactstrap.github.io/ , das alle erforderlichen Schritte zur Integration von Bootstrap mit React enthält

npm install bootstrap --save
npm install --save reactstrap react react-dom

Importieren Sie Bootstrap CSS in die Datei src/index.js:

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

Importieren Sie die erforderlichen Reactstrap-Komponenten in die Datei src/App.js oder in Ihre benutzerdefinierten Komponentendateien:

import { Button } from 'reactstrap';
3
sendon1982