Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Ustvarjanje sprednjega vmesnika je lahko izziv, če ste novinec v ReactJS. Ogrodje Bootstrap skupaj s predlogami omogoča lažje in hitrejše delo.

Bootstrap ima tematske predloge, ki jih lahko vsak prilagodi in objavi brezplačno. Izbirate lahko med številnimi predlogami, preden jih prenesete in uporabite v svoji aplikaciji.

Predloge vam pomagajo hitro ustvariti izjemne čelne vmesnike, pri čemer ostane več časa za osredotočanje na kompleksne funkcije. O predlogah Bootstrap se lahko naučite tako, da eno integrirate z aplikacijo ReactJS.

Ustvarite svojo aplikacijo React

Začni z ustvarjanje aplikacije ReactJS v mapi na vašem računalniku. Lahko pa sledite uradniku Vodnik React pri ustvarjanju nove aplikacije.

Prenesite predlogo Bootstrap

Prenesite predlogo po vaši izbiri iz Zaženite Bootstrap spletno mesto s temami ali drugo po vaši želji. Na spletu je več spletnih mest z brezplačnimi predlogami Bootstrap.

instagram viewer

Za ta vodnik prenesite temo Bootstrap z imenom Agency.

Ko jo prenesete, razpakirajte datoteko mape, da si ogledate njeno vsebino. Opazili boste, da imate mape z imenom sredstvi, CSS, JS in datoteko z imenom index.html.

Dodajte predlogo Bootstrap v aplikacijo ReactJS

Nato kopirajte vsebino prenesene mape v mapo z imenom javnosti v vaši aplikaciji React. Opazili boste, da imate zdaj dve datoteki index.html. Kopirajte vsebino Bootstrapa index.html datoteko v aplikacijo React index.html mapa.

Prikaži predlogo Bootstrap

Po dodajanju Bootstrap HTML v index.html aplikacije zaženite aplikacijo in preverite, ali je bila integracija uspešna. Uporabite naslednji ukaz:

npm začetek

V brskalniku bi morali videti predlogo, kot prikazuje naslednja slika.

Integrirajte temo Bootstrap v komponente aplikacije

Če želite integrirati predlogo Bootstrap v aplikacijo React, morate kopirati razdelke HTML iz index.html v vsako komponento. Komponente vam omogočajo pisanje kode za različne dele aplikacije in njihovo ponovno uporabo. To zmanjša ponavljanje in tudi organizira strukturo vaše aplikacije.

Datoteka index.html ima zdaj različne razdelke Navigacija, O nas, Kontakt in Noga. V mapi src ustvarite dve mapi, komponente in strani. Razdelite razdelke v spodaj prikazane mape:

Sestavine morajo vsebovati naslednje:

  • Header.jsx: razdelek kolofona.
  • Navigation.jsx: Navigacijska vrstica in noga.

Mapa strani bo imela naslednje:

  • AboutUs.jsx: Informacije o nas.
  • Home.jsx: razdelki Storitve, Portfelj, Stranke in Ekipa.
  • Contacts.jsx: Kontaktni podatki.

Kopirajte HTML vsakega razdelka iz datoteke index.html in ga dodajte vsaki komponenti. Sintaksa bi morala izgledati takole:

uvoz Reagiraj od'reagirati'
konst Glava = () => {
vrnitev (




"kolofon">
"posoda">
"masthead-subheading">Dobrodošli v našem studiu!</div>









"imforum-naslov besedila-velike črke">
 ToLepo te je spoznati
 </div>



"btn btn-primarni btn-xl besedilo z velikimi črkami" href="#storitve">
 Povej mi več
 </a>
 </div>
 </header>
 </div>
 );
};


izvozprivzeto Glava

Nato spremenite sintakso HTML v komponentah v JSX. Če želite to narediti samodejno, kliknite urejevalnik Vscode Ctrl + Shift + P. V oknu, ki se odpre, kliknite možnost HTML v JSX, da spremenite HTML v JSX.

JSX je sintaksna razširitev JavaScripta. Omogoča vam uporabo mešanice HTML in JavaScript za pisanje kode v komponentah. Ko kopirate vse razdelke v komponente, ostane datoteka index.html samo s povezavami in skripti za oblikovanje.

Izgledalo bo takole:

html>
<htmljezik="en">


<glavo>
<metanabor znakov="utf-8" />
<povezavarel="ikona"href="%PUBLIC_URL%/favicon.ico" />
<metaime="viewport"vsebino="width=device-width, initial-scale=1" />
<metaime="barva teme"vsebino="#000000" />
<metaime="opis"vsebino="Spletno mesto, ustvarjeno z aplikacijo create-react-app"/>
<povezavarel="ikona-apple-touch"href="%PUBLIC_URL%/logo192.png" />
<povezavarel="manifest"href="%PUBLIC_URL%/manifest.json" />
<naslov>React Appnaslov>
<povezavarel="ikona"vrsta="slika/ikona x"href="assets/favicon.ico" />


 Ikone Font Awesome (brezplačna različica)
<scenarijsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"navzkrižni izvor="anonimno">scenarij>


 Googlove pisave
<povezavahref=" https://fonts.googleapis.com/css? družina=Montserrat: 400.700"rel="stylesheet"vrsta="besedilo/css" />
<povezavahref=" https://fonts.googleapis.com/css? družina=Roboto+Slab: 400,100,300,700"rel="stylesheet"vrsta="besedilo/css" />


 Osnovna tema CSS (vključuje Bootstrap)
<povezavahref="%PUBLIC_URL%/css/styles.css"rel="stylesheet" />
glavo>


<telo>
<noscript>Za zagon te aplikacije morate omogočiti JavaScript.noscript>


<divid="root">div>


 Bootstrap jedro JS
<scenarijsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">scenarij>


 Osnovna tema JS
<scenarijsrc="%PUBLIC_URL%/js/scripts.js">scenarij>


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


 * * SB Forms JS * *


 * * Aktivirajte obrazec na https://startbootstrap.com/solution/contact-forms * *


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


<scenarijsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">scenarij>
telo>
html>

Ustvarite poti za komponente

Zdaj, ko imate v aplikaciji povezave, skripte in komponente, morate ustvariti poti zanje v datoteki App.js. Poti bodo upodobile strani v aplikaciji, da bo dinamična.

Za upodabljanje strani namestite react-router-dom z naslednjim ukazom:

npm namestite reakcijski usmerjevalnik-dom

V App.js uvozite BrowserRouter kot Router, Routes in Route iz knjižnica react-router-dom. Nato uvozite vse komponente in Strani. Datoteka bi morala izgledati takole:

uvoz { BrowserRouter kot Usmerjevalnik, poti, pot } od"react-router-dom";
uvoz Navigacija od'./components/Navigation';
uvoz domov od'./Pages/Home';
uvoz O tem od'./Pages/About';
uvoz Kontakt od'./Pages/Contact'
uvoz Glava od"./components/Header";
funkcijoaplikacija() {
vrnitev (


"Aplikacija">










"/" element={} />
"/o" element={} />
"/stik" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


izvozprivzeto aplikacija;

Med brskanjem po brskalniku bi morali videti upodobljene strani na lokalnem gostitelju. Podobno predlogi, ki ste jo prenesli, kot je prikazano spodaj.

Čestitamo, uspešno ste integrirali temo Bootstrap v svojo aplikacijo React. Zdaj lahko prilagodite strani po svojih željah.

Zakaj uporabljati Bootstrapove tematske predloge?

Predloge Bootstrap pomagajo ustvariti izjemne sprednje vmesnike v zelo kratkem času. Na izbiro je veliko tem. Vse teme so najnovejše različice Bootstrapa. Imajo tudi licence MIT in so najnovejše zasnove v industriji.

Čeprav je prednosti veliko, zanašanje na predloge zmanjšuje ustvarjalnost. Na spletu je običajno najti eno priljubljeno temo, ki se uporablja na drugih spletnih mestih. Vendar pa lahko predlogo prilagodite edinstvenemu dizajnu.

Zdaj lahko integrirate predlogo Bootstrap s svojo aplikacijo React. Začnite graditi s predlogami Bootstrap in uživajte v čudovitih sprednjih vmesnikih.