Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Priekšgala saskarnes izveide var būt sarežģīta, ja esat iesācējs ReactJS. Bootstrap sistēma kopā ar veidnēm padara to vieglāku un ātrāku.

Bootstrap ir tematiskas veidnes, kuras ikviens var pielāgot un publicēt bez maksas. Varat izvēlēties no daudzām veidnēm, pirms tās lejupielādējat un izmantojat savā lietotnē.

Veidnes palīdz ātri izveidot ievērojamas priekšgala saskarnes, atstājot vairāk laika, lai koncentrētos uz sarežģītām funkcijām. Varat uzzināt par Bootstrap veidnēm, integrējot to ar ReactJS lietotni.

Izveidojiet savu React lietotni

Sāciet ar izveidojot ReactJS lietotni mašīnas mapē. Varat arī sekot ierēdnim Reakcijas ceļvedis par jaunas lietotnes izveidi.

Lejupielādējiet sāknēšanas veidni

Lejupielādējiet pēc savas izvēles veidni no Startējiet Bootstrap motīvu vietne vai cita pēc jūsu izvēles. Tiešsaistē ir vairākas vietnes ar bezmaksas Bootstrap veidnēm.

instagram viewer

Lai iegūtu šo rokasgrāmatu, lejupielādējiet Bootstrap motīvu ar nosaukumu Agency.

Pēc lejupielādes izpakojiet mapes failu, lai redzētu tā saturu. Jūs ievērosiet, ka jums ir mapes ar nosaukumu aktīvi, CSS, JS un fails ar nosaukumu index.html.

Pievienojiet Bootstrap veidni ReactJS lietotnei

Pēc tam kopējiet lejupielādētās mapes saturu mapē ar nosaukumu publiski savā React lietotnē. Jūs ievērosiet, ka tagad jums ir divi index.html faili. Kopējiet Bootstrap saturu index.html failu lietotnē React index.html failu.

Parādīt sāknēšanas veidni

Pēc Bootstrap HTML pievienošanas lietotnes indeksam.html palaidiet lietotni, lai redzētu, vai integrācija bija veiksmīga. Izmantojiet šādu komandu:

npm sākums

Jums vajadzētu redzēt veidni savā pārlūkprogrammā, kā parādīts nākamajā attēlā.

Integrējiet Bootstrap motīvu lietotnes komponentos

Lai integrētu Bootstrap veidni React App, jums ir jākopē HTML sadaļas no index.html uz katru komponentu. Komponenti ļauj rakstīt kodu dažādām lietotnes daļām un izmantot tās atkārtoti. Tas samazina atkārtošanos un arī sakārto jūsu lietotnes struktūru.

Failā index.html tagad ir dažādas sadaļas Navigācija, Par mums, Kontaktpersona un Kājene. Mapē src izveidojiet divas mapes, komponentus un lapas. Sadaliet sadaļas tālāk parādītajās mapēs:

Komponentos jāiekļauj šādas sastāvdaļas:

  • Header.jsx: virsraksta sadaļa.
  • Navigation.jsx: navigācijas josla un kājene.

Lapu mapē būs šāda informācija:

  • AboutUs.jsx: informācija par mums.
  • Home.jsx: sadaļas Pakalpojumi, Portfelis, Klienti un Komanda.
  • Contacts.jsx: kontaktinformācija.

Nokopējiet katras sadaļas HTML no faila index.html un pievienojiet to katram komponentam. Sintaksei vajadzētu izskatīties šādi:

imports Reaģēt no'reaģēt'
konst Virsraksts = () => {
atgriezties (




"masthead">
"konteiners">
"masthead-apakšvirsraksts">Laipni lūdzam mūsu studijā!</div>









"virsraksta virsraksta teksts-lielie burti">
 TasPrieks Tevi satikt
 </div>



"btn btn-primary btn-xl text-lielie burti" href="#pakalpojumi">
 Pastāsti man vairāk
 </a>
 </div>
 </header>
 </div>
 );
};


eksportētnoklusējuma Virsraksts

Pēc tam mainiet komponentu HTML sintaksi uz JSX. Lai to izdarītu automātiski Vscode redaktorā, noklikšķiniet uz Ctrl+Shift+P. Uznirstošajā logā noklikšķiniet uz opcijas HTML uz JSX, lai mainītu HTML uz JSX.

JSX ir JavaScript sintakses paplašinājums. Tas ļauj izmantot HTML un JavaScript sajaukumu, lai rakstītu kodu komponentos. Kad visas sadaļas ir nokopētas komponentos, failā index.html paliek tikai stila saites un skripti.

Tas izskatīsies šādi:

html>
<htmllang="lv">


<galvu>
<metarakstzīmju kopa="utf-8" />
<saiterel="ikona"href="%PUBLIC_URL%/favicon.ico" />
<metanosaukums="skata logs"saturu="platums=ierīces platums, sākotnējais mērogs=1" />
<metanosaukums="motīva krāsa"saturu="#000000" />
<metanosaukums="apraksts"saturu="Tīmekļa vietne izveidota, izmantojot lietotni Create-react-app"/>
<saiterel="ābolu pieskāriena ikona"href="%PUBLIC_URL%/logo192.png" />
<saiterel="manifests"href="%PUBLIC_URL%/manifest.json" />
<virsraksts>Reaģēt lietotnevirsraksts>
<saiterel="ikona"veids="image/x-icon"href="assets/favicon.ico" />


 Fonts Awesome ikonas (bezmaksas versija)
<skriptssrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"krusta izcelsme="Anonīms">skripts>


 Google fonti
<saitehref=" https://fonts.googleapis.com/css? ģimene = Monserrata: 400 700"rel="stila lapa"veids="text/css" />
<saitehref=" https://fonts.googleapis.com/css? ģimene=Roboto+plāksne: 400,100,300,700"rel="stila lapa"veids="text/css" />


 Pamatmotīva CSS (ietver Bootstrap)
<saitehref="%PUBLIC_URL%/css/styles.css"rel="stila lapa" />
galvu>


<ķermeni>
<noscript>Lai palaistu šo lietotni, jums ir jāiespējo JavaScript.noscript>


<divid="sakne">div>


 Bootstrap kodols JS
<skriptssrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">skripts>


 Pamattēma JS
<skriptssrc="%PUBLIC_URL%/js/scripts.js">skripts>


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


 * * SB veidlapas JS * *


 * * Aktivizējiet savu veidlapu vietnē https://startbootstrap.com/solution/contact-forms * *


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


<skriptssrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">skripts>
ķermeni>
html>

Izveidojiet maršrutus komponentiem

Tagad, kad lietotnē ir saites, skripti un komponenti, jums ir jāizveido tiem maršruti App.js failā. Maršruti atveidos lietotnes lapas, lai padarītu to dinamisku.

Lai renderētu lapas, instalējiet react-router-dom ar šādu komandu:

npm instalējiet react-router-dom

Iekš App.js failu, importējiet BrowserRouter kā maršrutētāju, maršrutus un maršrutu no react-router-dom bibliotēka. Pēc tam importējiet visus sastāvdaļas un Lapas. Failam vajadzētu izskatīties šādi:

imports { BrowserRouter kā Maršrutētājs, maršruti, maršruts } no"react-router-dom";
imports Navigācija no'./components/Navigation';
imports Mājas no'./Pages/Home';
imports Par no'./Pages/Par';
imports Sazināties no'./Pages/Contact'
imports Virsraksts no"./components/Header";
funkcijuApp() {
atgriezties (


"Lietotne">










"/" elements={} />
"/par" elements={} />
"/kontakts" elements={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


eksportētnoklusējuma Lietotne;

Pārvietojoties pārlūkprogrammā, jums vajadzētu redzēt atveidotās lapas vietējā resursdatorā. Līdzīga veidnei, kuru lejupielādējāt, kā parādīts tālāk.

Apsveicam! Jūs savā React lietotnē esat veiksmīgi integrējis Bootstrap motīvu. Tagad varat pielāgot lapas atbilstoši savām vēlmēm.

Kāpēc izmantot Bootstrap tematiskās veidnes?

Bootstrap veidnes palīdz izveidot ievērojamas priekšgala saskarnes ļoti īsā laikā. Ir daudz tēmu, no kurām izvēlēties. Visas tēmas ir jaunākajā Bootstrap versijā. Tiem ir arī MIT licences, un tie ir jaunākie nozares dizaini.

Lai gan priekšrocību ir daudz, paļaušanās uz veidnēm samazina radošumu. Parasti tiešsaistē tiek atrasts viens populārs motīvs, kas tiek izmantots citās vietnēs. Tomēr jūs varat pielāgot veidni unikālam dizainam.

Tagad varat integrēt Bootstrap veidni savā React lietotnē. Sāciet veidot ar Bootstrap veidnēm un izbaudiet skaistas priekšgala saskarnes.