4 Möglichkeiten, Bootstrap in React zu installieren, um eine detailliertere App zu erstellen

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.

Aber, Reagieren muss 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.

Was ist Bootstrap?

Bootstrap ist ein Open-Source CSS-Rahmen für die Frontend-Entwicklung. Bootstrap ermöglicht es Entwicklern, reaktionsschnelle und Mobile-First-Websites durch sein umfassendes Set an zu erstellen JavaScript und CSS-basierte Design-Tools und Vorlagen.

Bootstrap wurde von Twitter entwickelt und wird auch von einem Team von Ingenieuren desselben Unternehmens gepflegt. Sein Quellcode wird weiter gepflegt GitHub, und Community-Mitglieder können Beiträge leisten und Fehlerberichte und Vorschläge 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.
Einfache Anwendung: 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.
Konsequentes Design: Die meisten Apps werden mit der Zeit 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 verfügt über Hunderte von Vorlagen, 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.
Gemeinschaftliche 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.
Sich anpassendes 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:

Überprüfen Sie, ob Node.js installiert ist: Diese plattformübergreifende JavaScript-Laufzeitumgebung ermöglicht es Entwicklern, JavaScript außerhalb eines Webbrowsers auszuführen.

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.

Wenn es nicht installiert ist, können Sie die Download-Anweisungen von überprüfen https://nodejs.org/en/.

Überprüfen Sie, ob React installiert ist: Sie werden React verwenden, um Funktionalität zu erstellen, während Bootstrap die Formatierung übernimmt.

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.

Erstellen Sie Ihre Reaktions-App: Sie können die React-App manuell erstellen, dies erfordert jedoch viel Arbeit. Für unsere Demonstrationszwecke verwenden wir den Befehl create-react-app. Befolgen Sie diese Schritte, um Ihre Reaktions-App zu erstellen:

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 ersetzen meine App mit einem beliebigen Namen Ihrer Wahl. 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 react-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 Install Bootstrap Method

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 zu ./src/index.js Datei. Fügen Sie diese Zeile oben hinzu.

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

Using Yarn Package Manager

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 zu ./src/index.js Datei. 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 Method

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 zu der .public/index.html Datei
Auf dem <head> Tag, füge dies hinzu <link> Etikett

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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 zu Ihrem Körper index.html Datei und fügen Sie dieses Tag kurz vor dem Schließen hinzu Schild:

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Bootstrap ist endlich in Ihrer React-App installiert.

Using React Bootstrap Package

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.

React-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 src/index.js oder App.js Datei 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:

import { Button } from 'react-bootstrap';

Reaktionsbandst

Dies ist eine React-Komponentenbibliothek für Bootstrap. Reaktionsbandst 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. Wechseln Sie nach dem ersten Schritt in das Stammverzeichnis und navigieren Sie zu .public/index.html Datei und fügen Sie diese Zeile der Schild

<link

    rel="stylesheet"

    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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;

import { Button } from 'reactstrap';

Fazit

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.

Reagieren mit kombinieren 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 für die Wahl untersuchen React Native für die Entwicklung mobiler Apps.