React este printre cele mai populare cadre și biblioteci JavaScript pentru construirea de aplicații cu o singură pagină și interfețe cu utilizatorul. Flexibilitatea sa în construirea de interfețe cu utilizatorul folosind componentele sale reutilizabile, viteza de dezvoltare și comunitatea de sprijin sunt motivele pentru popularitatea sa.
Cu toate acestea, React trebuie combinat cu Cascading Style Sheets (CSS) pentru a face aplicațiile sale mai atractive din punct de vedere vizual și mai prezentabile. Scrierea CSS de la zero poate fi consumatoare de timp.
Dezvoltatorii pot petrece mult timp lucrând la stil în loc de funcționalitățile cheie ale unei aplicații React. Vestea bună este că instrumentele și cadrele precum Bootstrap facilitează adăugarea CSS la aplicația dvs. React.
Cuprins
Ce este Bootstrap?
Bootstrap este un cadru CSS open-source pentru dezvoltarea front-end. Bootstrap le permite dezvoltatorilor să creeze site-uri web responsive și mobile, prin setul său cuprinzător de instrumente și șabloane de proiectare bazate pe JavaScript și CSS.
Bootstrap a fost creat de Twitter și este întreținut și de o echipă de ingineri de la aceeași companie. Codul sursă este menținut pe GitHub, iar membrii comunității pot contribui și trimite rapoarte și sugestii de erori. Bootstrap 5.3.0-alpha1 este cea mai recentă versiune la momentul scrierii.
De ce să folosiți Bootstrap cu React?
- Economisește timp: Bootstrap se ocupă de formatare, oferindu-vă mai mult timp pentru a vă concentra pe funcționalitate. Prin urmare, nu trebuie să vă faceți griji cu privire la probleme precum aspectul formularelor sau butoanelor dvs., ci cu privire la domenii precum dacă butonul de trimitere trimite date către backend-ul sau API-ul dvs.
- Ușurință în utilizare: după ce ați adăugat Bootstrap la aplicația dvs. React, trebuie doar să luați componentele UI pre-proiectate și să le adăugați în aplicația dvs.
- Design consistent: majoritatea aplicațiilor cresc în dimensiune în timp. Asigurarea unui design consistent al site-ului dvs. este importantă dacă doriți să atrageți utilizatori fideli. Bootstrap are un stil consistent care va oferi paginilor tale un aspect uniform.
- O mulțime de șabloane din care să alegeți: Bootstrap are sute de șabloane, de la bare de navigare, butoane, formulare și carusele până la meniuri derulante, pentru a menționa câteva, din care să alegeți.
- Ușurință de personalizare: chiar dacă Bootstrap are șabloane de design, puteți oricând personaliza dimensiunea fontului, culoarea și alte caracteristici pentru a se potrivi nevoilor dvs.
- Asistență comunitară: Bootstrap are o documentație extinsă pentru a vă ajuta să începeți. Cu toate acestea, puteți încă baza pe marea comunitate, adăugând mereu noi funcții și menținând acest cadru CSS.
- Design receptiv: odată ce ați adăugat Bootstrap la aplicația dvs. React, sunteți sigur că aplicația dvs. web va fi receptivă pe toate dimensiunile de ecran.
Cum se instalează Bootstrap în React
O aplicație React nu vine cu Bootstrap instalat în mod implicit. Dar înainte de a explora cum să adăugați/instalați Bootstrap în React, trebuie să verificăm câteva lucruri;
Cerințe preliminare
Utilizați această comandă pentru a verifica dacă node.js este instalat pe computerul dvs.:
node -v
Dacă node.js este instalat, veți avea o ieșire similară cu aceasta pe terminalul dvs.
Versiunea nodului
Dacă nu este instalat, puteți verifica instrucțiunile de descărcare de la https://nodejs.org/en/.
Utilizați această comandă pentru a verifica dacă React este instalat pe computer:
npm list react
Dacă React este instalat la nivel global pe mașina dvs., veți avea așa ceva pe terminal.
Versiunea React
- Instalați react-create-app pe mașina dvs. Folosind această comandă
npm install -g create-react-app
- Creați-vă aplicația React folosind această comandă
npx create-react-app my-app
Puteți înlocui aplicația mea cu orice nume la alegere. Pentru cazul nostru, am numit aplicația noastră react-b.
Odată instalat, veți avea ceva similar pe terminal:
Rulați aceste comenzi pentru a începe
- cd react-b (folosește numele aplicației tale alese la pasul anterior)
- npm start (această comandă pornește aplicația React)
Acum putem trece la următorii pași și putem adăuga/instala Bootstrap în aplicația noastră React:
NPM Instalează metoda Bootstrap
Node.js vine cu npm (manager de pachete de noduri) instalat implicit.
Puteți verifica versiunea npm-ului dvs. prin această comandă:
npm -v
Dacă npm este instalat, veți obține o ieșire precum 9.2.0
Acum puteți instala bootstrap folosind această comandă:
npm install bootstrap
După ce ați terminat, accesați fișierul ./src/index.js. Adăugați această linie în partea de sus.
import ‘bootstrap/dist/css/bootstrap.css’;
Utilizarea Yarn Package Manager
Spre deosebire de npm, yarn nu este instalat implicit atunci când instalați node.js.
Instalați yard folosind această comandă;
npm install -g yarn
Această comandă va instala yarn la nivel global, astfel încât nu mai trebuie să instalați pachetul de fiecare dată când creați o aplicație React.
Rulați această comandă pentru a adăuga bootstrap la React:
yarn add bootstrap
După ce ați terminat, accesați fișierul ./src/index.js. Adăugați această linie în partea de sus.
import ‘bootstrap/dist/css/bootstrap.css’;
Ar trebui să importați întotdeauna Bootstrap în partea de sus a fișierului de intrare al aplicației, înaintea altor fișiere CSS. Acest lucru facilitează modificarea intrărilor Bootstrap dacă trebuie să modificați valorile implicite ale șabloanelor pe măsură ce vă creați aplicația React.
Metoda CDN
Folosind un link pentru Rețeaua de livrare de conținut (CDN), puteți adăuga Bootstrap la React. Adăugând acest link CDN, includeți biblioteca Bootstrap în aplicația dvs. React fără a descărca și găzdui fișierele din folderul proiectului. Urmați acești pași.
- În folderul rădăcină, navigați la fișierul .public/index.html
- Pe eticheta , adăugați această etichetă
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Trebuie să adăugați dependențe JavaScript în aplicația dvs. Accesați corpul fișierului index.html și adăugați această etichetă chiar înainte de eticheta de închidere :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap este instalat în sfârșit pe aplicația dvs. React.
Folosind pachetul React Bootstrap
Abordările pe care le-am acoperit până acum au fost concepute inițial pentru fișiere HTML. Pentru a înțelege mai bine acest lucru, luați în considerare acest cod drop-down din Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Ce este în neregulă cu codul? Bootstrap, în mod implicit, folosește clasa pentru a-și clasifica diviziunile (DIV). Cu toate acestea, React folosește JSX, care folosește sintaxa camelCase. Astfel, trebuie să înlocuiți manual clasa cu className.
Pentru ca acel cod să funcționeze pe React, trebuie să înlocuim fiecare „clasă” cu „className”. Codul final va fi:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Din fericire, mai avem două abordări, react-bootstrap și reactstrap, unde intervenția manuală nu este necesară.
React-bootstrap
React-bootstrap are componente reale React construite de la zero. Biblioteca este compatibilă cu nucleul Bootstrap.
Urmați acești pași pentru a începe cu React-bootstrap:
- Instalați React-bootstrap cu această comandă:
npm install react-bootstrap bootstrap
- Navigați la fișierul src/index.js sau App.js și adăugați această linie înaintea altor fișiere CSS
import „bootstrap/dist/css/bootstrap.min.css”;
React-bootstrap vă permite să importați o anumită componentă în loc de întreaga bibliotecă. De exemplu, dacă trebuie să importați un buton pe una dintre componentele dvs., îl puteți importa după cum urmează;
import { Button } din ‘react-bootstrap’;
Reactstrap
Aceasta este o bibliotecă de componente React pentru Bootstrap. Reactstrap se bazează pe cadrul CSS Bootstrap pentru stilurile și tema sa. Această bibliotecă importă clasele Bootstrap potrivite în aplicația dvs. React, permițându-vă să aveți un stil consecvent al aplicației. De asemenea, nu trebuie să adăugați fișierele JavaScript Bootstrap pentru a declanșa funcționalitatea.
Urmați acești pași pentru a adăuga Reactstrap la aplicația dvs. React:
- Instalați Reactstrap prin această comandă:
npm install reactstrap react react-dom
- Importă Bootstrap utilizând aceste comenzi:
npm install --save bootstrap
import „bootstrap/dist/css/bootstrap.min.css”; (adăugați această linie la app.js)
De asemenea, puteți utiliza opțiunea de legătură CDN pentru a include Bootstrap în aplicația dvs. După primul pas, mergeți la directorul rădăcină și navigați la fișierul .public/index.html și adăugați această linie la eticheta
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap vă permite să importați o anumită componentă în loc de întreaga bibliotecă. De exemplu, dacă trebuie să importați un buton pe una dintre componentele dvs., puteți importa ca;
import { Button } din ‘reactstrap’;
Concluzie
Mai sus sunt câteva abordări pe care le puteți utiliza pentru a instala Bootstrap în aplicația dvs. React pentru a vă stila aplicațiile web. Alegerea abordării instalării este o chestiune de preferință, deoarece scopul final este același.
Combinarea React cu Bootstrap vă scutește de durerea de a fi nevoit să urmăriți toate stilurile CSS pe măsură ce aplicația dvs. crește. Stilizarea aplicației dvs. devine ușoară și eficientă pe măsură ce aveți mai mult timp pentru a vă concentra pe funcționalitate.
Puteți explora câteva motive pentru a alege React Native pentru dezvoltarea aplicațiilor mobile.