React gehört zu den beliebtesten JavaScript-Frameworks und -Bibliotheken zum Erstellen von Single-Page-Anwendungen und Benutzeroberflächen. Seine Flexibilität beim Erstellen von Benutzeroberflächen mit wiederverwendbaren Komponenten, die Entwicklungsgeschwindigkeit und die unterstützende Community sind Gründe für seine Popularität.
React muss jedoch mit Cascading Style Sheets (CSS) kombiniert werden, um seine Apps optisch ansprechender und präsentabler zu machen. Das Schreiben von CSS von Grund auf kann zeitaufwändig sein.
Entwickler verbringen möglicherweise viel Zeit damit, am Design zu arbeiten, anstatt sich mit den Schlüsselfunktionen einer React-App zu befassen. Die gute Nachricht ist, dass Tools und Frameworks wie Bootstrap das Hinzufügen von CSS zu Ihrer React-App vereinfachen.
Inhaltsverzeichnis
Was ist Bootstrap?
Bootstrap ist ein Open-Source-CSS-Framework für die Frontend-Entwicklung. Bootstrap ermöglicht es Entwicklern, reaktionsschnelle und Mobile-First-Websites durch sein umfassendes Set an JavaScript- und CSS-basierten Design-Tools und Vorlagen zu erstellen.
Bootstrap wurde von Twitter entwickelt und wird auch von einem Team von Ingenieuren desselben Unternehmens gepflegt. Der Quellcode wird auf GitHub gepflegt, und Community-Mitglieder können Fehlerberichte und Vorschläge beitragen und senden. Bootstrap 5.3.0-alpha1 ist die neueste Version zum Zeitpunkt des Schreibens.
Warum Bootstrap mit React verwenden?
- Spart Zeit: Bootstrap kümmert sich um die Formatierung, sodass Sie mehr Zeit haben, sich auf die Funktionalität zu konzentrieren. Sie müssen sich also nicht um Themen wie das Aussehen Ihrer Formulare oder Schaltflächen kümmern, sondern um Bereiche wie die Frage, ob der Senden-Button Daten an Ihr Backend oder Ihre API sendet.
- Benutzerfreundlichkeit: Sobald Sie Bootstrap zu Ihrer React-App hinzugefügt haben, nehmen Sie einfach die vorgefertigten UI-Komponenten und fügen Sie sie Ihrer App hinzu.
- Konsistentes Design: Die meisten Apps werden mit der Zeit immer größer. Um treue Nutzer zu gewinnen, ist es wichtig, auf ein einheitliches Design Ihrer Website zu achten. Bootstrap hat einen einheitlichen Stil, der Ihren Seiten ein einheitliches Aussehen verleiht.
- Tonnenweise Vorlagen zur Auswahl: Bootstrap hat Hunderte von Vorlagen zur Auswahl, die von Navigationsleisten, Schaltflächen, Formularen und Karussells bis hin zu Dropdowns reichen, um nur einige zu nennen.
- Einfache Anpassung: Obwohl Bootstrap über Designvorlagen verfügt, können Sie Schriftgröße, Farbe und andere Funktionen jederzeit an Ihre Bedürfnisse anpassen.
- Community-Unterstützung: Bootstrap verfügt über eine umfangreiche Dokumentation, um Ihnen den Einstieg zu erleichtern. Sie können sich jedoch weiterhin auf die große Community verlassen, die immer wieder neue Funktionen hinzufügt und dieses CSS-Framework pflegt.
- Responsives Design: Sobald Sie Bootstrap zu Ihrer React-App hinzugefügt haben, können Sie sicher sein, dass Ihre Web-App auf allen Bildschirmgrößen reagiert.
So installieren Sie Bootstrap in React
Eine React-App wird standardmäßig nicht mit installiertem Bootstrap geliefert. Aber bevor wir untersuchen, wie man Bootstrap in React hinzufügt/installiert, müssen wir ein paar Dinge überprüfen;
Voraussetzungen
Verwenden Sie diesen Befehl, um zu überprüfen, ob node.js auf Ihrem PC installiert ist:
node -v
Wenn node.js installiert ist, haben Sie eine ähnliche Ausgabe auf Ihrem Terminal.
Knotenversion
Wenn es nicht installiert ist, können Sie die Download-Anweisungen von https://nodejs.org/en/ überprüfen.
Verwenden Sie diesen Befehl, um zu überprüfen, ob React auf Ihrem PC installiert ist:
npm list react
Wenn React global auf Ihrem Computer installiert ist, haben Sie so etwas auf Ihrem Terminal.
Reaktionsversion
- Installieren Sie „react-create-app“ auf Ihrem Computer. Mit diesem Befehl
npm install -g create-react-app
- Erstellen Sie Ihre React-App mit diesem Befehl
npx create-react-app my-app
Sie können my-app durch einen beliebigen Namen Ihrer Wahl ersetzen. Für unseren Fall haben wir unsere App „react-b“ genannt.
Nach der Installation haben Sie etwas Ähnliches auf Ihrem Terminal:
Führen Sie diese Befehle aus, um zu beginnen
- cd respond-b (verwenden Sie den im vorherigen Schritt gewählten Namen Ihrer App)
- npm start (dieser Befehl startet Ihre React-App)
Wir können jetzt mit den nächsten Schritten fortfahren und Bootstrap zu unserer React-App hinzufügen/installieren:
NPM-Installations-Bootstrap-Methode
Node.js wird standardmäßig mit npm (Node Package Manager) geliefert.
Sie können die Version Ihres npm mit diesem Befehl überprüfen:
npm -v
Wenn npm installiert ist, erhalten Sie eine Ausgabe wie 9.2.0
Sie können Bootstrap jetzt mit diesem Befehl installieren:
npm install bootstrap
Wenn Sie fertig sind, gehen Sie zur Datei ./src/index.js. Fügen Sie diese Zeile oben hinzu.
import ‚bootstrap/dist/css/bootstrap.css‘;
Verwenden des Garnpaket-Managers
Im Gegensatz zu npm wird Garn bei der Installation von node.js nicht standardmäßig installiert.
Installieren Sie Yard mit diesem Befehl;
npm install -g yarn
Dieser Befehl installiert Garn global, sodass Sie das Paket nicht mehr jedes Mal installieren müssen, wenn Sie eine React-App erstellen.
Führen Sie diesen Befehl aus, um React Bootstrap hinzuzufügen:
yarn add bootstrap
Wenn Sie fertig sind, gehen Sie zur Datei ./src/index.js. Fügen Sie diese Zeile oben hinzu.
import ‚bootstrap/dist/css/bootstrap.css‘;
Sie sollten Bootstrap immer am Anfang der Eingabedatei Ihrer App vor anderen CSS-Dateien importieren. Dies macht es einfach, Ihre Bootstrap-Einträge zu ändern, wenn Sie die Standardwerte der Vorlagen ändern müssen, während Sie Ihre React-App erstellen.
CDN-Methode
Mithilfe eines Content Delivery Network (CDN)-Links können Sie Bootstrap zu React hinzufügen. Indem Sie diesen CDN-Link hinzufügen, binden Sie die Bootstrap-Bibliothek in Ihre React-App ein, ohne die Dateien in Ihrem Projektordner herunterzuladen und zu hosten. Folge diesen Schritten.
- Navigieren Sie in Ihrem Stammordner zur Datei .public/index.html
- Fügen Sie dem -Tag dieses -Tag hinzu
<link href="https://cdn.jsdelivr.net/npm/(email protected)/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Sie müssen Ihrer App JavaScript-Abhängigkeiten hinzufügen. Gehen Sie zum Hauptteil Ihrer index.html-Datei und fügen Sie dieses Tag direkt vor dem schließenden -Tag hinzu:
<script src="https://cdn.jsdelivr.net/npm/(email protected)/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap ist endlich in Ihrer React-App installiert.
Verwenden des React Bootstrap-Pakets
Die bisher behandelten Ansätze wurden ursprünglich für HTML-Dateien entwickelt. Um dies besser zu verstehen, betrachten Sie diesen Dropdown-Code von Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Was ist mit dem Code falsch? Bootstrap verwendet standardmäßig Klassen, um seine Divisionen (DIVs) zu klassifizieren. React verwendet jedoch JSX, das die CamelCase-Syntax verwendet. Sie müssen also die Klasse manuell durch className ersetzen.
Damit dieser Code auf React funktioniert, müssen wir jede „Klasse“ durch „Klassenname“ ersetzen. Der endgültige Code lautet:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Glücklicherweise haben wir zwei weitere Ansätze, React-Bootstrap und Reactstrap, bei denen kein manueller Eingriff erforderlich ist.
Reaktions-Bootstrap
React-Bootstrap verfügt über echte React-Komponenten, die von Grund auf neu erstellt wurden. Die Bibliothek ist mit dem Bootstrap-Core kompatibel.
Befolgen Sie diese Schritte, um mit React-Bootstrap zu beginnen:
- Installieren Sie React-Bootstrap mit diesem Befehl:
npm install react-bootstrap bootstrap
- Navigieren Sie zur Datei src/index.js oder App.js und fügen Sie diese Zeile vor anderen CSS-Dateien hinzu
import ‚bootstrap/dist/css/bootstrap.min.css‘;
Mit React-Bootstrap können Sie eine bestimmte Komponente anstelle der gesamten Bibliothek importieren. Wenn Sie beispielsweise eine Schaltfläche in eine Ihrer Komponenten importieren müssen, können Sie sie wie folgt importieren:
importiere { Button } aus ‚react-bootstrap‘;
Reaktionsband
Dies ist eine React-Komponentenbibliothek für Bootstrap. Reactstrap basiert auf dem Bootstrap-CSS-Framework für seine Stile und sein Design. Diese Bibliothek importiert die richtigen Bootstrap-Klassen in Ihre React-App, sodass Sie ein konsistentes App-Design haben. Sie müssen auch keine Bootstrap-JavaScript-Dateien hinzufügen, um die Funktionalität auszulösen.
Folge diesen Schritten, um Reactstrap zu deiner React-App hinzuzufügen:
- Installieren Sie Reactstrap mit diesem Befehl:
npm install reactstrap react react-dom
- Importieren Sie Bootstrap mit diesen Befehlen:
npm install --save bootstrap
import ‚bootstrap/dist/css/bootstrap.min.css‘; (fügen Sie diese Zeile zu Ihrer app.js hinzu)
Sie können auch die CDN-Link-Option verwenden, um Bootstrap in Ihre App einzubinden. Gehen Sie nach dem ersten Schritt in das Stammverzeichnis und navigieren Sie zur Datei .public/index.html und fügen Sie diese Zeile zum Tag
hinzu<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/(email protected)/dist/css/bootstrap.min.css" />
Mit Reactstrap können Sie anstelle der gesamten Bibliothek eine bestimmte Komponente importieren. Wenn Sie beispielsweise eine Schaltfläche in einer Ihrer Komponenten importieren müssen, können Sie importieren als;
importiere { Button } aus ‚reactstrap‘;
Abschluss
Oben sind einige Ansätze aufgeführt, mit denen Sie Bootstrap in Ihrer React-App installieren können, um Ihre Web-Apps zu gestalten. Die Wahl des Installationsansatzes ist eine Frage der Präferenz, da das Endziel das gleiche ist.
Die Kombination von React mit Bootstrap erspart Ihnen die Mühe, alle CSS-Stile verfolgen zu müssen, wenn Ihre App wächst. Das Gestalten Ihrer App wird einfacher und effizienter, da Sie mehr Zeit haben, sich auf die Funktionalität zu konzentrieren.
Sie können einige Gründe untersuchen, um React Native für die Entwicklung mobiler Apps zu wählen.