den stigende popularitet af enkeltsidede applikationer i de sidste par år har ført til en tilstrømning af JavaScript-rammer, herunder Angular, React, vue.js, Ember-listen fortsætter. Som et resultat er det ikke længere nødvendigt at bruge et DOM-bibliotek, såsom j .uery, til at opbygge webebapps.dette er faldet sammen med fremkomsten af CSS-rammer designet til at hjælpe udviklere med at opbygge responsive webebapps., Hvis du er en frontend-udvikler, har du næsten helt sikkert brugt eller i det mindste hørt om Bootstrap, Foundation og Bulma, alle responsive (mobile-first) CSS-rammer med robuste funktioner og indbyggede værktøjer. Hvis React er den mest anvendte JavaScript-ramme til opbygning af webebapplikationer, er Bootstrap den mest populære CSS-ramme, der driver millioner af websebsteder på internettet.,
i denne tutorial viser vi dig, hvordan du bruger React og Bootstrap, hvordan du tilføjer Bootstrap til en React-app, hvordan du installerer React Bootstrap-pakker som react-bootstrap (med eksempler), og til sidst, hvordan du opretter en React-app med Bootstrap.
Hvis du lige er kommet i gang med disse rammer, vil jeg foreslå at skimme gennem den officielle React og Bootstrap dokumentation. Jeg vil også opfordre dig til at se den omfattende videotutorial nedenfor for et dybere dyk.,
Tilføj Bootstrap til at Reagere
De tre mest almindelige måder at tilføje Bootstrap til din Reagere app er:
- Brug BootstrapCDN
- Import Bootstrap i at Reagere som en afhængighed
- Installer en Reagere Bootstrap-pakke (som f.eks.
bootstrap-reactellerreactstrap)
Brug BootstrapCDN
BootstrapCDN er den nemmeste måde at tilføje Bootstrap til din Reagere app. Ingen installationer eller Do .nloads kræves. Du skal blot sætte en <link> i <head> sektion af din app, som vist i følgende uddrag.,
Hvis du er interesseret i at bruge JavaScript-komponenter, der leveres med Bootstrap, er du nødt til at placere følgende <script> tags nær slutningen af dine sider, lige før det afsluttende </body> – tag ‘ et for at aktivere dem.
som du kan se, Bootstrap 4 kræver j .uery og Popper.js for sine JavaScript-komponenter. I ovenstående uddrag brugte vi j .uerys slanke version, selvom du også kan bruge den fulde version.
for din React-app tilføjes disse kodestykker normalt til indekssiden i din app., Hvis du brugte create-react-app til at oprette din app, skal din public/index.html-side se ud som følgende uddrag:
nu kan du begynde at bruge de indbyggede Bootstrap-klasser og JavaScript-komponenter i dine React-appkomponenter.
Import Bootstrap som en afhængighed
Hvis du bruger et byggeværktøj eller en modulbundter som weebpack, er dette den foretrukne mulighed for at tilføje Bootstrap til din React-applikation. Du skal installere Bootstrap som en afhængighed for din app.,
npm install bootstrap
Eller hvis du bruger Garn:
yarn add bootstrap
Når du har Bootstrap installeret, gå videre og inkludere det i din app ‘ s indlæg JavaScript-fil. Hvis du er vant til create-react-app, skal dette være din src/index.js fil.bemærk, at vi har importeret Bootstrap minified CSS som den første afhængighed. Med dette kan vi gå videre ved hjælp af de indbyggede Bootstrap-klasser i vores React-appkomponenter., Men, før du kan bruge Bootstrap ‘ s JavaScript komponenter i din app, er du nødt til at installere jquery og popper.js hvis de ikke allerede er installeret.
npm install jquery popper.js
derefter foretager du yderligere ændringer af src/index.js filen for at tilføje de nye afhængigheder som vist i følgende uddrag.
Her tilføjede vi import for $ og Popper. Vi importerede også Bootstrap JavaScript minified bundle-filen. Nu kan du bruge Bootstrap JavaScript-komponenter i din React-app.,
installer en React Bootstrap-pakke
den tredje måde at tilføje Bootstrap til en React-app er at bruge en pakke, der har genopbygget Bootstrap-komponenter designet til at fungere som React-komponenter. De to mest populære pakker er:
react-bootstrapreactstrap
begge pakker er gode valg til brug af Bootstrap med React-apps, selvom du ikke nødvendigvis er forpligtet til at bruge nogen af dem. De deler meget lignende egenskaber.,
brug af indbyggede Bootstrap-klasser og komponenter
Du kan bruge Bootstrap direkte på elementer og komponenter i din React-app ved at anvende de indbyggede klasser ligesom enhver anden klasse. Lad os bygge en simpel tema s .itcher React komponent til at demonstrere ved hjælp af Bootstrap klasser og komponenter.,
Som vist i denne demo, vi er ved hjælp af en dropdown-komponent til rådighed i Bootstrap til at gennemføre vores tema skifter. Vi bruger også de indbyggede knapklasser til at indstille størrelsen og farven på rullemenuen.
Vi vil fortsætte med at skrive koden til vores themes .itcher-komponent. Sørg for, at du allerede har en React-applikation., Oprette en ny fil for den komponent, og tilføj følgende kode stump til det:
Her har vi bygget en meget simpel tema skifter komponent udnytte på Bootstrap ‘ s dropdown-komponent og et par indbyggede klasser. Du kan lære mere om at bruge Bootstrap dropdo .n her.
først opretter vi komponentens tilstand med en themeejendom og initialiserede den til null., Dernæst definerede vi to klikhændelseshåndterere resetTheme() og chooseTheme() på komponentklassen for at vælge henholdsvis et tema og nulstille temaet.
i render() – metoden gengiver vi en rullemenu med split-knap, der indeholder tre temaer. nemlig: Primary, Danger, og Success. Hvert menupunkt er knyttet til et klik hændelseshandler for den relevante handling. Bemærk, hvordan vi bruger theme.toLowerCase() for at få temafarveklassen til både rullemenuerne og teksten., Vi bruger som standard secondary som Temafarve, hvis der ikke er angivet noget tema.i dette eksempel har vi set, hvor nemt det er at bruge bootstraps indbyggede klasser og komponenter i vores React-app. Kontroller Bootstrap-dokumentationen for at lære mere om de indbyggede klasser og komponenter.
react-bootstrap eksempel
nu vil vi genopbygge vores temaveksler ved hjælp af react-bootstrap. Vi bruger kommandolinjeværktøjet create-react-app til at oprette vores app. Sørg for, at værktøjet create-react-app er installeret på din maskine.,
Opret en ny React-app ved hjælp af create-react-app som følger:
create-react-app react-bootstrap-app
gå derefter videre og installer afhængighederne som følger:
yarn add bootstrap@3 react-bootstrap
react-bootstrap er i øjeblikket mål Bootstrap v3. Arbejdet er dog aktivt i gang med at levere Bootstrap v4-support.
Opret en ny fil med navnetThemeSwitcher.jsi mappensrc for dit projekt, og læg følgende indhold i det.
Her har vi forsøgt at efterligne vores første eksempel så meget som muligt ved hjælp af react-bootstrap., Vi importerer to komponenter fra react-bootstrap pakke, nemlig SplitButton og MenuItem. Se react-bootstrap Dropdo .n dokumentation for at lære mere.
først opretter vi komponentens tilstand med en themeejendom og initialiserede den til null. Dernæst definerer vi en chooseTheme() klik på begivenhedshåndterer for at vælge et tema eller nulstille temaet.
da vi bruger Bootstrap 3.3.,7, skabte vi nogle containerformater i render() metoden for at hjælpe os med at opnå vandret og lodret Centrering.
bemærk, hvordan vi specificerer knapstørrelsen på komponentenSplitButtonved hjælp afbsSize prop. Bemærk også, hvordan vi overfører themeClass til bsStyle prop for dynamisk at ændre knapfarven baseret på statens tema.
Vi passerer temaet navn til eventKey prop af hver MenuItem komponent., Vi indstiller ogsåonSelect handler tilthis.chooseTheme(), som vi definerede tidligere. Komponenten MenuItem overfører eventKey og event selv til onSelect handler som følger:
(eventKey: any, event: Object) => any
endelig, vil vi ændre src/index.js fil for at ligne følgende uddrag:
Her importerer vi først bootstraps minificerede CSS-filer. Vi importerer også vores ThemeSwitcher komponent og gør det til DOM.,
Hvis du kører appen nu med kommandoen yarn start eller npm start. Din app skal starte på port 3000 og skal se ud som følgende demo:
react-bootstrap demo. reactstrap eksempel
Vi vil gå videre og genopbygge vores tema skifter ved hjælp af reactstrap denne gang., Vi bruger kommandolinjeværktøjet create-react-app til at oprette vores app. Sørg for, at værktøjet create-react-app er installeret på din maskine.
Opret en ny React-app ved hjælp afcreate-react-app som følger:
create-react-app reactstrap-app
gå derefter videre og installer afhængighederne som følger:
yarn add bootstrap reactstra
Opret en ny fil med navnetThemeSwitcher.js isrc – biblioteket for dit projekt og læg følgende indhold i det:
Her har vi genopbygget vores første eksempel ved hjælp afreactstrap., Vi importerer et par komponenter fra reactstrap. Se reactstrap knap Dropdo .n dokumentation for at lære mere.
for det Første, har vi nedsat komponent-stat med to egenskaber:
-
themeejendom initialiseres tilnull -
dropdownOpeninitialiseres tilfalse. Denne egenskab vil blive brugt iButtonDropdownkomponenten frareactstrapfor at opretholde rullemenuens skiftetilstand.,
Vi definerer også en toggleDropdown() metode til at skifte rullemenuens åbne tilstand. Dette vil også blive brugt i komponenten ButtonDropdown.reactstrap giver også en ukontrolleret komponent UncontrolledButtonDropdown, der ikke kræver isOpen prop eller toggle handler prop til at arbejde. I de fleste tilfælde kan dette bruges i stedet for at bruge ButtonDropdown.
hvert element i rullemenuen gengives ved hjælp af komponenten DropdownItem., Bemærk, hvordan vi angiver knapstørrelsen på DropdownToggle – komponenten ved hjælp af size prop. Bemærk også, hvordan vi passerer themeClass til color prop på både Button og DropdownToggle komponenter til dynamisk at ændre på knappen farve er baseret på den aktuelle tema.
vi indstiller også onClickhandler på hver DropdownItemligesom vi gjorde før, ved hjælp af chooseTheme()og resetTheme() handlere, vi definerede tidligere.,
endelig vil vi ændre src/index.js fil for at ligne følgende uddrag:
Her importerer vi først Bootstrap minified CSS-filen. Vi importerer også vores ThemeSwitcher komponent og gør det til DOM.
Hvis du kører appen nu med kommandoen yarn start eller npm start., Din app skal starte på port 3000 og skal se ud som følgende demo:
Opret en Reagere app med Bootstrap
Lad os skubbe det en smule længere til at skabe et app-med nogle flere detaljer. Vi vil forsøge at bruge så mange Bootstrap klasser og komponenter som muligt. Vi vil også bruge reactstrap til at integrere Bootstrap med React, da det understøtter Bootstrap 4.,
Vi bruger kommandolinjeværktøjet create-react-app til at oprette vores app. Sørg for, at værktøjet create-react-app er installeret på din maskine. Her er et skærmbillede af, hvad vi vil skabe.,
Opret en ny react-app ved hjælp af create-react-app som følger:
create-react-app sample-app
gå derefter videre og installer afhængighederne som følger:
yarn add axios bootstrap reactstrap
Bemærk her, at vi installerer axios som en afhængighed. A .ios er et løfte-baseret HTTP-klient til bro .seren og Node.js. Det vil gøre det muligt for os at hente indlæg fra BaconIpsum JSON API.,
lav en lille ændring af src/index.js filen for at inkludere Bootstrap minified CSS-filen. Det skal se ud som følgende uddrag:
Opret en ny mappe med navnetcomponentsisrc bibliotek for dit projekt. Oprette en ny fil, Header.js, i den netop oprettede components mappe med følgende indhold:
Den komponent, vi lige har oprettet, i dette uddrag er Header komponent, der indeholder navigation menu., Næste, vi vil oprette en ny fil med navnet SideCard.js components mappe med følgende indhold:
Næste, kan du oprette en ny fil med navnet Post.js components bibliotek, og tilføj følgende kode stump til det:
Her har vi oprettet en Post element, der gør, at et indlæg på siden. Vi initialiserer komponentens tilstand med enpost ejendom indstillet til null., Når komponent-mounts, vi bruger axios for at hente en tilfældig post af fire afsnit fra BaconIpsum JSON API og opdatere post ejendom i staten.
til sidst skal du ændresrc/App.js filen for at ligne følgende uddrag:
Her inkluderer vi blotHeader,SideCardogPostkomponenter iApp komponent. Bemærk, hvordan vi bruger et par responsive hjælpeklasser leveret af Bootstrap til at tilpasse vores app til forskellige skærmstørrelser.,
Hvis du kører appen nu med kommandoen yarn start eller npm start, skal din app starte på port 3000 og skal se nøjagtigt ud som det skærmbillede, vi så tidligere.
konklusion
i denne tutorial udforskede vi et par forskellige måder, hvorpå vi kan integrere Bootstrap med vores React-apps. Vi har også set, hvordan vi kan bruge to af de mest populære Reagere Bootstrap biblioteker, nemlig react-bootstrap og reactstrap.,
Vi har kun brugt et par Bootstrap-komponenter i denne tutorial, såsom alarm, badge, dropdo .n, navbar, nav, form, knap, kort osv. Der er stadig et par Bootstrap-komponenter, du kan eksperimentere med, såsom tabeller, modaler, værktøjstips, karrusel, jumbotron, pagination, Faner osv.
Du kan tjekke dokumentationen for de pakker, vi brugte i denne vejledning, for at finde ud af flere måder, de kan bruges på. Kildekoden til alle demo apps i denne tutorial kan findes på GitHub.,
fuld synlighed i produktion React apps
Debugging React applikationer kan være svært, især når brugerne oplever problemer, der er vanskelige at reproducere. Hvis du er interesseret i at overvåge og spore Redu. – tilstand, automatisk overflade JavaScript-fejl og spore langsomme netværksanmodninger og komponentbelastningstid, kan du prøve LogRocket. 
LogRocket er som en DVR for web-apps, optagelse bogstaveligt talt alt, hvad der sker på din Reagere app., I stedet for at gætte, hvorfor der opstår problemer, kan du samle og rapportere om, hvilken tilstand din ansøgning var i, da et problem opstod. LogRocket overvåger også din apps ydeevne, rapportering med målinger som klient CPU-belastning, klienthukommelsesbrug og meget mere.
logrocket Redu.Middle .are-pakken tilføjer et ekstra lag synlighed i dine brugersessioner. LogRocket logger alle handlinger og tilstand fra dine Redu.stores. modernisere, hvordan du debugger dine React — apps-start Overvågning Gratis.