Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Crearea unei interfețe front-end poate fi o provocare dacă sunteți nou în ReactJS. Cadrul Bootstrap, alături de șabloanele sale, îl face mai ușor și mai rapid.

Bootstrap are șabloane tematice pe care oricine le poate personaliza și publica gratuit. Puteți alege dintre multe șabloane înainte de a le descărca și utiliza în aplicația dvs.

Șabloanele vă ajută să creați rapid interfețe frontend remarcabile, lăsând mai mult timp pentru a vă concentra pe funcții complexe. Puteți afla despre șabloanele Bootstrap integrând unul cu o aplicație ReactJS.

Creați-vă aplicația React

Începe prin crearea unei aplicații ReactJS într-un folder de pe aparat. Alternativ, puteți urmări oficialul Ghid de reacție la crearea unei noi aplicații.

Descărcați un șablon Bootstrap

Descărcați un șablon la alegere din Porniți Bootstrap site-ul de teme sau altul preferat. Există mai multe site-uri cu șabloane Bootstrap gratuite online.

instagram viewer

Pentru acest ghid, descărcați tema Bootstrap numită Agenție.

Odată descărcat, dezarhivați fișierul folderului pentru a vedea conținutul acestuia. Veți observa că aveți foldere numite assets, CSS, JS și un fișier numit index.html.

Adăugați șablonul Bootstrap la aplicația ReactJS

Apoi, copiați conținutul folderului descărcat în folderul numit public în aplicația dvs. React. Veți observa că acum aveți două fișiere index.html. Copiați conținutul Bootstrap index.html fișier în aplicația React index.html fişier.

Afișează șablonul Bootstrap

După ce adăugați codul HTML Bootstrap la index.html aplicației, rulați aplicația pentru a vedea dacă integrarea a avut succes. Utilizați următoarea comandă:

npm start

Ar trebui să vedeți șablonul în browser, așa cum ilustrează imaginea următoare.

Integrați tema Bootstrap în componentele aplicației

Pentru a integra șablonul Bootstrap în aplicația React, trebuie să copiați secțiunile HTML din index.html în fiecare componentă. Componentele vă permit să scrieți cod pentru diferite părți ale aplicației și să le reutilizați. Acest lucru reduce repetarea și, de asemenea, organizează structura aplicației dvs.

Fișierul index.html are acum diferite secțiuni Navigare, Despre noi, Contact și Subsol. În folderul src, creați două foldere, componente și pagini. Împărțiți secțiunile în folderele prezentate mai jos:

Componentele ar trebui să includă următoarele:

  • Header.jsx: secțiunea masthead.
  • Navigation.jsx: bara de navigare și subsolul.

Dosarul paginilor va avea următoarele:

  • AboutUs.jsx: Informații despre noi.
  • Home.jsx: secțiunile Servicii, Portofoliu, Clienți și Echipa.
  • Contacts.jsx: informații de contact.

Copiați codul HTML al fiecărei secțiuni din fișierul index.html și adăugați-l la fiecare componentă. Sintaxa ar trebui să arate astfel:

import Reacţiona din'reacţiona'
const Antet = () => {
întoarcere (




"catarg">
"container">
„subtitlu catarg”>Bine ați venit la Studioul nostru!</div>









„text heading-heading-majuscule”>
 AceastaMă bucur să te cunosc
 </div>



„btn btn-primary btn-xl text-majuscule” href="#Servicii">
 Spune-mi mai multe
 </a>
 </div>
 </header>
 </div>
 );
};


exportMod implicit Antet

Apoi, schimbați sintaxa HTML din componente în JSX. Pentru a face acest lucru automat pe editorul Vscode, faceți clic Ctrl + Shift + P. Faceți clic pe opțiunea HTML în JSX din fereastra care apare, pentru a schimba HTML în JSX.

JSX este o extensie de sintaxă a JavaScript. Vă permite să utilizați un amestec de HTML și JavaScript pentru a scrie cod în componente. Odată ce copiați toate secțiunile în componente, fișierul index.html rămâne doar cu linkurile de stil și scripturile.

Va arata asa:

html>
<htmllang="ro">


<cap>
<metaset de caractere="utf-8" />
<legăturărel="icoana"href=„%PUBLIC_URL%/favicon.ico” />
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1” />
<metaNume="temă-culoare"conţinut="#000000" />
<metaNume="Descriere"conţinut=„Site web creat folosind aplicația create-react”/>
<legăturărel=„pictogramă-touch-măr”href=„%PUBLIC_URL%/logo192.png” />
<legăturărel="manifesta"href=„%PUBLIC_URL%/manifest.json” />
<titlu>Aplicația Reacttitlu>
<legăturărel="icoana"tip=„pictogramă imagine/x”href=„assets/favicon.ico” />


 Pictograme Font Awesome (versiunea gratuită)
<scenariusrc=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"origine încrucișată="anonim">scenariu>


 Fonturi Google
<legăturăhref=" https://fonts.googleapis.com/css? familie=Montserrat: 400.700"rel="foaia de stil"tip=„text/css” />
<legăturăhref=" https://fonts.googleapis.com/css? familie=Roboto+Slab: 400.100.300.700"rel="foaia de stil"tip=„text/css” />


 Tema principală CSS (include Bootstrap)
<legăturăhref=„%PUBLIC_URL%/css/styles.css”rel="foaia de stil" />
cap>


<corp>
<noscript>Trebuie să activați JavaScript pentru a rula această aplicație.noscript>


<divid="rădăcină">div>


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


 Tema principală JS
<scenariusrc=„%PUBLIC_URL%/js/scripts.js”>scenariu>


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


 * * Formulare SB JS * *


 * * Activează-ți formularul la https://startbootstrap.com/solution/contact-forms * *


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


<scenariusrc=" https://cdn.startbootstrap.com/sb-forms-latest.js">scenariu>
corp>
html>

Creați rute pentru componente

Acum că aveți legăturile, scripturile și componentele în aplicație, trebuie să creați rute pentru ele în fișierul App.js. Rutele vor reda paginile din aplicație pentru a o face dinamică.

Pentru a randa paginile, instalați react-router-dom cu următoarea comandă:

npm instalează react-router-dom

În App.js fișier, importați BrowserRouter ca Router, Rute și Rută din biblioteca react-router-dom. Apoi importați toate componente și Pagini. Fișierul ar trebui să arate așa:

import { BrowserRouter la fel de Router, Rute, Rută } din"react-router-dom";
import Navigare din„./components/Navigation”;
import Acasă din„./Pagini/Acasă”;
import Despre din„./Pagini/Despre”;
import a lua legatura din„./Pagini/Contact”
import Antet din„./components/Header”;
funcţieApp() {
întoarcere (


„Aplicație”>










"/" element={} />
"/despre" element={} />
"/a lua legatura" element={} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


exportMod implicit Aplicație;

Ar trebui să vedeți paginile redate pe gazda locală atunci când navigați în browser. Similar cu șablonul pe care l-ați descărcat, așa cum este ilustrat mai jos.

Felicitări, ați integrat cu succes o temă Bootstrap în aplicația dvs. React. Acum puteți personaliza paginile după preferințele dvs.

De ce să folosiți șabloanele tematice Bootstrap?

Șabloanele Bootstrap ajută la crearea de interfețe front-end remarcabile într-un timp foarte scurt. Există multe teme din care să alegeți. Toate temele sunt din cea mai recentă versiune Bootstrap. De asemenea, vin cu licențe MIT și sunt cele mai recente modele din industrie.

Deși avantajele sunt multe, bazarea pe șabloane reduce creativitatea. Este obișnuit să găsiți o temă populară folosită pe alte site-uri online. Cu toate acestea, puteți personaliza un șablon la un design unic.

Acum puteți integra un șablon Bootstrap cu aplicația dvs. React. Începeți să construiți cu șabloane Bootstrap și bucurați-vă de interfețe front-end frumoase.