Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Het creëren van een front-end interface kan een uitdaging zijn als je nieuw bent bij ReactJS. Het Bootstrap-framework maakt het, naast de sjablonen, eenvoudiger en sneller.

Bootstrap heeft themasjablonen die iedereen gratis kan aanpassen en publiceren. U kunt uit vele sjablonen kiezen voordat u ze downloadt en in uw app gebruikt.

Sjablonen helpen je om snel opmerkelijke frontend-interfaces te maken, waardoor er meer tijd overblijft om je te concentreren op complexe functies. U kunt meer te weten komen over Bootstrap-sjablonen door er een te integreren met een ReactJS-app.

Maak uw React-app

Start op een ReactJS-app maken in een map op uw computer. Als alternatief kunt u de ambtenaar volgen Reageer gids over het maken van een nieuwe app.

Download een Bootstrap-sjabloon

Download een sjabloon naar keuze van de Bootstrap starten thema's website of een andere van uw voorkeur. Er zijn verschillende sites met gratis Bootstrap-sjablonen online.

instagram viewer

Download voor deze gids het Bootstrap-thema Agency.

Pak na het downloaden het mapbestand uit om de inhoud te zien. U zult merken dat u mappen hebt met de naam assets, CSS, JS en een bestand met de naam index.html.

Bootstrap-sjabloon toevoegen aan de ReactJS-app

Kopieer vervolgens de inhoud van de gedownloade map naar de map met de naam openbaar in je React-app. U zult merken dat u nu twee index.html-bestanden hebt. Kopieer de inhoud van de Bootstrap index.html bestand in de React App's index.html bestand.

Bootstrap-sjabloon weergeven

Nadat u de Bootstrap HTML aan de index.html van de app hebt toegevoegd, voert u de app uit om te zien of de integratie is gelukt. Gebruik de volgende opdracht:

npm begin

U zou de sjabloon in uw browser moeten zien, zoals de volgende afbeelding illustreert.

Integreer Bootstrap-thema in de app-componenten

Om de Bootstrap-sjabloon in de React-app te integreren, moet u de HTML-secties van index.html naar elke component kopiëren. Met componenten kunt u code schrijven voor verschillende delen van de app en deze opnieuw gebruiken. Dit vermindert herhaling en ordent ook de structuur van uw App.

Het bestand index.html heeft nu verschillende secties Navigatie, Over ons, Contact en Voettekst. Maak in de map src twee mappen, componenten en pagina's. Verdeel de secties in de onderstaande mappen:

De componenten moeten het volgende bevatten:

  • Header.jsx: het masthead-gedeelte.
  • Navigation.jsx: de navigatiebalk en voettekst.

De map van de pagina's heeft het volgende:

  • AboutUs.jsx: informatie over ons.
  • Home.jsx: secties Services, Portfolio, Klanten en Teams.
  • Contacts.jsx: contactgegevens.

Kopieer de HTML van elke sectie uit het bestand index.html en voeg deze toe aan elke component. De syntaxis zou er als volgt uit moeten zien:

importeren Reageer van'Reageer'
const Kop = () => {
opbrengst (




"masttop">
"houder">
"masthead-subheading">Welkom in onze studio!</div>









"masthead-kop tekst-hoofdletters">
 HetLeuk je te ontmoeten
 </div>



"btn btn-primaire btn-xl tekst-hoofdletters" href="#Diensten">
 Vertel me meer
 </a>
 </div>
 </header>
 </div>
 );
};


exporterenstandaard Koptekst

Wijzig vervolgens de syntaxis van de HTML in de componenten in JSX. Om dit automatisch te doen, klikt u op de Vscode-editor Ctrl+Shift+P. Klik op de optie HTML naar JSX in het venster dat verschijnt om de HTML naar JSX te wijzigen.

JSX is een syntaxisextensie voor JavaScript. Hiermee kunt u een combinatie van HTML en JavaScript gebruiken om code in componenten te schrijven. Nadat u alle secties naar de componenten hebt gekopieerd, blijft het bestand index.html over met alleen de stylingkoppelingen en scripts.

Het zal er zo uitzien:

html>
<htmllang="en">


<hoofd>
<metatekenset="utf-8" />
<koppelingrel="icoon"href="%PUBLIC_URL%/favicon.ico" />
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1" />
<metanaam="thema-kleur"inhoud="#000000" />
<metanaam="beschrijving"inhoud="Website gemaakt met behulp van create-react-app"/>
<koppelingrel="apple-touch-icoon"href="%PUBLIC_URL%/logo192.png" />
<koppelingrel="manifest"href="%PUBLIC_URL%/manifest.json" />
<titel>Reageer apptitel>
<koppelingrel="icoon"type="afbeelding/x-icoon"href="activa/favicon.ico" />


 Font Awesome-pictogrammen (gratis versie)
<scriptsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"kruisoorsprong="anoniem">script>


 Google-lettertypen
<koppelinghref=" https://fonts.googleapis.com/css? familie=Montserrat: 400.700"rel="stijlblad"type="tekst/css" />
<koppelinghref=" https://fonts.googleapis.com/css? familie=Roboto+Plaat: 400.100.300.700"rel="stijlblad"type="tekst/css" />


 Kernthema CSS (inclusief Bootstrap)
<koppelinghref="%PUBLIC_URL%/css/styles.css"rel="stijlblad" />
hoofd>


<lichaam>
<noscript>U moet JavaScript inschakelen om deze app uit te voeren.noscript>


<divID kaart="wortel">div>


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


 Kernthema JS
<scriptsrc="%PUBLIC_URL%/js/scripts.js">script>


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


 * * SB Formulieren JS * *


 * * Activeer uw formulier op https://startbootstrap.com/solution/contact-forms * *


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


<scriptsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">script>
lichaam>
html>

Maak routes voor componenten

Nu u de koppelingen, scripts en componenten in de app hebt, moet u er routes voor maken in het bestand App.js. De routes geven de pagina's op de app weer om deze dynamisch te maken.

Installeer react-router-dom met de volgende opdracht om de pagina's weer te geven:

npm installeer react-router-dom

In de App.js bestand, importeer BrowserRouter als een router, routes en route uit het reactie-router-dom-bibliotheek. Importeer vervolgens alle componenten En Pagina's. Het bestand zou er zo uit moeten zien:

importeren { BrowserRouter als Router, Routes, Route } van"reageren-router-dom";
importeren Navigatie van'./componenten/Navigatie';
importeren Thuis van'./Pagina's/Home';
importeren Over van'./Pagina's/Over';
importeren Contact van'./Pagina's/Contact'
importeren Koptekst van"./componenten/Header";
functieapp() {
opbrengst (


"App">










"/" element={} />
"/over" element={} />
"/contact" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


exporterenstandaard App;

U zou de gerenderde pagina's op de lokale host moeten zien wanneer u door de browser navigeert. Vergelijkbaar met de sjabloon die u hebt gedownload, zoals hieronder afgebeeld.

Gefeliciteerd, je hebt met succes een Bootstrap-thema geïntegreerd in je React-app. U kunt de pagina's nu aanpassen aan uw voorkeur.

Waarom de themasjablonen van Bootstrap gebruiken?

Bootstrap-sjablonen helpen om in zeer korte tijd opmerkelijke front-end-interfaces te creëren. Er zijn veel thema's om uit te kiezen. Alle thema's zijn van de nieuwste Bootstrap-versie. Ze worden ook geleverd met MIT-licenties en zijn de nieuwste industriële ontwerpen.

Hoewel de voordelen talrijk zijn, vermindert het vertrouwen op sjablonen de creativiteit. Het is gebruikelijk om een ​​populair thema te vinden dat op andere sites online wordt gebruikt. U kunt een sjabloon echter aanpassen aan een uniek ontwerp.

Nu kunt u een Bootstrap-sjabloon integreren met uw React-app. Begin met bouwen met Bootstrap-sjablonen en geniet van prachtige front-end interfaces.