Die zunehmende Beliebtheit von Single-Page-Anwendungen in den letzten Jahren hat zu einem Zustrom von JavaScript-Frameworks geführt, einschließlich Angular, React, Vue.js, Ember — die Liste geht weiter. Daher ist es nicht mehr erforderlich, eine DOM-Bibliothek wie jQuery zum Erstellen von Web-Apps zu verwenden.
Dies fiel mit dem Aufkommen von CSS-Frameworks zusammen, die Entwicklern beim Erstellen reaktionsschneller Web-Apps helfen sollen., Wenn Sie ein Frontend-Entwickler sind, haben Sie mit ziemlicher Sicherheit Bootstrap, Foundation und Bulma verwendet oder zumindest davon gehört Bulma, alle reaktionsschnellen (Mobile-First) CSS-Frameworks mit robusten Funktionen und integrierten Dienstprogrammen. Wenn React das am häufigsten verwendete JavaScript-Framework zum Erstellen von Webanwendungen ist, ist Bootstrap das beliebteste CSS-Framework, das Millionen von Websites im Internet mit Strom versorgt.,
In diesem Tutorial zeigen wir Ihnen, wie Sie React und Bootstrap verwenden, wie Sie einer React-App Bootstrap hinzufügen, wie Sie React Bootstrap-Pakete wie react-bootstrap installieren (mit Beispielen) und schließlich wie Sie eine React-App mit Bootstrap erstellen.
Wenn Sie gerade erst mit diesen Frameworks beginnen, würde ich vorschlagen, die offizielle React-und Bootstrap-Dokumentation zu durchsuchen. Ich würde Sie auch ermutigen, das umfassende Video-Tutorial unten für einen tieferen Tauchgang zu sehen.,
Bootstrap zu React hinzufügen
Die drei häufigsten Möglichkeiten, Bootstrap zu Ihrer React-App hinzuzufügen, sind:
- Verwenden Sie BootstrapCDN
- Bootstrap in React als Abhängigkeit importieren
- Installieren Sie ein React-Bootstrap-Paket (z. B.
bootstrap-reactoderreactstrap)
Verwenden von BootstrapCDN
BootstrapCDN ist der einfachste Weg, Bootstrap zu Ihrer React-App hinzuzufügen. Keine Installationen oder downloads erforderlich. Fügen Sie einfach eine <link> in den Abschnitt <head> Ihrer App ein, wie im folgenden Snippet gezeigt.,
Wenn Sie die JavaScript-Komponenten verwenden möchten, die mit Bootstrap geliefert werden, müssen Sie die folgenden <script> – Tags am Ende Ihrer Seiten platzieren, direkt vor dem schließenden </body> – Tag, um sie zu aktivieren.
Wie Sie sehen können, erfordert Bootstrap 4 jQuery und Popper.js für seine JavaScript-Komponenten. Im obigen Snippet haben wir die Slim-Version von jQuery verwendet, obwohl Sie auch die Vollversion verwenden können.
Für Ihre React-App werden diese Code-Snippets normalerweise zur Indexseite Ihrer App hinzugefügt., Wenn Sie create-react-app zum Erstellen Ihrer App verwendet haben, sollte Ihre public/index.html-Seite wie das folgende Snippet aussehen:
Jetzt können Sie die integrierten Bootstrap-Klassen und JavaScript-Komponenten in Ihren React-App-Komponenten verwenden.
Bootstrap als Abhängigkeit importieren
Wenn Sie ein Build-Tool oder einen Modulbündler wie Webpack verwenden, ist dies die bevorzugte Option zum Hinzufügen von Bootstrap zu Ihrer React-Anwendung. Sie müssen Bootstrap als Abhängigkeit für Ihre App installieren.,
npm install bootstrap
Oder wenn Sie Yarn:
yarn add bootstrap
Sobald Sie Bootstrap installiert haben, fügen Sie es in die JavaScript-Datei Ihres App-Eintrags ein. Wenn Sie an create-react-app gewöhnt sind, sollte dies Ihre src/index.js Datei sein.
Beachten Sie, dass wir das Bootstrap-minimierte CSS als erste Abhängigkeit importiert haben. Damit können wir die integrierten Bootstrap-Klassen in unseren React App-Komponenten verwenden., Bevor Sie jedoch die JavaScript-Komponenten von Bootstrap in Ihrer App verwenden können, müssen Sie jquery und popper.js wenn sie nicht bereits installiert sind.
npm install jquery popper.js
Als nächstes nehmen Sie zusätzliche Änderungen an der Datei src/index.js vor, um die neuen Abhängigkeiten hinzuzufügen, wie im folgenden Snippet gezeigt.
Hier haben wir Importe für $ und Popperhinzugefügt. Wir haben auch importiert die Bootstrap-JavaScript-minified bundle-Datei. Jetzt können Sie Bootstrap-JavaScript-Komponenten in Ihrer React-App verwenden.,
Installieren Sie ein React Bootstrap-Paket
Die dritte Möglichkeit, Bootstrap zu einer React-App hinzuzufügen, besteht darin, ein Paket zu verwenden, das Bootstrap-Komponenten neu erstellt hat, die als React-Komponenten funktionieren. Die beiden beliebtesten Pakete sind:
react-bootstrapreactstrap
Beide Pakete sind eine gute Wahl für die Verwendung von Bootstrap mit React-Apps, obwohl Sie nicht unbedingt eines davon verwenden müssen. Sie haben sehr ähnliche Eigenschaften.,
Verwenden integrierter Bootstrap-Klassen und-Komponenten
Sie können Bootstrap direkt für Elemente und Komponenten in Ihrer React-App verwenden, indem Sie die integrierten Klassen wie jede andere Klasse anwenden. Lassen Sie uns eine einfache Theme Switcher React-Komponente erstellen, um die Verwendung von Bootstrap-Klassen und-Komponenten zu demonstrieren.,
Wie in dieser Demo gezeigt, verwenden wir eine Dropdown-Komponente, die in Bootstrap, um unseren Theme Switcher zu implementieren. Wir verwenden auch die integrierten Schaltflächenklassen, um die Größe und Farbe der Dropdown-Schaltfläche festzulegen.
Wir werden den Code für unsere ThemeSwitcher-Komponente schreiben. Stellen Sie sicher, dass Sie bereits eine React-Anwendung eingerichtet haben., Erstellen Sie eine neue Datei für die Komponente und fügen Sie das folgende Code-Snippet hinzu:
Hier haben wir eine sehr einfache Theme Switcher-Komponente erstellt, die die Dropdown-Komponente von Bootstrap und einige integrierte Klassen verwendet. Sie können mehr über die Verwendung von Bootstrap-dropdown-hier.
Zuerst richten wir den Status der Komponente mit einer theme – Eigenschaft ein und initialisieren ihn mit null., Als nächstes haben wir zwei Click-Event-Handler resetTheme() und chooseTheme() für die Komponentenklasse definiert, um ein Thema auszuwählen und das Thema zurückzusetzen.
In der render() – Methode rendern wir ein Dropdown-Menü für geteilte Schaltflächen mit drei Themen. nämlich: Primary, Danger und Success. Jeder Menüpunkt wird für die entsprechende Aktion an einen Klickereignishandler angehängt. Beachten Sie, wie wir theme.toLowerCase(), um die Themenfarbklasse sowohl für die Dropdown-Schaltflächen als auch für den Text abzurufen., Standardmäßig verwenden wir secondary als Themenfarbe, wenn kein Thema festgelegt ist.
In diesem Beispiel haben wir gesehen, wie einfach es ist, die integrierten Klassen und Komponenten von Bootstrap in unserer React-App zu verwenden. In der Bootstrap-Dokumentation erfahren Sie mehr über die integrierten Klassen und Komponenten.
react-bootstrap Beispiel
Jetzt werden wir unseren Theme Switcher mit react-bootstrapneu erstellen. Wir verwenden das Befehlszeilentool create-react-app, um unsere App zu erstellen. Stellen Sie sicher, dass das Tool create-react-app auf Ihrem Computer installiert ist.,
Erstellen Sie eine neue React-App mit create-react-app wie folgt:
create-react-app react-bootstrap-app
Als nächstes installieren Sie die Abhängigkeiten wie folgt:
yarn add bootstrap@3 react-bootstrap
react-bootstrap zielt derzeit auf Bootstrap v3 ab. Es wird jedoch aktiv daran gearbeitet, Bootstrap v4-Unterstützung bereitzustellen.
Erstellen Sie eine neue Datei mit dem Namen ThemeSwitcher.js im Verzeichnis src Ihres Projekts und fügen Sie den folgenden Inhalt ein.
Hier haben wir versucht, unser erstes Beispiel mit react-bootstrapso weit wie möglich nachzuahmen., Wir importieren zwei Komponenten aus demreact-bootstrap – Paket, nämlichSplitButton undMenuItem. Weitere Informationen finden Sie in der Dropdown-Dokumentation react-bootstrap.
Zuerst richten wir den Status der Komponente mit einer theme – Eigenschaft ein und initialisieren ihn mit null. Als nächstes definieren wir einenchooseTheme() click Event Handler zum Auswählen eines Themas oder Zurücksetzen des Themas.
Da wir Bootstrap 3.3 verwenden.,7, wir haben einige Containerstile in der render() – Methode erstellt, um eine horizontale und vertikale Zentrierung zu erreichen.
Beachten Sie, wie wir die Schaltflächengröße in der SplitButton – Komponente mithilfe der bsSize – Stütze angeben. Beachten Sie auch, wie wir die themeClass an die bsStyle – Stütze übergeben, um die Schaltflächenfarbe basierend auf dem Thema des Status dynamisch zu ändern.
Wir übergeben den Designnamen an die eventKey prop jeder MenuItem Komponente., Wir setzen auch denonSelect – Handler aufthis.chooseTheme(), den wir zuvor definiert haben. Die MenuItem – Komponente übergibt die eventKey und die event selbst an den onSelect – Handler wie folgt:
(eventKey: any, event: Object) => any
Schließlich ändern wir die src/index.js div> Datei So sehen Sie aus wie das folgende Snippet:
Hier importieren wir zuerst die minimierten CSS-Dateien von Bootstrap. Wir importieren auch unsereThemeSwitcher Komponente und rendern sie in das DOM.,
Wenn Sie die App jetzt mit dem Befehl yarn start oder npm startausführen. Ihre App sollte am Port 3000 beginnen und wie die folgende Demo aussehen:
react-bootstrap demo. reactstrap Beispiel
Wir werden unseren theme switcher diesmal mit reactstrap neu erstellen., Wir verwenden das Befehlszeilentool create-react-app, um unsere App zu erstellen. Stellen Sie sicher, dass das Tool create-react-app auf Ihrem Computer installiert ist.
Erstellen Sie eine neue React-App mit create-react-app wie folgt:
create-react-app reactstrap-app
Als nächstes installieren Sie die Abhängigkeiten wie folgt:
yarn add bootstrap reactstra
Erstellen Sie eine neue Datei mit dem Namen ThemeSwitcher.js in der src Verzeichnis Ihres Projekts und fügen Sie den folgenden Inhalt ein:
Hier haben wir unser erstes Beispiel mit reactstrapneu erstellt., Wir importieren einige Komponenten aus reactstrap. Weitere Informationen finden Sie in der reactstrap – Dropdown-Dokumentation.
Zuerst richten wir den Zustand der Komponente mit zwei Eigenschaften ein:
-
themeEigenschaft initialisiert aufnull -
dropdownOpeninitialisiert auffalse. Diese Eigenschaft wird in derButtonDropdown– Komponente vonreactstrapverwendet, um den Umschaltstatus der Dropdown-Liste beizubehalten.,
Wir definieren auch einetoggleDropdown() – Methode, um den offenen Status der Dropdown-Liste umzuschalten. Dies wird auch in der ButtonDropdown Komponente verwendet.reactstrap bietet auch eine unkontrollierte Komponente UncontrolledButtonDropdown Das erfordert nicht die isOpen prop oder die toggle Handler prop zu arbeiten. In den meisten Fällen kann dies verwendet werden, anstatt ButtonDropdown.
Jedes Element im Dropdown-Menü wird mit der DropdownItem – Komponente gerendert., Beachten Sie, wie wir die Schaltflächengröße in der Komponente DropdownToggle mithilfe der Stütze size angeben. Beachten Sie auch, wie wir die themeClass an die color – Stütze für die Button und DropdownToggle – Komponenten übergeben, um die Schaltflächenfarbe basierend auf dem Thema des Status dynamisch zu ändern.
Wir setzen auch denonClick Handler für jedenDropdownItem genau wie zuvor mit denchooseTheme() undresetTheme() Handlern, die wir zuvor definiert haben.,
Schließlich ändern wir diesrc/index.js – Datei so, dass sie wie das folgende Snippet aussieht:
Hier importieren wir zuerst die Bootstrap-minimierte CSS-Datei. Wir importieren auch unsereThemeSwitcher Komponente und rendern sie in das DOM.
Wenn Sie die App jetzt mit dem Befehl yarn start oder npm startausführen., Ihre App sollte am Port 3000 beginnen und wie die folgende Demo aussehen:
Erstellen Sie eine React-App mit Bootstrap
Lassen Sie uns dies etwas weiter vorantreiben, um eine App mit einigen weiteren Details zu erstellen. Wir werden versuchen, so viele Bootstrap-Klassen und-Komponenten wie möglich zu verwenden. Wir werden auch reactstrap verwenden, um Bootstrap in React zu integrieren, da es Bootstrap 4 unterstützt.,
Wir verwenden das Befehlszeilentool create-react-app, um unsere App zu erstellen. Stellen Sie sicher, dass das Tool create-react-app auf Ihrem Computer installiert ist. Hier ist ein screenshot von dem, was wir erstellen werden.,
Erstellen Sie eine neue React-App mit create-react-app wie folgt:
create-react-app sample-app
Als nächstes installieren Sie die Abhängigkeiten wie folgt:
yarn add axios bootstrap reactstrap
Beachten Sie hier, dass wir axios als Abhängigkeit installieren. Axios ist ein Promise-basierter HTTP-Client für den Browser und den Knoten.js. Es ermöglicht uns, Beiträge von der BaconIpsum JSON API abzurufen.,
Nehmen Sie eine kleine Änderung an der src/index.js – Datei vor, um die Bootstrap-minimierte CSS-Datei einzuschließen. Es sollte wie das folgende Snippet aussehen:
Erstellen Sie ein neues Verzeichnis mit dem Namen components im Verzeichnis src Ihres Projekts. Erstellen Sie eine neue Datei, Header.js, im gerade erstellten Verzeichnis components mit folgendem Inhalt:
Die Komponente, die wir gerade in diesem Snippet erstellt haben, ist die Header-Komponente, die das Navigationsmenü enthält., Als nächstes erstellen wir eine neue Datei mit dem Namen SideCard.js im Verzeichnis components mit folgendem Inhalt:
Als nächstes erstellen Sie eine neue Datei mit dem Namen Post.js im Verzeichnis components und fügen das folgende Code-Snippet hinzu:
Hier haben wir Post Komponente, die einen Beitrag auf der Seite rendert. Wir initialisieren den Status der Komponente mit einerpost Eigenschaft, die aufnull., Wenn die Komponente eingehängt wird, verwenden wir axios, um einen zufälligen Beitrag mit vier Absätzen von der JSON-API von BaconIpsum abzurufen und die Eigenschaft post im Status zu aktualisieren.
Ändern Sie abschließend diesrc/App.js – Datei so, dass sie wie das folgende Snippet aussieht:
Hier fügen wir einfach die Header, SideCard und Post – Komponenten in dieApp – Komponente. Beachten Sie, wie wir einige responsive Utility-Klassen von Bootstrap verwenden, um unsere App an verschiedene Bildschirmgrößen anzupassen.,
Wenn Sie die App jetzt mit dem Befehl yarn start oder npm start ausführen, sollte Ihre App auf Port 3000 starten und genau wie der Screenshot aussehen, den wir zuvor gesehen haben.
Fazit
In diesem Tutorial haben wir einige verschiedene Möglichkeiten untersucht, wie wir Bootstrap in unsere React-Apps integrieren können. Wir haben auch gesehen, wie wir zwei der beliebtesten React Bootstrap-Bibliotheken verwenden können, nämlich react-bootstrap und reactstrap.,
Wir haben in diesem Tutorial nur einige Bootstrap-Komponenten verwendet, z. B. Alert, Badge, Dropdown, Navigationsleiste, Nav, Formular, Schaltfläche, Karte usw. Es gibt noch einige Bootstrap-Komponenten, mit denen Sie experimentieren können, z. B. Tabellen, Modale, Tooltips, Karussell, Jumbotron, Paginierung, Registerkarten usw.
Sie können die Dokumentation der Pakete überprüfen, die wir in diesem Tutorial verwendet haben, um weitere Möglichkeiten zu finden, wie sie verwendet werden können. Der Quellcode für alle Demo-Apps in diesem Tutorial finden Sie auf GitHub.,
Volle Sichtbarkeit in Produktions-React-Apps
Das Debuggen von React-Anwendungen kann schwierig sein, insbesondere wenn Benutzer Probleme haben, die schwer zu reproduzieren sind. Wenn Sie daran interessiert sind, den Redux-Status zu überwachen und zu verfolgen, JavaScript-Fehler automatisch aufzutauchen und langsame Netzwerkanforderungen und die Ladezeit von Komponenten zu verfolgen, versuchen Sie es mit LogRocket. 
LogRocket ist wie ein DVR für Web-Apps und zeichnet buchstäblich alles auf, was in Ihrer React-App passiert., Anstatt zu erraten, warum Probleme auftreten, können Sie aggregieren und berichten, in welchem Zustand sich Ihre Anwendung befand, als ein Problem auftrat. LogRocket überwacht auch die Leistung Ihrer App und berichtet über Metriken wie Client-CPU-Auslastung, Clientspeichernutzung und mehr.
Das Middleware-Paket LogRocket Redux fügt Ihren Benutzersitzungen eine zusätzliche Sichtbarkeit hinzu. LogRocket protokolliert alle Aktionen und Status aus Ihren Redux-Stores.
Modernisieren Sie, wie Sie Ihre React-Apps debuggen — starten Sie die Überwachung kostenlos.