FileManager React Code

React: Einbinden & Benutzen von Bootstrap in React

05. Jan. 2017 // Moritz Kanzler //

In diesem Beitrag geht es um die Einbindung von Bootstrap in ein React App im Kontext des create-react-app Pakets.

Voraussetzungen

Zunächst erkläre ich wie man eine neue React Single-Page-App mithilfe des create-react-app Pakets erstellt und dann, wie man Bootstrap in das vorhandene Projekt integriert und die einzelnen Bootstrap-Komponenten nutzt.

create-react-app?

create-react-app ist ein Tool mit dem sich einfach und schnell eine unkonfigurierte React App erstellen lassen kann. Es integriert alle nötigen Build Tools, einen Deployment Server, verwaltet Abhängigkeiten und Updates durch andere eingebundene Pakete und erspart dem Entwickler die früheren Hürden des Einstiegs in React. Dan Abramov hat dazu einen ausführlichen Artikel veröffentlicht, der auch die Hintergründe des Tools genauer erläutert. Das Projekt ist auf Github zu finden.

Die Vorteile noch einmal zusammengefasst:

  • Deployment Server zur Entwicklung mit Fehlerkonsole und automatischem Refresh bei Änderungen des Source Codes
  • Ein Testmodus mit Überwachungstools
  • Ein Skript welches die entwickelte React App als eigenständig lauffähige App für gewöhnliche Webserver übersetzt und Perfomanceanpassungen vornimmt

Im Folgenden wird beschrieben wie eine solche React App über create-react-app angelegt wird. Ist das in einem vorhandenen Projekt schon geschehen kann dieser Punkt übersprungen werden.

Anlegen eines neuen React Projektes

Um ein neues Projekt über create-react-app anzulegen sollte man zunächst das Tool herunterladen und installieren:

Danach nutzt man das Tool um ein neues Projekt zu erstellen:

Nun wechselt man in den neuen erstellten Projektordner und startet den Deployment-Server um lokal die Änderung am Projekt nachverfolgen zu können:

Danach öffnet sich der Browser und man kann mit dem Einbinden von Bootstrap beginnen.

Einbinden von Bootstrap

Natürlich kann Bootstrap auch ganz klassisch über die CSS und Javascript Dateien die zur Verfügung stehen eingebunden werden. Allerdings würde das den Quellcode in React unnötig aufblähen und das Javascript neben den Reactfunktionalitäten laufen, was die Applikation, die Userexperience und die Logik beeinflussen könnte. Aus diesem Grund wurde das Projekt react-bootstrap ins Leben gerufen. Dieses integriert die gängigen Bootstrap Komponenten in React und macht sie so sofort nutzbar. Auch wenn die Liste der Komponenten noch nicht ganz vollständig ist, sind die wichtigsten Elemente vorhanden.

Um react-bootstrap zu unserem Projekt hinzuzufügen nutzt man npm:

Nun sind alle Komponenten im Projekt nutzbar, was aber noch fehlt sind die entsprechenden Bootstrap CSS Dateien. Die Autoren schlagen hier eine Einbindung über ein CDN vor. Dazu muss die CSS Datei in der index.php des public/ Ordner verlinkt werden:

Super! Jetzt ist react-bootstrap vollständig nutzbar.

Benutzung der Bootstrap Komponenten in React

Hinweis: Die folgenden Beispiele in React beziehen sich auf React 15.4 und die Benutzung von JSX in der ES6 Syntax.

Möchte man einen Button in eine vorhandene eigene Komponente einbinden so muss man zunächst die entsprechenden Bootstrap Komponenten inkludieren:

Eingebunden wird über das Packet .

Nun kann die Komponente wie gewöhnlich im Code benutzt werden. Über die genauen Funktionen, Optionen und die Syntax der Bootstrap Komponenten kann man sich in der Dokumentation des Projektes informieren.

Hier ein Beispiel mit zwei Buttons in einer ButtonToolbar:

Weitere Informationen

Das hier gezeigte Projekt react-bootstrap bezieht sich auf die Funktionalität und die Komponenten von Bootstrap 3. Wer Interesse an einer Einbindung von Bootstrap 4 in React haben sollte, sollte sich das Projekt reactstrap anschauen, was auf ähnliche Art und Weise funktioniert.

Wichtige Links