Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Vytvorenie front-end rozhrania môže byť náročné, ak ste novým používateľom ReactJS. Rámec Bootstrap spolu so svojimi šablónami to uľahčuje a zrýchľuje.

Bootstrap má tematické šablóny, ktoré si môže každý prispôsobiť a zverejniť zadarmo. Pred stiahnutím a použitím vo svojej aplikácii si môžete vybrať z mnohých šablón.

Šablóny vám pomôžu rýchlo vytvoriť pozoruhodné frontendové rozhrania a ponechať tak viac času na sústredenie sa na komplexné funkcie. O šablónach Bootstrap sa môžete dozvedieť integráciou jednej s aplikáciou ReactJS.

Vytvorte si aplikáciu React

Začnite tým vytvorenie aplikácie ReactJS v priečinku na vašom počítači. Prípadne môžete sledovať úradníka Reagovať návod pri vytváraní novej aplikácie.

Stiahnite si šablónu bootstrap

Stiahnite si šablónu podľa vlastného výberu z Spustite Bootstrap webová stránka s témami alebo iná podľa vašich preferencií. Existuje niekoľko stránok s bezplatnými šablónami Bootstrap online.

instagram viewer

Pre túto príručku si stiahnite tému Bootstrap s názvom Agentúra.

Po stiahnutí rozbaľte súbor priečinka, aby ste videli jeho obsah. Všimnete si, že máte priečinky s názvom aktíva, CSS, JS a súbor s názvom index.html.

Pridajte šablónu Bootstrap do aplikácie ReactJS

Potom skopírujte obsah prevzatého priečinka do priečinka s názvom verejnosti vo vašej aplikácii React. Všimnete si, že teraz máte dva súbory index.html. Skopírujte obsah Bootstrapu index.html súbor do aplikácie React index.html súbor.

Zobraziť šablónu bootstrapu

Po pridaní kódu HTML Bootstrap do súboru index.html aplikácie spustite aplikáciu a zistite, či bola integrácia úspešná. Použite nasledujúci príkaz:

npm štart

Šablónu by ste mali vidieť vo svojom prehliadači, ako ilustruje nasledujúci obrázok.

Integrujte tému Bootstrap do komponentov aplikácie

Ak chcete integrovať šablónu Bootstrap do aplikácie React, musíte skopírovať sekcie HTML z index.html do každého komponentu. Komponenty vám umožňujú písať kód pre rôzne časti aplikácie a opätovne ich používať. To znižuje opakovanie a tiež organizuje štruktúru vašej aplikácie.

Súbor index.html má teraz rôzne sekcie Navigácia, O nás, Kontakt a Päta. V priečinku src vytvorte dva priečinky, komponenty a stránky. Rozdeľte sekcie do nižšie zobrazených priečinkov:

Komponenty by mali obsahovať nasledovné:

  • Header.jsx: sekcia masthead.
  • Navigation.jsx: Navigačný panel a päta.

Priečinok stránok bude mať nasledovné:

  • AboutUs.jsx: Informácie o nás.
  • Home.jsx: sekcie Služby, Portfólio, Klienti a Tím.
  • Contacts.jsx: Kontaktné informácie.

Skopírujte HTML každej sekcie zo súboru index.html a pridajte ho do každého komponentu. Syntax by mala vyzerať takto:

importovať Reagovať od'reagovať'
konšt Hlavička = () => {
vrátiť (




"stráž">
"kontajner">
"podnadpis tiráž">Vitajte v našom štúdiu!</div>









"text nadpisu v tiráži - veľké písmená">
 toTeší ma
 </div>



"btn btn-primárny btn-xl text-veľké písmená" href="#služby">
 Povedz mi viac
 </a>
 </div>
 </header>
 </div>
 );
};


exportpredvolená Hlavička

Ďalej zmeňte syntax HTML v komponentoch na JSX. Ak to chcete urobiť automaticky, kliknite na editor Vscode Ctrl + Shift + P. Kliknite na možnosť HTML na JSX v okne, ktoré sa objaví, aby ste zmenili HTML na JSX.

JSX je rozšírenie syntaxe JavaScriptu. Umožňuje vám použiť zmes HTML a JavaScript na písanie kódu v komponentoch. Po skopírovaní všetkých sekcií do komponentov zostane súbor index.html iba s odkazmi na úpravu štýlu a skriptmi.

Bude to vyzerať takto:

html>
<htmllang="sk">


<hlavu>
<metaznakovú sadu="utf-8" />
<odkazrel="ikona"href="%PUBLIC_URL%/favicon.ico" />
<metanázov="výrez"obsahu="width=device-width, initial-scale=1" />
<metanázov="farba témy"obsahu="#000000" />
<metanázov="popis"obsahu="Webová stránka vytvorená pomocou aplikácie create-react-app"/>
<odkazrel="dotyková ikona jablka"href="%PUBLIC_URL%/logo192.png" />
<odkazrel="manifest"href="%PUBLIC_URL%/manifest.json" />
<titul>Reagovať Apptitul>
<odkazrel="ikona"typu="image/x-ikona"href="assets/favicon.ico" />


 Ikony Font Awesome (bezplatná verzia)
<skriptsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"crossorigin="anonymný">skript>


 Písma Google
<odkazhref=" https://fonts.googleapis.com/css? rodina = Montserrat: 400 700"rel="štýlov"typu="text/css" />
<odkazhref=" https://fonts.googleapis.com/css? rodina=roboto+doska: 400 100 300 700"rel="štýlov"typu="text/css" />


 CSS základnej témy (zahŕňa Bootstrap)
<odkazhref="%PUBLIC_URL%/css/styles.css"rel="štýlov" />
hlavu>


<telo>
<noscript>Ak chcete spustiť túto aplikáciu, musíte povoliť JavaScript.noscript>


<divid="koreň">div>


 Bootstrap jadro JS
<skriptsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">skript>


 Hlavná téma JS
<skriptsrc="%PUBLIC_URL%/js/scripts.js">skript>


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


 * * Formuláre SB JS * *


 ** Aktivujte svoj formulár na https://startbootstrap.com/solution/contact-forms * *


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


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

Vytvorte trasy pre komponenty

Teraz, keď máte odkazy, skripty a komponenty v aplikácii, musíte pre ne vytvoriť trasy v súbore App.js. Trasy vykreslia stránky v aplikácii, aby bola dynamická.

Ak chcete vykresliť stránky, nainštalujte si response-router-dom s nasledujúcim príkazom:

npm install reagovat-router-dom

V App.js importujte BrowserRouter ako smerovač, Routes a Route z knižnica reag-router-dom. Potom importujte všetky komponentov a Stránky. Súbor by mal vyzerať takto:

importovať { BrowserRouter ako Smerovač, trasy, trasa } od"react-router-dom";
importovať Navigácia od'./components/Navigation';
importovať Domov od'./Pages/Home';
importovať O od'./Pages/About';
importovať Kontakt od'./Pages/Contact'
importovať Hlavička od"./components/Header";
funkciuApp() {
vrátiť (


"aplikácia">










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


exportpredvolená App;

Pri navigácii v prehliadači by ste mali vidieť vykreslené stránky na lokálnom hostiteľovi. Podobne ako šablóna, ktorú ste si stiahli, ako je znázornené nižšie.

Gratulujeme, úspešne ste integrovali tému Bootstrap do aplikácie React. Teraz si môžete prispôsobiť stránky podľa svojich predstáv.

Prečo používať tematické šablóny Bootstrapu?

Bootstrap šablóny pomáhajú vytvárať pozoruhodné front-end rozhrania vo veľmi krátkom čase. Na výber je veľa motívov. Všetky témy sú z najnovšej verzie Bootstrap. Prichádzajú tiež s licenciami MIT a sú najnovšími priemyselnými návrhmi.

Aj keď výhod je veľa, spoliehanie sa na šablóny znižuje kreativitu. Je bežné nájsť jednu populárnu tému používanú na iných stránkach online. Šablónu však môžete prispôsobiť jedinečnému dizajnu.

Teraz môžete integrovať šablónu Bootstrap s aplikáciou React. Začnite vytvárať pomocou šablón Bootstrap a vychutnajte si krásne front-end rozhrania.