Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Das Erstellen einer Front-End-Schnittstelle kann eine Herausforderung sein, wenn Sie neu bei ReactJS sind. Das Bootstrap-Framework macht es neben seinen Vorlagen einfacher und schneller.

Bootstrap hat thematische Vorlagen, die jeder kostenlos anpassen und veröffentlichen kann. Sie können aus vielen Vorlagen auswählen, bevor Sie sie herunterladen und in Ihrer App verwenden.

Vorlagen helfen Ihnen, schnell bemerkenswerte Frontend-Oberflächen zu erstellen, sodass mehr Zeit bleibt, sich auf komplexe Funktionen zu konzentrieren. Sie können mehr über Bootstrap-Vorlagen erfahren, indem Sie eine in eine ReactJS-App integrieren.

Erstellen Sie Ihre React-App

Beginnen Sie mit Erstellen einer ReactJS-App in einem Ordner auf Ihrem Rechner. Alternativ können Sie dem Beamten folgen Reaktionsführer beim Erstellen einer neuen App.

Laden Sie eine Bootstrap-Vorlage herunter

instagram viewer

Laden Sie eine Vorlage Ihrer Wahl aus der herunter Starten Sie Bootstrap Themen-Website oder eine andere Ihrer Wahl. Es gibt mehrere Websites mit kostenlosen Bootstrap-Vorlagen online.

Laden Sie für diesen Leitfaden das Bootstrap-Design mit dem Namen Agency herunter.

Entpacken Sie nach dem Herunterladen die Ordnerdatei, um ihren Inhalt anzuzeigen. Sie werden feststellen, dass Sie Ordner mit den Namen Assets, CSS, JS und eine Datei mit dem Namen index.html haben.

Fügen Sie der ReactJS-App eine Bootstrap-Vorlage hinzu

Kopieren Sie als Nächstes den Inhalt des heruntergeladenen Ordners in den angegebenen Ordner öffentlich in deiner React-App. Sie werden feststellen, dass Sie jetzt zwei index.html-Dateien haben. Kopieren Sie den Inhalt des Bootstrap index.html Datei in die React App's index.html Datei.

Bootstrap-Vorlage anzeigen

Führen Sie nach dem Hinzufügen des Bootstrap-HTML zur index.html der App die App aus, um zu sehen, ob die Integration erfolgreich war. Verwenden Sie den folgenden Befehl:

npm starten

Sie sollten die Vorlage in Ihrem Browser sehen, wie das folgende Bild zeigt.

Integrieren Sie das Bootstrap-Design in die App-Komponenten

Um das Bootstrap-Template in die React-App zu integrieren, müssen Sie die HTML-Abschnitte aus index.html in jede Komponente kopieren. Mit Komponenten können Sie Code für verschiedene Teile der App schreiben und wiederverwenden. Dies reduziert Wiederholungen und organisiert auch die Struktur Ihrer App.

Die Datei index.html hat jetzt verschiedene Abschnitte Navigation, Über uns, Kontakt und Fußzeile. Erstellen Sie im Ordner src zwei Ordner, Komponenten und Seiten. Unterteilen Sie die Abschnitte in die unten gezeigten Ordner:

Die Komponenten sollten Folgendes umfassen:

  • Header.jsx: Der Masthead-Abschnitt.
  • Navigation.jsx: Die Navigationsleiste und Fußzeile.

Der Ordner der Seiten enthält Folgendes:

  • AboutUs.jsx: Informationen über uns.
  • Home.jsx: Abschnitte „Services“, „Portfolio“, „Clients“ und „Team“.
  • Kontakte.jsx: Kontaktinformationen.

Kopieren Sie den HTML-Code jedes Abschnitts aus der Datei index.html und fügen Sie ihn jeder Komponente hinzu. Die Syntax sollte so aussehen:

importieren Reagieren aus'reagieren'
konst Überschrift = () => {
zurückkehren (




"Impressum">
"Container">
"Impressum-Unterüberschrift">Willkommen in unserem Studio!</div>









"Impressum-Überschrift Text-Großbuchstaben">
 EsSchön, Sie kennenzulernen
 </div>



"btn btn-primär btn-xl Text-Großbuchstaben" href="#Dienstleistungen">
 Erzähl mir mehr
 </a>
 </div>
 </header>
 </div>
 );
};


ExportStandard Header

Ändern Sie als Nächstes die Syntax des HTML in den Komponenten in JSX. Klicken Sie dazu automatisch auf den Vscode-Editor Strg + Umschalt + P. Klicken Sie in dem sich öffnenden Fenster auf die Option HTML zu JSX, um das HTML in JSX zu ändern.

JSX ist eine Syntaxerweiterung für JavaScript. Es ermöglicht Ihnen, eine Mischung aus HTML und JavaScript zu verwenden, um Code in Komponenten zu schreiben. Nachdem Sie alle Abschnitte in die Komponenten kopiert haben, verbleibt die Datei index.html nur mit den Styling-Links und Skripts.

Es wird so aussehen:

html>
<htmllang="de">


<Kopf>
<MetaZeichensatz="utf-8" />
<Verknüpfungrel="Symbol"href="%PUBLIC_URL%/favicon.ico" />
<MetaName="Ansichtsfenster"Inhalt="Breite = Gerätebreite, Anfangsskalierung = 1" />
<MetaName="thema-farbe"Inhalt="#000000" />
<MetaName="Beschreibung"Inhalt=„Website erstellt mit create-react-app“/>
<Verknüpfungrel="apple-touch-icon"href="%PUBLIC_URL%/logo192.png" />
<Verknüpfungrel="Manifest"href="%PUBLIC_URL%/manifest.json" />
<Titel>Reagieren-AppTitel>
<Verknüpfungrel="Symbol"Typ="Bild/x-Symbol"href="assets/favicon.ico" />


 Font Awesome-Symbole (kostenlose Version)
<SkriptQuelle=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"Crossorigin="anonym">Skript>


 Google-Schriftarten
<Verknüpfunghref=" https://fonts.googleapis.com/css? Familie=Montserrat: 400.700"rel="Stilvorlage"Typ="text/css" />
<Verknüpfunghref=" https://fonts.googleapis.com/css? Familie=Roboto+Platte: 400.100.300.700"rel="Stilvorlage"Typ="text/css" />


 Kerndesign-CSS (einschließlich Bootstrap)
<Verknüpfunghref="%PUBLIC_URL%/css/styles.css"rel="Stilvorlage" />
Kopf>


<Körper>
<Noskript>Sie müssen JavaScript aktivieren, um diese App auszuführen.Noskript>


<divAusweis="Wurzel">div>


 Bootstrap-Kern JS
<SkriptQuelle=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">Skript>


 Kernthema JS
<SkriptQuelle="%PUBLIC_URL%/js/scripts.js">Skript>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * * SB-Formulare JS * *


 * * Aktivieren Sie Ihr Formular unter https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<SkriptQuelle=" https://cdn.startbootstrap.com/sb-forms-latest.js">Skript>
Körper>
html>

Routen für Komponenten erstellen

Nachdem Sie nun die Links, Skripts und Komponenten in der App haben, müssen Sie Routen für sie in der App.js-Datei erstellen. Die Routen rendern die Seiten in der App, um sie dynamisch zu machen.

Installieren Sie zum Rendern der Seiten „react-router-dom“ mit dem folgenden Befehl:

npm installiere reagieren-router-dom

Im App.js Datei, importieren Sie BrowserRouter als Router, Routen und Route aus der React-Router-Dom-Bibliothek. Importieren Sie dann alle Komponenten Und Seiten. Die Datei sollte so aussehen:

importieren {BrowserRouter als Router, Routen, Route } aus"reagieren-router-dom";
importieren Navigation aus'./Komponenten/Navigation';
importieren Heim aus'./Seiten/Home';
importieren Um aus'./Seiten/Über';
importieren Kontakt aus'./Seiten/Kontakt'
importieren Header aus"./Komponenten/Header";
FunktionApp() {
zurückkehren (


"App">










"/" element={} />
"/um" element={} />
"/Kontakt" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


ExportStandard Anwendung;

Sie sollten die gerenderten Seiten auf dem lokalen Host sehen, wenn Sie im Browser navigieren. Ähnlich wie die heruntergeladene Vorlage, wie unten dargestellt.

Herzlichen Glückwunsch, Sie haben erfolgreich ein Bootstrap-Theme in Ihre React-App integriert. Sie können die Seiten jetzt nach Ihren Wünschen anpassen.

Warum thematische Vorlagen von Bootstrap verwenden?

Bootstrap-Templates helfen, innerhalb kürzester Zeit bemerkenswerte Frontend-Oberflächen zu erstellen. Es stehen viele Themen zur Auswahl. Alle Themes sind von der neuesten Bootstrap-Version. Sie werden auch mit MIT-Lizenzen geliefert und sind die neuesten Industriedesigns.

Obwohl es viele Vorteile gibt, reduziert das Verlassen auf Vorlagen die Kreativität. Es ist üblich, ein beliebtes Thema zu finden, das auf anderen Websites online verwendet wird. Sie können eine Vorlage jedoch an ein einzigartiges Design anpassen.

Jetzt können Sie eine Bootstrap-Vorlage in Ihre React-App integrieren. Beginnen Sie mit dem Erstellen von Bootstrap-Vorlagen und genießen Sie schöne Front-End-Oberflächen.