Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Esiosa liidese loomine võib olla keeruline, kui olete ReactJS-i uus kasutaja. Bootstrapi raamistik muudab selle koos mallidega lihtsamaks ja kiiremaks.

Bootstrapil on temaatilised mallid, mida igaüks saab kohandada ja tasuta avaldada. Enne nende allalaadimist ja rakenduses kasutamist saate valida paljude mallide hulgast.

Mallid aitavad teil kiiresti luua tähelepanuväärseid kasutajaliideseid, jättes rohkem aega keerulistele funktsioonidele keskendumiseks. Saate õppida Bootstrapi mallide kohta, integreerides need ReactJS-i rakendusega.

Looge oma Reacti rakendus

Alusta sellest ReactJS rakenduse loomine teie masina kaustas. Teise võimalusena võite järgida ametnikku Reageerimisjuhend uue rakenduse loomisel.

Laadige alla Bootstrapi mall

Laadige oma valitud mall saidilt alla Käivitage Bootstrap teemade veebisait või mõni muu teie eelistus. Internetis on mitu tasuta Bootstrapi mallidega saiti.

Selle juhendi jaoks laadige alla Bootstrapi teema nimega Agency.

Pärast allalaadimist pakkige kaustafail lahti, et näha selle sisu. Märkate, et teil on kaustad nimega Varad, CSS, JS ja fail nimega index.html.

Lisage ReactJS-i rakendusse alglaadimismall

Järgmisena kopeerige allalaaditud kausta sisu nimega kausta avalik oma Reacti rakenduses. Märkate, et nüüd on teil kaks index.html faili. Kopeerige Bootstrapi sisu index.html faili Reacti rakendusse index.html faili.

Kuva Bootstrapi mall

Pärast Bootstrap HTML-i lisamist rakenduse faili index.html käivitage rakendus, et näha, kas integreerimine õnnestus. Kasutage järgmist käsku:

npm start

Peaksite oma brauseris nägema malli, nagu näitab järgmine pilt.

Integreerige Bootstrapi teema rakenduse komponentidesse

Bootstrapi malli integreerimiseks Reacti rakendusse peate kopeerima HTML-i jaotised failist index.html igasse komponenti. Komponendid võimaldavad teil kirjutada rakenduse erinevate osade jaoks koodi ja neid uuesti kasutada. See vähendab kordusi ja korrastab ka teie rakenduse struktuuri.

Failil index.html on nüüd erinevad jaotised Navigeerimine, Teave meist, Kontakt ja Jalus. Looge src-kaustas kaks kausta, komponenti ja lehte. Jagage jaotised allpool näidatud kaustadesse:

Komponendid peaksid sisaldama järgmist:

  • Header.jsx: päisereklaami jaotis.
  • Navigation.jsx: navigeerimisriba ja jalus.

Lehtede kaustas on järgmine:

  • AboutUs.jsx: teave meie kohta.
  • Home.jsx: jaotised Teenused, Portfell, Kliendid ja Meeskond.
  • Contacts.jsx: kontaktteave.

Kopeerige iga jaotise HTML failist index.html ja lisage see igale komponendile. Süntaks peaks välja nägema järgmine:

importida Reageerige alates'reageeri'
konst Päis = () => {
tagasi (




"mastipea">
"konteiner">
"päisepea-alapealkiri">Tere tulemast meie stuudiosse!</div>









"päise pealkirja tekst-suurtähed">
 SeeTore Sinuga kohtuda
 </div>



"btn btn-primary btn-xl tekst-suurtähed" href="#teenused">
 Räägi mulle rohkem
 </a>
 </div>
 </header>
 </div>
 );
};


eksportidavaikimisi Päis

Järgmisena muutke komponentide HTML-i süntaks JSX-iks. Selle automaatseks tegemiseks Vscode'i redaktoris klõpsake nuppu Ctrl + tõstuklahv + P. HTML-i muutmiseks JSX-iks klõpsake ilmuvas aknas suvandil HTML to JSX.

JSX on JavaScripti süntaksilaiend. See võimaldab komponentides koodi kirjutamiseks kasutada HTML-i ja JavaScripti segu. Kui olete kõik jaotised komponentidesse kopeerinud, jääb faili index.html alles ainult stiililingid ja skriptid.

See näeb välja selline:

html>
<htmllang="en">


<pea>
<metamärgistik="utf-8" />
<linkrel="ikoon"href="%PUBLIC_URL%/favicon.ico" />
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1" />
<metanimi="teema-värv"sisu="#000000" />
<metanimi="kirjeldus"sisu="Veebisait, mis on loodud rakendusega create-react-app"/>
<linkrel="õunapuuteikoon"href="%PUBLIC_URL%/logo192.png" />
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json" />
<pealkiri>Reageerimisrakenduspealkiri>
<linkrel="ikoon"tüüp="image/x-icon"href="assets/favicon.ico" />


 Font Awesome ikoonid (tasuta versioon)
<stsenaariumsrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"ristpäritolu="anonüümne">stsenaarium>


 Google'i fondid
<linkhref=" https://fonts.googleapis.com/css? perekond = Montserrat: 400 700"rel="laadileht"tüüp="text/css" />
<linkhref=" https://fonts.googleapis.com/css? perekond = robot + plaat: 400 100 300 700"rel="laadileht"tüüp="text/css" />


 Põhiteema CSS (sisaldab Bootstrapi)
<linkhref="%PUBLIC_URL%/css/styles.css"rel="laadileht" />
pea>


<keha>
<noscript>Selle rakenduse käitamiseks peate lubama JavaScripti.noscript>


<divid="juur">div>


 Bootstrap tuum JS
<stsenaariumsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">stsenaarium>


 Põhiteema JS
<stsenaariumsrc="%PUBLIC_URL%/js/scripts.js">stsenaarium>


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


 * * SB vormid JS * *


 * * Aktiveerige oma vorm aadressil https://startbootstrap.com/solution/contact-forms * *


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


<stsenaariumsrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">stsenaarium>
keha>
html>

Koostage komponentidele marsruute

Nüüd, kui teil on rakenduses lingid, skriptid ja komponendid, peate looma nende jaoks marsruudid failis App.js. Marsruudid renderdavad rakenduses olevaid lehti, et muuta see dünaamiliseks.

Lehtede renderdamiseks installige react-router-dom järgmise käsuga:

npm install react-ruuter-dom

Aastal App.js faili, importige BrowserRouter ruuterina, marsruutidena ja marsruutena rakendusest react-ruuter-dom raamatukogu. Seejärel importige kõik komponendid ja Leheküljed. Fail peaks välja nägema selline:

importida { Brauserruuter nagu Ruuter, marsruudid, marsruut } alates"react-ruuter-dom";
importida Navigeerimine alates'./components/Navigation';
importida Kodu alates'./Pages/Home';
importida Umbes alates'./Pages/About';
importida Võtke ühendust alates'./Pages/Contact'
importida Päis alates"./components/Header";
funktsiooniRakendus() {
tagasi (


"Rakendus">










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


eksportidavaikimisi Rakendus;

Brauseris navigeerides peaksite nägema renderdatud lehti kohalikus hostis. Sarnaselt allalaaditud mallile, nagu allpool näidatud.

Õnnitleme, olete edukalt integreerinud Bootstrapi teema oma Reacti rakendusse. Nüüd saate lehti oma eelistuste järgi kohandada.

Miks kasutada Bootstrapi temaatilisi malle?

Bootstrapi mallid aitavad väga lühikese aja jooksul luua märkimisväärseid esiotsa liideseid. Valida on paljude teemade vahel. Kõik teemad on Bootstrapi uusimas versioonis. Neil on ka MIT-litsentsid ja need on tööstusharu uusimad disainilahendused.

Kuigi eeliseid on palju, vähendab mallidele tuginemine loovust. Tavaliselt leitakse üks populaarne teema, mida kasutatakse teistel veebilehtedel. Siiski saate malli kohandada ainulaadse kujundusega.

Nüüd saate oma React Appiga integreerida Bootstrapi malli. Alustage koostamist Bootstrapi mallidega ja nautige kauneid esiosa liideseid.