Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Det kan være en udfordring at oprette en frontend-grænseflade, hvis du er ny til ReactJS. Bootstrap-rammen gør det sammen med dets skabeloner nemmere og hurtigere.

Bootstrap har temaskabeloner, som alle kan tilpasse og udgive gratis. Du kan vælge mellem mange skabeloner, før du downloader og bruger dem i din app.

Skabeloner hjælper dig med hurtigt at skabe bemærkelsesværdige frontend-grænseflader, hvilket giver mere tid til at fokusere på komplekse funktioner. Du kan lære om Bootstrap-skabeloner ved at integrere en med en ReactJS-app.

Opret din React-app

Start med oprettelse af en ReactJS-app i en mappe på din maskine. Alternativt kan du følge embedsmanden Reager guide om at oprette en ny app.

Download en bootstrap skabelon

Download en skabelon efter eget valg fra Start Bootstrap temawebsted eller en anden af ​​dine præferencer. Der er flere websteder med gratis Bootstrap-skabeloner online.

instagram viewer

Til denne guide skal du downloade Bootstrap-temaet med navnet Agency.

Når den er downloadet, skal du udpakke mappefilen for at se dens indhold. Du vil bemærke, at du har mapper med navnet assets, CSS, JS og en fil med navnet index.html.

Tilføj Bootstrap-skabelon til ReactJS-appen

Kopier derefter indholdet af den downloadede mappe til den navngivne mappe offentlig i din React-app. Du vil bemærke, at du nu har to index.html-filer. Kopier indholdet af Bootstrap index.html fil i React-appen index.html fil.

Vis Bootstrap skabelon

Efter at have tilføjet Bootstrap HTML til Appens index.html, skal du køre appen for at se, om integrationen lykkedes. Brug følgende kommando:

npm start

Du bør se skabelonen i din browser, som det følgende billede illustrerer.

Integrer Bootstrap-tema i appkomponenterne

For at integrere Bootstrap-skabelonen i React-appen skal du kopiere HTML-sektionerne fra index.html til hver komponent. Komponenter giver dig mulighed for at skrive kode til forskellige dele af appen og genbruge dem. Dette reducerer gentagelser og organiserer også strukturen af ​​din app.

Filen index.html har nu forskellige sektioner Navigation, Om os, Kontakt og Sidefod. I src-mappen skal du oprette to mapper, komponenter og sider. Opdel sektionerne i mapperne vist nedenfor:

Komponenterne skal indeholde følgende:

  • Header.jsx: Mastheadsektionen.
  • Navigation.jsx: Navigationsbjælken og sidefoden.

Sidernes mappe vil have følgende:

  • AboutUs.jsx: Information om os.
  • Home.jsx: Tjenester, portefølje, klienter og teamsektioner.
  • Contacts.jsx: Kontaktoplysninger.

Kopier HTML-koden for hver sektion fra index.html-filen og føj den til hver komponent. Syntaksen skal se sådan ud:

importere Reagere fra'reagere'
konst Overskrift = () => {
Vend tilbage (




"masthead">
"beholder">
"masthead-underoverskrift">Velkommen til vores studie!</div>









"masthead-overskrift tekst-store bogstaver">
 DetDet er rart at møde dig
 </div>



"btn btn-primær btn-xl tekst-store bogstaver" href="#tjenester">
 Fortæl mig mere
 </a>
 </div>
 </header>
 </div>
 );
};


eksportStandard Header

Skift derefter syntaksen for HTML i komponenterne til JSX. For at gøre dette automatisk på Vscode-editoren, klik Ctrl + Shift + P. Klik på HTML til JSX-indstillingen i vinduet, der dukker op, for at ændre HTML til JSX.

JSX er en syntaksudvidelse til JavaScript. Det giver dig mulighed for at bruge en blanding af HTML og JavaScript til at skrive kode i komponenter. Når du kopierer alle sektionerne til komponenterne, forbliver filen index.html kun med stylinglinks og scripts.

Det vil se sådan ud:

html>
<htmllang="da">


<hoved>
<metategnsæt="utf-8" />
<linkrel="ikon"href="%PUBLIC_URL%/favicon.ico" />
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1" />
<metanavn="tema-farve"indhold="#000000" />
<metanavn="beskrivelse"indhold="Websted oprettet ved hjælp af create-react-app"/>
<linkrel="æble-touch-ikon"href="%PUBLIC_URL%/logo192.png" />
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json" />
<titel>Reager apptitel>
<linkrel="ikon"type="billede/x-ikon"href="assets/favicon.ico" />


 Font Awesome-ikoner (gratis version)
<manuskriptsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"krydsoprindelse="anonym">manuskript>


 Google skrifttyper
<linkhref=" https://fonts.googleapis.com/css? familie=Montserrat: 400.700"rel="stylesheet"type="tekst/css" />
<linkhref=" https://fonts.googleapis.com/css? familie=Roboto+Slab: 400.100.300.700"rel="stylesheet"type="tekst/css" />


 Kernetema CSS (inkluderer Bootstrap)
<linkhref="%PUBLIC_URL%/css/styles.css"rel="stylesheet" />
hoved>


<legeme>
<noscript>Du skal aktivere JavaScript for at køre denne app.noscript>


<divid="rod">div>


 Bootstrap kerne JS
<manuskriptsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">manuskript>


 Kernetema JS
<manuskriptsrc="%PUBLIC_URL%/js/scripts.js">manuskript>


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


 * * SB Forms JS * *


 * * Aktiver din formular på https://startbootstrap.com/solution/contact-forms * *


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


<manuskriptsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">manuskript>
legeme>
html>

Opret ruter til komponenter

Nu hvor du har links, scripts og komponenter i appen, skal du oprette ruter til dem i filen App.js. Ruterne vil gengive siderne på appen for at gøre den dynamisk.

For at gengive siderne skal du installere react-router-dom med følgende kommando:

npm installer react-router-dom

I den App.js fil, importer BrowserRouter som en router, ruter og rute fra react-router-dom-bibliotek. Importer derefter alle komponenter og sider. Filen skulle se sådan ud:

importere { BrowserRouter som Router, ruter, rute } fra"reager-router-dom";
importere Navigation fra'./components/Navigation';
importere Hjem fra'./Pages/Home';
importere Om fra'./Sider/Om';
importere Kontakt fra'./Sider/Kontakt'
importere Header fra"./components/Header";
fungereApp() {
Vend tilbage (


"App">










"/" element={} />
"/om" element={} />
"/kontakt" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


eksportStandard App;

Du bør se de gengivede sider på den lokale vært, når du navigerer i browseren. Svarende til skabelonen, du downloadede, som illustreret nedenfor.

Tillykke, du har med succes integreret et Bootstrap-tema i din React-app. Du kan nu tilpasse siderne til dine præferencer.

Hvorfor bruge Bootstraps temaskabeloner?

Bootstrap-skabeloner hjælper med at skabe bemærkelsesværdige front-end-grænseflader på meget kort tid. Der er mange temaer at vælge imellem. Alle temaerne er af den seneste Bootstrap-version. De kommer også med MIT-licenser og er de nyeste industridesigns.

Selvom fordelene er mange, reduceres kreativiteten ved at stole på skabeloner. Det er almindeligt at finde et populært tema brugt på andre websteder online. Du kan dog tilpasse en skabelon til et unikt design.

Nu kan du integrere en Bootstrap-skabelon med din React-app. Begynd at bygge med Bootstrap-skabeloner og nyd smukke front-end-grænseflader.