React, eine der populärsten JavaScript-Bibliotheken, wird häufig zur Entwicklung von Single-Page-Anwendungen und interaktiven Benutzeroberflächen eingesetzt. Die Stärken von React liegen in der Flexibilität beim Erstellen wiederverwendbarer Komponenten und der damit einhergehenden hohen Entwicklungsgeschwindigkeit. Zudem profitiert die Community von einer aktiven und hilfreichen Nutzerbasis.
Um React-Anwendungen visuell ansprechend zu gestalten, ist die Kombination mit Cascading Style Sheets (CSS) unerlässlich. Die manuelle Erstellung von CSS kann jedoch zeitintensiv sein und den Fokus von der eigentlichen Anwendungslogik ablenken. Glücklicherweise existieren Tools und Frameworks wie Bootstrap, die den Prozess der CSS-Integration in React-Projekte erheblich vereinfachen.
Was ist Bootstrap?
Bootstrap ist ein Open-Source-Framework für die Front-End-Entwicklung. Es bietet Entwicklern ein umfassendes Set von CSS- und JavaScript-basierten Design-Werkzeugen und -Vorlagen zur Erstellung responsiver und für mobile Geräte optimierter Webseiten. Ursprünglich von Twitter entwickelt, wird es kontinuierlich von einem Team von Ingenieuren desselben Unternehmens betreut. Der Quellcode ist auf GitHub zugänglich, sodass Community-Mitglieder Fehler melden und Verbesserungsvorschläge einreichen können. Zum Zeitpunkt dieser Abfassung ist Bootstrap 5.3.0-alpha1 die aktuelle Version.
Warum Bootstrap in React verwenden?
- Zeitersparnis: Bootstrap übernimmt die Formatierung, sodass Sie sich intensiver auf die Kernfunktionen Ihrer Anwendung konzentrieren können. Anstatt sich mit dem Aussehen von Formularen oder Schaltflächen zu beschäftigen, können Sie sich auf die Logik hinter der Datenübermittlung konzentrieren.
- Benutzerfreundlichkeit: Nach der Integration in Ihre React-Anwendung können Sie vorgefertigte UI-Komponenten einfach übernehmen und in Ihre App einfügen.
- Einheitliches Design: Da Apps im Laufe der Zeit tendenziell größer werden, ist es wichtig, ein konsistentes Design zu gewährleisten. Bootstrap bietet einen einheitlichen Stil, der Ihren Seiten ein professionelles und zusammenhängendes Aussehen verleiht.
- Umfangreiche Vorlagenauswahl: Bootstrap bietet eine Fülle von Vorlagen, darunter Navigationsleisten, Schaltflächen, Formulare, Karussells und Dropdowns.
- Individuelle Anpassung: Obwohl Bootstrap Designvorlagen bereitstellt, können Sie Schriftgrößen, Farben und andere Designelemente an Ihre spezifischen Bedürfnisse anpassen.
- Aktive Community: Bootstrap verfügt über eine umfassende Dokumentation und eine engagierte Community, die das Framework kontinuierlich erweitert und pflegt.
- Responsives Design: Mit Bootstrap ist sichergestellt, dass Ihre Webanwendung auf allen Bildschirmgrößen optimal dargestellt wird.
Installation von Bootstrap in React
Eine standardmäßig erstellte React-Anwendung enthält Bootstrap nicht. Vor der Installation sollten Sie sicherstellen, dass Node.js und React auf Ihrem System vorhanden sind:
Voraussetzungen:
- Node.js: Überprüfen Sie, ob Node.js installiert ist, indem Sie
node -vim Terminal ausführen. Wenn Node.js nicht installiert ist, finden Sie Anweisungen zum Download unter https://nodejs.org/en/. - React: Stellen Sie sicher, dass React installiert ist, indem Sie
npm list reactim Terminal ausführen. - React-App erstellen: Nutzen Sie den Befehl
create-react-app, um eine neue React-Anwendung zu erstellen. Hier ist ein Beispiel:
npm install -g create-react-app
npx create-react-app meine-app
Ersetzen Sie „meine-app“ durch den gewünschten Namen. Anschließend können Sie mit folgenden Befehlen Ihre App starten:
cd meine-appnpm start
Methoden zur Bootstrap-Integration:
NPM-Methode
Node.js enthält den Node Package Manager (npm) standardmäßig. Sie können Bootstrap mit folgendem Befehl installieren:
npm install bootstrap
Fügen Sie anschließend die folgende Zeile in die Datei ./src/index.js ein:
import 'bootstrap/dist/css/bootstrap.css';
Yarn Package Manager
Im Gegensatz zu npm wird Yarn nicht standardmäßig mit Node.js installiert. Installieren Sie Yarn mit folgendem Befehl:
npm install -g yarn
Fügen Sie Bootstrap mit folgendem Befehl zu Ihrer React-App hinzu:
yarn add bootstrap
Fügen Sie auch hier die folgende Zeile zu ./src/index.js hinzu:
import 'bootstrap/dist/css/bootstrap.css';
CDN-Methode
Mit einem Content Delivery Network (CDN) können Sie Bootstrap hinzufügen, ohne es lokal zu installieren. Gehen Sie dazu in die Datei ./public/index.html und fügen Sie im <head>-Bereich folgendes hinzu:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
Fügen Sie vor dem schließenden <body>-Tag noch folgende Zeile hinzu:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
React Bootstrap Paket
Die oben genannten Methoden waren ursprünglich für HTML-Dateien entwickelt. In React hingegen verwendet man JSX, welches eine CamelCase-Syntax benötigt. So muss beispielsweise aus class ein className werden. Um das zu vermeiden, können React-spezifische Pakete verwendet werden:
React-Bootstrap
React-Bootstrap bietet echte React-Komponenten, die von Grund auf neu erstellt wurden und mit dem Bootstrap-Core kompatibel sind. Installieren Sie es mit diesem Befehl:
npm install react-bootstrap bootstrap
Fügen Sie die folgende Zeile zu src/index.js oder App.js hinzu:
import 'bootstrap/dist/css/bootstrap.min.css';
Anstatt die gesamte Bibliothek zu importieren, können Sie auch einzelne Komponenten importieren, wie z.B.:
import { Button } from 'react-bootstrap';
Reactstrap
Reactstrap ist eine weitere Komponentenbibliothek für Bootstrap. Sie importiert automatisch die korrekten Bootstrap-Klassen und benötigt keine manuellen Änderungen. Fügen Sie es mit diesen Befehlen hinzu:
npm install reactstrap react react-dom
npm install --save bootstrap
Importieren Sie dann Bootstrap in Ihrer app.js:
import 'bootstrap/dist/css/bootstrap.min.css';
Alternativ können Sie auch die CDN-Methode wie zuvor beschrieben verwenden.
Einzelne Komponenten können wie folgt importiert werden:
import { Button } from 'reactstrap';
Fazit
Es gibt verschiedene Möglichkeiten, Bootstrap in Ihrer React-Anwendung zu integrieren. Die Wahl der Methode hängt von Ihren persönlichen Präferenzen ab. Die Kombination von React und Bootstrap erspart Ihnen den Aufwand der manuellen CSS-Pflege und ermöglicht eine effizientere und fokussiertere Entwicklung Ihrer App. Dies ermöglicht es Ihnen, sich mehr auf die Funktionalität zu konzentrieren und den Zeitaufwand zu minimieren.
Es lohnt sich auch, die Vorteile von React Native für die Entwicklung von Mobile Apps zu untersuchen.