popularitatea crescândă a aplicațiilor cu o singură pagină în ultimii ani a dus la un aflux de cadre JavaScript, inclusiv Angular, React, Vue.js, Ember-lista poate continua. Drept urmare, nu mai este necesar să folosiți o bibliotecă DOM, cum ar fi jQuery, pentru a construi aplicații web.acest lucru a coincis cu apariția cadrelor CSS concepute pentru a ajuta dezvoltatorii să construiască aplicații web receptive., Dacă sunteți dezvoltator de frontend, aproape sigur ați folosit sau cel puțin ați auzit despre Bootstrap, Foundation și Bulma, toate cadrele CSS receptive (mobile-first) cu caracteristici robuste și utilități încorporate. Dacă React este cel mai folosit Framework JavaScript pentru construirea aplicațiilor web, Bootstrap este cel mai popular framework CSS, alimentând milioane de site-uri de pe internet.,
în acest tutorial, vă vom arăta cum să utilizați React și Bootstrap, cum să adăugați Bootstrap la o aplicație React, cum să instalați pachete React Bootstrap, cum ar fi react-bootstrap (cu exemple) și, în final, cum să creați o aplicație React cu Bootstrap.
dacă tocmai ați început cu aceste cadre, aș sugera skimming prin documentația oficială React și Bootstrap. De asemenea, vă încurajez să vizionați tutorialul video cuprinzător de mai jos pentru o scufundare mai profundă.,
Adăugare Bootstrap pentru a Reacționa
trei dintre Cele mai comune modalități de a adăuga Bootstrap pentru a-ți Reacționa aplicație sunt:
- Utilizarea BootstrapCDN
- Import Bootstrap în Reacționa ca o dependență
- Instala un Reacționa Bootstrap pachet (cum ar fi
bootstrap-reactsaureactstrap)
Utilizarea BootstrapCDN
BootstrapCDN este cel mai simplu mod de a adăuga Bootstrap pentru a-ți Reacționa app. Nu instalări sau descărcări necesare. Pur și simplu pune un <link> în <head> secțiune a aplicației, așa cum se arată în următorul fragment.,
Dacă sunteți interesat în folosind JavaScript componente care nava cu Bootstrap, aveți nevoie pentru a plasa următoarele <script> tag-uri aproape de sfârșitul de pagini, chiar înainte de închidere </body> tag-ul, pentru a le permite.după cum puteți vedea, Bootstrap 4 necesită jQuery și Popper.js pentru componentele sale JavaScript. În fragmentul de mai sus, am folosit versiunea subțire a lui jQuery, deși puteți utiliza și versiunea completă.pentru aplicația React, aceste fragmente de cod vor fi de obicei adăugate la pagina de index a aplicației., Dacă ați utilizat create-react-app pentru a crea aplicația, apoi public/index.html pagina ar trebui să arate ca următorul fragment:
Acum puteți începe să utilizați construit în Bootstrap clase și componente JavaScript în Reacționa componentele aplicației.
importă Bootstrap ca dependență
dacă folosești un instrument de construire sau un pachet de module, cum ar fi webpack, atunci aceasta este opțiunea preferată pentru adăugarea Bootstrap în aplicația React. Va trebui să instalați Bootstrap ca dependență pentru aplicația dvs.,
npm install bootstrap
Sau dacă utilizați Fire:
yarn add bootstrap
după ce ați Bootstrap instalat, du-te și-l includă în aplicația dvs. de intrare fișier JavaScript. Dacă sunteți obișnuit cucreate-react-app, acesta ar trebui să fie fișierulsrc/index.js.
observați că am importat Bootstrap minified CSS ca prima dependență. Cu aceasta, putem merge mai departe folosind clasele Bootstrap încorporate în componentele aplicației React., Cu toate acestea, înainte de a putea folosi Bootstrap JavaScript componente în aplicația, veți avea nevoie pentru a instala jquery și popper.js dacă acestea nu sunt deja instalate.
npm install jquery popper.js
apoi, va face modificări suplimentare la src/index.js fișier pentru a adăuga noi dependențe așa cum se arată în următorul fragment.
aici am adăugat importuri pentru $ și Popper. De asemenea, am importat fișierul Bootstrap JavaScript minified bundle. Acum poți folosi componente JavaScript Bootstrap în aplicația React.,
instalați un pachet React Bootstrap
al treilea mod de a adăuga Bootstrap la o aplicație React este să utilizați un pachet care a reconstruit componentele Bootstrap proiectate să funcționeze ca componente React. Două dintre cele mai populare pachete sunt:
react-bootstrapreactstrap
Ambele pachete sunt alegeri foarte bune pentru utilizarea Bootstrap cu Reacționa aplicații deși nu sunt neapărat necesare pentru a utiliza oricare dintre ele. Ele au caracteristici foarte similare.,
folosind clasele și componentele Bootstrap încorporate
puteți utiliza Bootstrap direct pe elementele și componentele din aplicația React aplicând clasele încorporate la fel ca orice altă clasă. Haideți să construim o componentă react simplă pentru a demonstra utilizarea claselor și componentelor Bootstrap.,
după Cum se arată în acest demo, suntem folosind o componenta verticală disponibil în Bootstrap pentru a pune în aplicare tema switcher. De asemenea, folosim clasele de butoane încorporate pentru a seta dimensiunea și culoarea butonului derulant.
vom merge mai departe pentru a scrie codul pentru componenta noastră ThemeSwitcher. Asigurați-vă că aveți o aplicație React deja configurată., Creați un fișier nou pentru componentă și adăugați următorul fragment de cod la acesta:
aici am construit o componentă de comutare a temelor foarte simplă, folosind componenta derulantă Bootstrap și câteva clase încorporate. Puteți afla mai multe despre utilizarea drop-down Bootstrap aici.
Mai întâi, am configurat starea componentei cu o proprietate theme și am inițializat-o la null., Apoi, am definit două click event handlers resetTheme() și chooseTheme() pe componenta de clasă pentru a alege o temă și resetarea tema respectiv.
în metoda render(), redăm un meniu derulant pentru butonul split care conține trei teme. și anume: Primary, Danger și Success. Fiecare element de meniu este atașat la un handler eveniment clic pentru acțiunea corespunzătoare. Observați cum folosim theme.toLowerCase() pentru a obține clasa de culori a temei atât pentru butoanele derulante, cât și pentru text., În mod implicit, folosim secondary ca culoare a temei dacă nu este setată nicio temă.
în acest exemplu, am văzut cât de ușor este să folosești clasele și componentele încorporate ale Bootstrap în aplicația noastră React. Verificați documentația Bootstrap pentru a afla mai multe despre clasele și componentele încorporate.
react-bootstrap exemplu
Acum, vom reconstrui tema switcher folosind react-bootstrap. Vom folosi instrumentul de linie de comandă create-react-app pentru a crea aplicația noastră. Asigurați-vă că aveți instrumentul create-react-app instalat pe aparat.,
de a Crea un nou Reacționa aplicația folosind create-react-app după cum urmează:
create-react-app react-bootstrap-app
apoi, du-te mai departe și a instala dependențe după cum urmează:
yarn add bootstrap@3 react-bootstrap
react-bootstrap – ului privat în obiective Bootstrap v3. Cu toate acestea, se lucrează activ pentru a oferi suport Bootstrap v4.
de a Crea un nou fișier numit ThemeSwitcher.js în src director de proiect și a pus următorul conținut în ea.
aici am încercat să imităm exemplul nostru inițial cât mai mult posibil folosind react-bootstrap., Noi de import a două componente din react-bootstrap pachet, și anume SplitButton și MenuItem. Consultați documentația derulantă react-bootstrap pentru a afla mai multe.
Mai întâi, am configurat starea componentei cu o proprietate theme și am inițializat-o la null. Apoi, definim unchooseTheme() faceți clic pe event handler pentru a alege o temă sau resetarea temei.
deoarece folosim Bootstrap 3.3.,7, am creat câteva stiluri de containere în metoda render() pentru a ne ajuta să realizăm centrarea orizontală și verticală.
observați cum specificăm Dimensiunea butonului de pe componenta SplitButtonfolosind bsSize prop. De asemenea, observați cum trecem themeClass la bsStyle prop pentru a schimba dinamic culoarea butonului în funcție de tema statului.
trecem numele temei la eventKeyprop de fiecare MenuItem componentă., De asemenea, am setat onSelect handler la this.chooseTheme(), pe care l-am definit mai devreme. MenuItem componenta trece eventKey și event sine la onSelect handler, după cum urmează:
(eventKey: any, event: Object) => any
în cele din Urmă, vom modifica src/index.js fișier să arate ca următorul fragment:
Aici, am primul import Bootstrap CSS minified fișiere. De asemenea, importăm componenta ThemeSwitcher și o redăm în DOM.,
dacă rulați aplicația acum cu comanda yarn startsau . Aplicația ar trebui să înceapă pe port 3000 și ar trebui să arate în felul următor demo:
react-bootstrap demo. reactstrap exemplu
Vom merge mai departe și de a reconstrui tema noastră de comutare folosind reactstrap de data asta., Vom folosi instrumentul de linie de comandă create-react-app pentru a crea aplicația noastră. Asigurați-vă că aveți instrumentul create-react-app instalat pe aparat.
de a Crea un nou Reacționa aplicația folosind create-react-app după cum urmează:
create-react-app reactstrap-app
apoi, du-te mai departe și a instala dependențe după cum urmează:
yarn add bootstrap reactstra
de a Crea un nou fișier numit ThemeSwitcher.js în src director de proiect și a pus următorul continut:
Aici avem de reconstruit noastră inițială, de exemplu folosind reactstrap., Importăm câteva componente din reactstrap. Consultați documentația derulantă a butonului reactstrap pentru a afla mai multe.
în Primul rând, ne-am stabilit componenta stat cu două proprietăți:
-
themeproprietate inițializat lanull -
dropdownOpeninițializat lafalse. Această proprietate va fi folosit înButtonDropdowncomponenta dinreactstrappentru a menține comuta starea vertical.,
de asemenea, definim o metodătoggleDropdown() pentru a comuta starea deschisă a derulantului. Acest lucru va fi, de asemenea, utilizat în componenta ButtonDropdown.reactstrap oferă, de asemenea, necontrolată component UncontrolledButtonDropdown care nu are nevoie de isOpen prop sau toggle handler propunerii de a lucra. În cele mai multe cazuri, acest lucru poate fi utilizat în loc să utilizați ButtonDropdown.
fiecare element din meniul derulant este redat folosind componentaDropdownItem., Observați cum ne specifica dimensiunea buton pe DropdownToggle componenta folosind size prop. De asemenea, observați cum suntem in trecere themeClass la color prop pe ambele Button și DropdownToggle componente pentru a modifica dinamic butonul de culoare bazat pe statul tema.
de asemenea, Am stabilit onClick handler pe fiecare DropdownItem așa cum am făcut-o înainte, folosind chooseTheme() și resetTheme() stivuitoare am definit mai devreme.,
în cele din urmă, vom modifica src/index.js fișier pentru a arăta ca următorul fragment:
aici, mai întâi importăm fișierul CSS minified Bootstrap. De asemenea, importăm componenta ThemeSwitcher și o redăm în DOM.
dacă rulați aplicația acum cu comanda yarn startsau ., Aplicația ar trebui să înceapă pe port 3000 și ar trebui să arate în felul următor demo:
de a Crea un Reacționa app cu Bootstrap
Să trecem un pic mai mult pentru a crea o aplicație cu mai multe detalii. Vom încerca să folosim cât mai multe clase și componente Bootstrap. De asemenea, vom folosi reactstrap pentru integrarea Bootstrap cu React, deoarece suportă Bootstrap 4.,
vom folosi instrumentul de linie de comandă create-react-app pentru a crea aplicația noastră. Asigurați-vă că aveți instrumentul create-react-app instalat pe aparat. Iată o captură de ecran a ceea ce vom crea.,
de a Crea un nou Reacționa aplicația folosind create-react-app după cum urmează:
create-react-app sample-app
apoi, du-te mai departe și a instala dependențe după cum urmează:
yarn add axios bootstrap reactstrap
Observați că aici vom instala axios ca o dependență. Axios este un client HTTP bazat pe promisiuni pentru browser și nod.J. S. Ne va permite să preluăm postări din API-ul BaconIpsum JSON.,
faceți o mică modificare la fișierul src/index.js pentru a include fișierul CSS minimizat Bootstrap. Acesta ar trebui să arate ca următorul fragment:
de a Crea un nou director numit components în src director de proiect. Creați un fișier nou, Header.js, în doar creat components directorul cu următorul conținut:
componenta ne-am creat în acest fragment este Header componenta care conține meniul de navigare., Apoi, vom crea un nou fisier numit SideCard.js în components directorul cu următorul conținut:
apoi, creați un nou fișier numit Post.js în components director și se adaugă următorul fragment de cod pentru ea:
Aici am creat un Post componenta care face un post pe pagina. Inițializăm starea componentei cu o proprietatepost setată lanull., Când componenta monteaza, vom folosi axios pentru a aduce un mesaj aleator din patru paragrafe din BaconIpsum JSON API și actualizarea post proprietăți în stat.
în cele din Urmă, modifica src/App.js fișier să arate ca următorul fragment:
Aici pur și simplu include Header, SideCard și Post componente în App componenta. Observați cum folosim câteva clase de utilități receptive furnizate de Bootstrap pentru a adapta aplicația noastră la diferite dimensiuni de ecran.,
Dacă tu a alerga aplicația acum cu comanda yarn start sau npm start, aplicația ar trebui să înceapă pe portul 3000 și ar trebui să arate exact ca screenshot-am văzut mai devreme.
concluzie
În acest tutorial, am explorat câteva moduri diferite în care putem integra Bootstrap cu aplicațiile noastre React. Am văzut de asemenea cum putem folosi două dintre cele mai populare Reacționa Bootstrap biblioteci, și anume react-bootstrap și reactstrap.,
am folosit doar câteva componente Bootstrap în acest tutorial, cum ar fi alert, badge, dropdown, navbar, nav, form, button, card, etc. Există încă câteva componente Bootstrap cu care puteți experimenta, cum ar fi tabele, modale, sfaturi de instrumente, carusel, jumbotron, paginare, file etc.puteți verifica documentația pachetelor pe care le-am folosit în acest tutorial pentru a afla mai multe modalități prin care pot fi utilizate. Codul sursă pentru toate aplicațiile demo din acest tutorial poate fi găsit pe GitHub.,
vizibilitate completă în producție React apps
depanarea aplicațiilor React poate fi dificilă, mai ales atunci când utilizatorii întâmpină probleme dificil de reprodus. Dacă sunteți interesat de monitorizarea și urmărirea stării Redux, de apariția automată a erorilor JavaScript și de urmărirea cererilor lente de rețea și a timpului de încărcare a componentelor, încercați LogRocket. 
LogRocket este ca un DVR pentru aplicații web, înregistrare literalmente tot ce se întâmplă pe Reacționa app., În loc să ghiciți de ce se întâmplă probleme, puteți agrega și raporta în ce stare se afla aplicația dvs. atunci când a apărut o problemă. LogRocket monitorizează, de asemenea, performanța aplicației dvs., raportând cu valori precum încărcarea procesorului client, utilizarea memoriei client și multe altele.
pachetul middleware Logrocket Redux adaugă un strat suplimentar de vizibilitate în sesiunile de utilizator. Logrocket înregistrează toate acțiunile și starea din magazinele dvs. modernizați modul în care depanați aplicațiile React — începeți monitorizarea gratuit.