Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Å lage et front-end-grensesnitt kan være utfordrende hvis du er ny på ReactJS. Bootstrap-rammeverket, sammen med malene, gjør det enklere og raskere.

Bootstrap har temamaler som alle kan tilpasse og publisere gratis. Du kan velge mellom mange maler før du laster ned og bruker dem i appen din.

Maler hjelper deg raskt å lage bemerkelsesverdige grensesnitt, og gir deg mer tid til å fokusere på komplekse funksjoner. Du kan lære om Bootstrap-maler ved å integrere en med en ReactJS-app.

Lag din React-app

Start med lage en ReactJS-app i en mappe på maskinen din. Alternativt kan du følge den offisielle Reager guide på å lage en ny app.

Last ned en Bootstrap-mal

Last ned en mal etter eget valg fra Start Bootstrap temanettsted eller annet du foretrekker. Det er flere nettsteder med gratis Bootstrap-maler på nettet.

For denne veiledningen, last ned Bootstrap-temaet kalt Agency.

Når den er lastet ned, pakk ut mappefilen for å se innholdet. Du vil legge merke til at du har mapper som heter assets, CSS, JS og en fil som heter index.html.

Legg til Bootstrap-mal til ReactJS-appen

Deretter kopierer du innholdet i den nedlastede mappen til mappen som heter offentlig i React-appen din. Du vil legge merke til at du nå har to index.html-filer. Kopier innholdet i Bootstrap index.html fil i React-appen index.html fil.

Vis Bootstrap-mal

Etter å ha lagt til Bootstrap HTML til appens index.html, kjør appen for å se om integreringen var vellykket. Bruk følgende kommando:

npm start

Du bør se malen i nettleseren din, som bildet nedenfor illustrerer.

Integrer Bootstrap-tema i appkomponentene

For å integrere Bootstrap-malen i React-appen, må du kopiere HTML-delene fra index.html til hver komponent. Komponenter lar deg skrive kode for ulike deler av appen og gjenbruke dem. Dette reduserer repetisjon og organiserer også strukturen til appen din.

index.html-filen har nå forskjellige seksjoner Navigasjon, Om oss, Kontakt og Bunntekst. I src-mappen oppretter du to mapper, komponenter og sider. Del seksjonene inn i mappene vist nedenfor:

Komponentene skal inneholde følgende:

  • Header.jsx: Toppseksjonen.
  • Navigation.jsx: Navigasjonslinjen og bunnteksten.

Sidens mappe vil ha følgende:

  • AboutUs.jsx: Informasjon om oss.
  • Home.jsx: Tjenester, portefølje, klienter og teamseksjoner.
  • Contacts.jsx: Kontaktinformasjon.

Kopier HTML-en til hver seksjon fra index.html-filen og legg den til hver komponent. Syntaksen skal se slik ut:

import Reagere fra'reagere'
konst Overskrift = () => {
komme tilbake (




"masthead">
"container">
"masthead-underoverskrift">Velkommen til studioet vårt!</div>









"masthead-heading tekst-store bokstaver">
 Dener hyggelig å møte deg
 </div>



"btn btn-primær btn-xl tekst-store bokstaver" href="#tjenester">
 Fortell meg mer
 </a>
 </div>
 </header>
 </div>
 );
};


eksportmisligholde Overskrift

Deretter endrer du syntaksen til HTML i komponentene til JSX. For å gjøre dette automatisk på Vscode-editoren, klikk Ctrl + Shift + P. Klikk på HTML til JSX-alternativet i vinduet som dukker opp for å endre HTML til JSX.

JSX er en syntaksutvidelse til JavaScript. Den lar deg bruke en blanding av HTML og JavaScript for å skrive kode i komponenter. Når du har kopiert alle seksjonene til komponentene, forblir index.html-filen med bare stillenkene og skriptene.

Det vil se slik ut:

html>
<htmllang="no">


<hode>
<metategnsett="utf-8" />
<linkrel="ikon"href="%PUBLIC_URL%/favicon.ico" />
<metaNavn="viewport"innhold="width=device-width, initial-scale=1" />
<metaNavn="tema-farge"innhold="#000000" />
<metaNavn="beskrivelse"innhold="Nettsted opprettet med create-react-app"/>
<linkrel="eple-touch-ikon"href="%PUBLIC_URL%/logo192.png" />
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json" />
<tittel>Reager-appentittel>
<linkrel="ikon"type="bilde/x-ikon"href="assets/favicon.ico" />


 Font Awesome-ikoner (gratis versjon)
<manussrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"kryssopprinnelse="anonym">manus>


 Google fonter
<linkhref=" https://fonts.googleapis.com/css? familie=Montserrat: 400 700"rel="stilark"type="tekst/css" />
<linkhref=" https://fonts.googleapis.com/css? familie=Roboto+Slab: 400.100.300.700"rel="stilark"type="tekst/css" />


 Kjernetema CSS (inkluderer Bootstrap)
<linkhref="%PUBLIC_URL%/css/styles.css"rel="stilark" />
hode>


<kropp>
<noscript>Du må aktivere JavaScript for å kjøre denne appen.noscript>


<divid="rot">div>


 Bootstrap core JS
<manussrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">manus>


 Kjernetema JS
<manussrc="%PUBLIC_URL%/js/scripts.js">manus>


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


 * * SB Forms JS * *


 * * Aktiver skjemaet ditt på https://startbootstrap.com/solution/contact-forms * *


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


<manussrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">manus>
kropp>
html>

Lag ruter for komponenter

Nå som du har koblingene, skriptene og komponentene i appen, må du opprette ruter for dem i App.js-filen. Rutene vil gjengi sidene på appen for å gjøre den dynamisk.

For å gjengi sidene, installer react-router-dom med følgende kommando:

npm installer react-router-dom

I App.js fil, importer BrowserRouter som en ruter, ruter og rute fra react-router-dom-bibliotek. Importer deretter alle komponenter og Sider. Filen skal se slik ut:

import { Nettleserruter som Ruter, ruter, rute } fra"reager-ruter-dom";
import Navigasjon fra'./components/Navigation';
import Hjem fra'./Pages/Home';
import Om fra'./Pages/About';
import Kontakt fra'./Pages/Contact'
import Overskrift fra"./components/Header";
funksjonApp() {
komme tilbake (


"App">










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


eksportmisligholde App;

Du bør se de gjengitte sidene på den lokale verten når du navigerer i nettleseren. Ligner på malen du lastet ned, som illustrert nedenfor.

Gratulerer, du har vellykket integrert et Bootstrap-tema i React-appen din. Du kan nå tilpasse sidene til dine preferanser.

Hvorfor bruke Bootstraps temamaler?

Bootstrap-maler bidrar til å skape bemerkelsesverdige front-end-grensesnitt på svært kort tid. Det er mange temaer å velge mellom. Alle temaene er av den nyeste Bootstrap-versjonen. De kommer også med MIT-lisenser og er de nyeste industridesignene.

Mens fordelene er mange, reduserer kreativiteten å stole på maler. Det er vanlig å finne ett populært tema brukt på andre nettsteder på nettet. Du kan imidlertid tilpasse en mal til et unikt design.

Nå kan du integrere en Bootstrap-mal med React-appen din. Begynn å bygge med Bootstrap-maler og nyt vakre front-end-grensesnitt.