Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Vytvoření rozhraní front-end může být náročné, pokud jste v ReactJS nováčkem. Rámec Bootstrap to spolu se svými šablonami usnadňuje a urychluje.

Bootstrap má tematické šablony, které si může každý upravit a zdarma publikovat. Před stažením a použitím ve vaší aplikaci si můžete vybrat z mnoha šablon.

Šablony vám pomohou rychle vytvořit pozoruhodná rozhraní frontendu a ponechat více času soustředit se na komplexní funkce. O šablonách Bootstrap se můžete dozvědět integrací jedné s aplikací ReactJS.

Vytvořte si aplikaci React

Začněte tím vytvoření aplikace ReactJS ve složce na vašem počítači. Případně můžete sledovat úředníka Reagovat návod při vytváření nové aplikace.

Stáhněte si šablonu bootstrap

Stáhněte si šablonu dle vašeho výběru z Spusťte Bootstrap tématické webové stránky nebo jiné podle vašich preferencí. Existuje několik webů s bezplatnými šablonami Bootstrap online.

instagram viewer

Pro tuto příručku si stáhněte téma Bootstrap s názvem Agentura.

Po stažení rozbalte soubor složky, abyste viděli jeho obsah. Všimnete si, že máte složky s názvem aktiva, CSS, JS a soubor s názvem index.html.

Přidejte šablonu Bootstrap do aplikace ReactJS

Dále zkopírujte obsah stažené složky do složky s názvem veřejnost ve vaší aplikaci React. Všimnete si, že nyní máte dva soubory index.html. Zkopírujte obsah Bootstrapu index.html soubor do aplikace React index.html soubor.

Zobrazit šablonu bootstrapu

Po přidání kódu HTML Bootstrap do souboru index.html aplikace spusťte aplikaci a zjistěte, zda byla integrace úspěšná. Použijte následující příkaz:

npm start

Šablonu byste měli vidět ve svém prohlížeči, jak ukazuje následující obrázek.

Integrujte motiv Bootstrap do komponent aplikace

Chcete-li integrovat šablonu Bootstrap do aplikace React, musíte do každé komponenty zkopírovat části HTML z index.html. Komponenty vám umožňují psát kód pro různé části aplikace a znovu je používat. To snižuje opakování a také organizuje strukturu vaší aplikace.

Soubor index.html má nyní různé sekce Navigace, O nás, Kontakt a Zápatí. Ve složce src vytvořte dvě složky, komponenty a stránky. Rozdělte oddíly do níže zobrazených složek:

Komponenty by měly obsahovat následující:

  • Header.jsx: Sekce masthead.
  • Navigation.jsx: Navigační lišta a zápatí.

Složka stránek bude mít následující:

  • AboutUs.jsx: Informace o nás.
  • Home.jsx: sekce Služby, Portfolio, Klienti a Tým.
  • Contacts.jsx: Kontaktní informace.

Zkopírujte HTML každé sekce ze souboru index.html a přidejte jej do každé komponenty. Syntaxe by měla vypadat takto:

import Reagovat z'reagovat'
konst Hlavička = () => {
vrátit se (




"stožár">
"kontejner">
"tiráž-podnadpis">Vítejte v našem studiu!</div>









"text nadpisu tiráž-velká písmena">
 ToRád vás poznávám
 </div>



"btn btn-primární btn-xl text-velká písmena" href="#služby">
 Řekni mi více
 </a>
 </div>
 </header>
 </div>
 );
};


vývoznívýchozí Záhlaví

Dále změňte syntaxi HTML v komponentách na JSX. Chcete-li to provést automaticky, klikněte na editor Vscode Ctrl + Shift + P. Kliknutím na možnost HTML na JSX v okně, které se objeví, změníte HTML na JSX.

JSX je rozšíření syntaxe JavaScriptu. Umožňuje vám používat kombinaci HTML a JavaScriptu pro psaní kódu v komponentách. Jakmile zkopírujete všechny sekce do komponent, soubor index.html zůstane pouze se stylingovými odkazy a skripty.

Bude to vypadat takto:

html>
<htmllang="en">


<hlava>
<metaznaková sada="utf-8" />
<odkazrel="ikona"href="%PUBLIC_URL%/favicon.ico" />
<metanázev="výřez"obsah="width=device-width, initial-scale=1" />
<metanázev="barva tématu"obsah="#000000" />
<metanázev="popis"obsah="Web vytvořený pomocí create-react-app"/>
<odkazrel="dotyková ikona jablka"href="%PUBLIC_URL%/logo192.png" />
<odkazrel="manifest"href="%PUBLIC_URL%/manifest.json" />
<titul>Reagovat Apptitul>
<odkazrel="ikona"typ="image/x-ikona"href="assets/favicon.ico" />


 Ikony Font Awesome (bezplatná verze)
<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="stylesheet"typ="text/css" />
<odkazhref=" https://fonts.googleapis.com/css? rodina=roboto+deska: 400 100 300 700"rel="stylesheet"typ="text/css" />


 CSS základního motivu (zahrnuje Bootstrap)
<odkazhref="%PUBLIC_URL%/css/styles.css"rel="stylesheet" />
hlava>


<tělo>
<noscript>Ke spuštění této aplikace musíte povolit JavaScript.noscript>


<divid="vykořenit">div>


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


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


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


 * * Formuláře SB JS * *


 * * Aktivujte svůj formulář na https://startbootstrap.com/solution/contact-forms * *


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


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

Vytvořte trasy pro komponenty

Nyní, když máte odkazy, skripty a komponenty v aplikaci, musíte pro ně vytvořit trasy v souboru App.js. Trasy vykreslí stránky v aplikaci, aby byla dynamická.

Chcete-li vykreslit stránky, nainstalujte Reag-router-dom pomocí následujícího příkazu:

npm install reagovat-router-dom

V App.js importujte BrowserRouter jako Router, Routes a Route z knihovna reagovat-router-dom. Poté importujte všechny komponenty a Stránky. Soubor by měl vypadat takto:

import { BrowserRouter tak jako Směrovač, trasy, trasa } z"react-router-dom";
import Navigace z'./components/Navigation';
import Domov z'./Pages/Home';
import O z'./Pages/About';
import Kontakt z'./Pages/Contact'
import Záhlaví z"./components/Header";
funkceAplikace() {
vrátit se (


"Aplikace">










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


vývoznívýchozí Aplikace;

Při navigaci v prohlížeči byste měli vidět vykreslené stránky na místním hostiteli. Podobné šabloně, kterou jste si stáhli, jak je znázorněno níže.

Gratulujeme, úspěšně jste integrovali téma Bootstrap do vaší aplikace React. Nyní si můžete stránky přizpůsobit podle svých preferencí.

Proč používat tematické šablony Bootstrapu?

Bootstrap šablony pomáhají vytvořit pozoruhodná rozhraní front-end ve velmi krátkém čase. Na výběr je mnoho motivů. Všechna témata jsou z nejnovější verze Bootstrap. Dodávají se také s licencemi MIT a jsou nejnovějšími průmyslovými návrhy.

Zatímco výhod je mnoho, spoléhání se na šablony snižuje kreativitu. Je běžné najít jedno oblíbené téma používané na jiných webech online. Šablonu však můžete přizpůsobit jedinečnému designu.

Nyní můžete integrovat šablonu Bootstrap s aplikací React. Začněte budovat pomocí šablon Bootstrap a užijte si krásná rozhraní front-end.