So integrieren Sie eine Bootstrap-Designvorlage in eine React-App
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
Erstellen Sie zunächst eine ReactJS-App in einem Ordner auf Ihrem Computer. Alternativ können Sie dem offiziellen React-Leitfaden zum Erstellen einer neuen App folgen.
Laden Sie eine Bootstrap-Vorlage herunter
Laden Sie eine Vorlage Ihrer Wahl von der Start Bootstrap- Themen-Website oder einer anderen Ihrer Wahl herunter. 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.
Bootstrap-Vorlage zur ReactJS-App hinzufügen
Kopieren Sie als Nächstes den Inhalt des heruntergeladenen Ordners in den Ordner mit dem Namen public in Ihrer React-App. Sie werden feststellen, dass Sie jetzt zwei index.html-Dateien haben. Kopieren Sie den Inhalt der Bootstrap -Datei index.html in die Datei index.html der React-App .
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 start
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:
import React from 'react'
const Header = () => {
return (
<div>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Studio!</div>
<div className="masthead-heading text-uppercase">
It's Nice To Meet You
</div>
<a className="btn btn-primary btn-xl text-uppercase" href="#services">
Tell Me More
</a>
</div>
</header>
</div>
);
};
export default Header
Ändern Sie als Nächstes die Syntax des HTML in den Komponenten in JSX. Um dies automatisch im Vscode-Editor zu tun, klicken Sie auf Strg + Umschalt + P. Klicken Sie im angezeigten Fenster auf die Option HTML in 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="%PUBLIC_URL%/js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</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 install react-router-dom
Importieren Sie in der Datei „ App.js “ BrowserRouter als Router, Routen und Route aus der Bibliothek „react-router-dom“. Importieren Sie dann alle Komponenten und Seiten . Die Datei sollte so aussehen:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";
function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Contact/>
<Router>
<Navigation>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
</Navigation>
</Router>
</div>
);
}
export default App;
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.
Schreibe einen Kommentar