Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Priekinės sąsajos sukūrimas gali būti sudėtingas, jei nesate naujokas ReactJS. „Bootstrap“ sistema kartu su šablonais palengvina ir pagreitina.

„Bootstrap“ turi teminius šablonus, kuriuos kiekvienas gali tinkinti ir paskelbti nemokamai. Galite pasirinkti iš daugelio šablonų prieš atsisiųsdami ir naudodami juos programoje.

Šablonai padeda greitai sukurti nuostabias sąsajas, paliekant daugiau laiko susitelkti ties sudėtingomis funkcijomis. Galite sužinoti apie „Bootstrap“ šablonus integravę juos į „ReactJS“ programą.

Sukurkite savo „React“ programą

Pradėkite nuo sukurti „ReactJS“ programą įrenginio aplanke. Arba galite sekti pareigūną Reagavimo vadovas kuriant naują programą.

Atsisiųskite „Bootstrap“ šabloną

Atsisiųskite pasirinktą šabloną iš Paleiskite „Bootstrap“. teminė svetainė ar kita jūsų pasirinkta svetainė. Internete yra keletas svetainių su nemokamais „Bootstrap“ šablonais.

instagram viewer

Norėdami gauti šį vadovą, atsisiųskite „Bootstrap“ temą, pavadintą „Agentūra“.

Atsisiuntę išpakuokite aplanko failą, kad pamatytumėte jo turinį. Pastebėsite, kad turite aplankus, pavadintus turtu, CSS, JS ir failą, pavadintą index.html.

Pridėkite „Bootstrap“ šabloną prie „ReactJS“ programos

Tada nukopijuokite atsisiųsto aplanko turinį į aplanką pavadinimu viešas savo React programėlėje. Pastebėsite, kad dabar turite du index.html failus. Nukopijuokite Bootstrap turinį index.html failą į „React“ programą index.html failą.

Rodyti Bootstrap šabloną

Pridėję Bootstrap HTML prie programos index.html, paleiskite programą, kad pamatytumėte, ar integracija buvo sėkminga. Naudokite šią komandą:

npm pradžia

Šabloną turėtumėte matyti naršyklėje, kaip parodyta toliau pateiktame paveikslėlyje.

Integruokite „Bootstrap“ temą į programos komponentus

Norėdami integruoti „Bootstrap“ šabloną į „React“ programą, turite nukopijuoti HTML skyrius iš index.html į kiekvieną komponentą. Komponentai leidžia parašyti kodą skirtingoms Programėlės dalims ir pakartotinai jas naudoti. Tai sumažina pasikartojimų skaičių ir taip pat sutvarko jūsų programos struktūrą.

Dabar faile index.html yra skirtingos skiltys Navigacija, Apie mus, Kontaktai ir Poraštė. Aplanke src sukurkite du aplankus, komponentus ir puslapius. Padalinkite skyrius į toliau nurodytus aplankus:

Sudedamosios dalys turėtų apimti šiuos elementus:

  • Header.jsx: pagrindinio puslapio antraštės skiltis.
  • Navigation.jsx: naršymo juosta ir poraštė.

Puslapių aplanke bus:

  • AboutUs.jsx: Informacija apie mus.
  • Home.jsx: paslaugų, portfelio, klientų ir komandos skiltys.
  • Contacts.jsx: kontaktinė informacija.

Nukopijuokite kiekvienos skilties HTML iš failo index.html ir pridėkite jį prie kiekvieno komponento. Sintaksė turėtų atrodyti taip:

importuoti Reaguoti iš'reaguoti'
konst Antraštė = () => {
grąžinti (




"stiebo antraštė">
"konteineris">
"stiebo antraštė-paantraštė">Sveiki atvykę į mūsų studiją!</div>









"masthead-heading text-didžiosios raidės">
 TaiMalonu susipažinti
 </div>



"btn btn-primary btn-xl text-didžiosios raidės" href="#paslaugos">
 Pasakyk man daugiau
 </a>
 </div>
 </header>
 </div>
 );
};


eksportuotinumatytas Antraštė

Tada pakeiskite komponentų HTML sintaksę į JSX. Norėdami tai padaryti automatiškai Vscode redaktoriuje, spustelėkite Ctrl + Shift + P. Pasirodžiusiame lange spustelėkite parinktį HTML į JSX, kad pakeistumėte HTML į JSX.

JSX yra „JavaScript“ sintaksės plėtinys. Tai leidžia naudoti HTML ir JavaScript mišinį, kad galėtumėte įrašyti kodą į komponentus. Nukopijavus visas dalis į komponentus, faile index.html lieka tik stiliaus nuorodos ir scenarijai.

Tai atrodys taip:

html>
<htmllang="en">


<galva>
<metasimbolių rinkinys="utf-8" />
<nuorodarel="piktograma"href=„%PUBLIC_URL%/favicon.ico“ />
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1" />
<metavardas="temos spalva"turinys="#000000" />
<metavardas="apibūdinimas"turinys=„Svetainė sukurta naudojant „create-react-app“/>
<nuorodarel="Apple-touch-ikona"href=„%PUBLIC_URL%/logo192.png“ />
<nuorodarel="manifestas"href=„%PUBLIC_URL%/manifest.json“ />
<titulą>Reaguoti programatitulą>
<nuorodarel="piktograma"tipo="image/x-icon"href="assets/favicon.ico" />


 „Font Awesome“ piktogramos (nemokama versija)
<scenarijussrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"kryžminė kilmė="Anoniminis">scenarijus>


 Google šriftai
<nuorodahref=" https://fonts.googleapis.com/css? šeima = Monseratas: 400 700"rel="stiliaus lapas"tipo="text/css" />
<nuorodahref=" https://fonts.googleapis.com/css? šeima = robotas + plokštė: 400,100,300,700"rel="stiliaus lapas"tipo="text/css" />


 Pagrindinės temos CSS (apima Bootstrap)
<nuorodahref=„%PUBLIC_URL%/css/styles.css“rel="stiliaus lapas" />
galva>


<kūnas>
<noscript>Norėdami paleisti šią programą, turite įjungti „JavaScript“.noscript>


<divid="šaknis">div>


 „Bootstrap“ branduolys JS
<scenarijussrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">scenarijus>


 Pagrindinė tema JS
<scenarijussrc=„%PUBLIC_URL%/js/scripts.js“>scenarijus>


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


 * * SB formos JS * *


 * * Suaktyvinkite savo formą adresu https://startbootstrap.com/solution/contact-forms * *


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


<scenarijussrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">scenarijus>
kūnas>
html>

Sukurkite komponentų maršrutus

Dabar, kai programoje turite nuorodas, scenarijus ir komponentus, turite sukurti jiems maršrutus App.js faile. Maršrutai pateiks programos puslapius, kad būtų dinamiški.

Norėdami pateikti puslapius, įdiekite react-router-dom naudodami šią komandą:

npm įdiegti react-router-dom

Viduje App.js failą, importuokite „BrowserRouter“ kaip maršrutizatorių, „Routes“ ir „Route“ iš react-router-dom biblioteka. Tada importuokite visus komponentai ir Puslapiai. Failas turėtų atrodyti taip:

importuoti { Naršyklės maršrutizatorius kaip Maršrutizatorius, maršrutai, maršrutas } iš"react-router-dom";
importuoti Navigacija iš'./components/Navigation';
importuoti Namai iš'./Puslapiai/Pagrindinis';
importuoti Apie iš'./Puslapiai/Apie';
importuoti kontaktas iš'./Puslapiai/Kontaktai'
importuoti Antraštė iš"./components/Header";
funkcijaProgramėlė() {
grąžinti (


"Programėlė">










"/" element={} />
"/apie" element={} />
"/kontaktas" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


eksportuotinumatytas Programėlė;

Naršydami naršyklėje turėtumėte matyti pateiktus puslapius vietinėje priegloboje. Panašus į atsisiųstą šabloną, kaip parodyta toliau.

Sveikiname, sėkmingai integravote „Bootstrap“ temą į savo „React“ programą. Dabar galite tinkinti puslapius pagal savo pageidavimus.

Kodėl verta naudoti „Bootstrap“ teminius šablonus?

„Bootstrap“ šablonai padeda per labai trumpą laiką sukurti nuostabias sąsajas. Galima rinktis iš daugybės temų. Visos temos yra naujausios „Bootstrap“ versijos. Jie taip pat yra su MIT licencijomis ir yra naujausio pramonės dizaino.

Nors pranašumų yra daug, pasikliaujant šablonais sumažėja kūrybiškumas. Įprasta rasti vieną populiarią temą, naudojamą kitose interneto svetainėse. Tačiau galite pritaikyti šabloną pagal unikalų dizainą.

Dabar galite integruoti „Bootstrap“ šabloną su „React“ programa. Pradėkite kurti naudodami „Bootstrap“ šablonus ir mėgaukitės gražiomis sąsajomis.