Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Stvaranje front-end sučelja može biti izazovno ako ste novi u ReactJS-u. Okvir Bootstrap, zajedno sa svojim predlošcima, olakšava i ubrzava.

Bootstrap ima tematske predloške koje svatko može prilagoditi i objaviti besplatno. Možete birati između mnogih predložaka prije nego što ih preuzmete i upotrijebite u svojoj aplikaciji.

Predlošci vam pomažu da brzo stvorite izvanredna sučelja, ostavljajući više vremena za fokusiranje na složene značajke. Možete saznati više o Bootstrap predlošcima integracijom jednog s ReactJS aplikacijom.

Napravite svoju aplikaciju React

Počni od stvaranje ReactJS aplikacije u mapi na vašem računalu. Alternativno, možete pratiti službenu osobu Vodič za reakciju prilikom izrade nove aplikacije.

Preuzmite Bootstrap predložak

Preuzmite predložak po svom izboru s Pokrenite Bootstrap web-stranicu s temama ili neku drugu po vašoj želji. Postoji nekoliko stranica s besplatnim Bootstrap predlošcima na mreži.

Za ovaj vodič preuzmite Bootstrap temu pod nazivom Agency.

Nakon preuzimanja, raspakirajte datoteku mape da biste vidjeli njezin sadržaj. Primijetit ćete da imate mape pod nazivom assets, CSS, JS i datoteku pod nazivom index.html.

Dodajte Bootstrap predložak u ReactJS aplikaciju

Zatim kopirajte sadržaj preuzete mape u mapu pod nazivom javnost u vašoj aplikaciji React. Primijetit ćete da sada imate dvije datoteke index.html. Kopirajte sadržaj Bootstrapa index.html datoteku u aplikaciju React index.html datoteka.

Prikaz Bootstrap predloška

Nakon dodavanja Bootstrap HTML-a u index.html aplikacije, pokrenite aplikaciju da vidite je li integracija bila uspješna. Koristite sljedeću naredbu:

npm početak

Trebali biste vidjeti predložak u svom pregledniku, kao što prikazuje sljedeća slika.

Integrirajte Bootstrap temu u komponente aplikacije

Kako biste integrirali Bootstrap predložak u React aplikaciju, morate kopirati HTML odjeljke iz index.html u svaku komponentu. Komponente vam omogućuju pisanje koda za različite dijelove aplikacije i njihovo ponovno korištenje. To smanjuje ponavljanje i također organizira strukturu vaše aplikacije.

Datoteka index.html sada ima različite odjeljke Navigacija, O nama, Kontakt i Podnožje. U mapi src kreirajte dvije mape, komponente i stranice. Podijelite odjeljke u dolje prikazane mape:

Komponente bi trebale uključivati ​​sljedeće:

  • Header.jsx: odjeljak masthead.
  • Navigation.jsx: Navigacijska traka i podnožje.

Mapa stranica će imati sljedeće:

  • AboutUs.jsx: Informacije o nama.
  • Home.jsx: odjeljci Usluge, Portfelj, Klijenti i Tim.
  • Contacts.jsx: Podaci za kontakt.

Kopirajte HTML svakog odjeljka iz datoteke index.html i dodajte ga svakoj komponenti. Sintaksa bi trebala izgledati ovako:

uvoz Reagirati iz'reagirati'
konst Zaglavlje = () => {
povratak (




"masthead">
"kontejner">
"masthead-podnaslov">Dobro došli u naš studio!</div>









"masthead-heading text-uppercase">
 ToDrago mi je što smo se upoznali
 </div>



"btn btn-primarni btn-xl tekst-velika slova" href="#usluge">
 Reci mi više
 </a>
 </div>
 </header>
 </div>
 );
};


izvozzadano Zaglavlje

Zatim promijenite sintaksu HTML-a u komponentama u JSX. Da biste to učinili automatski na Vscode editor kliknite Ctrl + Shift + P. Kliknite opciju HTML u JSX u prozoru koji će se pojaviti kako biste promijenili HTML u JSX.

JSX je proširenje sintakse za JavaScript. Omogućuje vam korištenje mješavine HTML-a i JavaScripta za pisanje koda u komponentama. Nakon što kopirate sve odjeljke u komponente, datoteka index.html ostaje samo sa stilskim vezama i skriptama.

Izgledat će ovako:

html>
<htmljezik="en">


<glava>
<metaskup znakova="utf-8" />
<vezarel="ikona"href="%PUBLIC_URL%/favicon.ico" />
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1" />
<metaIme="boja-teme"sadržaj="#000000" />
<metaIme="opis"sadržaj="Web stranica izrađena pomoću create-react-app"/>
<vezarel="ikona-dodir jabuke"href="%PUBLIC_URL%/logo192.png" />
<vezarel="manifest"href="%PUBLIC_URL%/manifest.json" />
<titula>Aplikacija Reacttitula>
<vezarel="ikona"tip="slika/ikona x"href="assets/favicon.ico" />


 Ikone Font Awesome (besplatna verzija)
<skriptasrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"unakrsno podrijetlo="anonimno">skripta>


 Google fontovi
<vezahref=" https://fonts.googleapis.com/css? obitelj=Montserrat: 400,700"rel="list stilova"tip="tekst/css" />
<vezahref=" https://fonts.googleapis.com/css? obitelj=Roboto+Slab: 400,100,300,700"rel="list stilova"tip="tekst/css" />


 CSS temeljne teme (uključuje Bootstrap)
<vezahref="%PUBLIC_URL%/css/styles.css"rel="list stilova" />
glava>


<tijelo>
<noscript>Morate omogućiti JavaScript za pokretanje ove aplikacije.noscript>


<diviskaznica="korijen">div>


 Bootstrap jezgra JS
<skriptasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">skripta>


 Osnovna tema JS
<skriptasrc="%PUBLIC_URL%/js/scripts.js">skripta>


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


 * * SB Forms JS * *


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


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


<skriptasrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">skripta>
tijelo>
html>

Stvorite rute za komponente

Sada kada imate veze, skripte i komponente u aplikaciji, morate stvoriti rute za njih u datoteci App.js. Rute će prikazati stranice u aplikaciji kako bi bile dinamične.

Za renderiranje stranica instalirajte react-router-dom sa sljedećom naredbom:

npm instalirajte react-router-dom

u App.js datoteku, uvezite BrowserRouter kao Router, Routes i Route iz react-router-dom biblioteka. Zatim uvezite sve komponente i Stranice. Datoteka bi trebala izgledati ovako:

uvoz { BrowserRouter kao Ruter, rute, rute } iz"react-router-dom";
uvoz Navigacija iz'./components/Navigation';
uvoz Dom iz'./Pages/Home';
uvoz Oko iz'./Stranice/O';
uvoz Kontakt iz'./Pages/Contact'
uvoz Zaglavlje iz"./components/Header";
funkcijaaplikacija() {
povratak (


"Aplikacija">










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


izvozzadano aplikacija;

Trebali biste vidjeti prikazane stranice na lokalnom hostu kada se krećete preglednikom. Slično predlošku koji ste preuzeli, kao što je ilustrirano u nastavku.

Čestitamo, uspješno ste integrirali Bootstrap temu u svoju React aplikaciju. Sada možete prilagoditi stranice svojim željama.

Zašto koristiti Bootstrapove tematske predloške?

Bootstrap predlošci pomažu u stvaranju izvanrednih front-end sučelja u vrlo kratkom vremenu. Postoji mnogo tema za odabir. Sve teme su najnovije verzije Bootstrapa. Također dolaze s licencama MIT-a i najnoviji su industrijski dizajni.

Iako ima mnogo prednosti, oslanjanje na predloške smanjuje kreativnost. Uobičajeno je pronaći jednu popularnu temu koja se koristi na drugim stranicama na internetu. Međutim, predložak možete prilagoditi jedinstvenom dizajnu.

Sada možete integrirati Bootstrap predložak sa svojom React aplikacijom. Počnite graditi s Bootstrap predlošcima i uživajte u prekrasnim front-end sučeljima.