Den økende populariteten av single-side-programmer i løpet av de siste årene har ført til en strøm av JavaScript-rammeverk, inkludert Kantete, Reagere, Vue.js, Glo — listen fortsetter. Som et resultat, er det ikke lenger nødvendig å bruke en DOM bibliotek, som jQuery, for å bygge web apps.
Dette har falt sammen med fremveksten av CSS rammeverk utviklet for å hjelpe utviklere å lage responsive web apps., Hvis du er en frontend-utvikler, du har nesten sikkert brukt eller i det minste hørt om Bootstrap, Foundation, og Gero, alle responsiv (mobil-først) CSS rammeverk med robuste funksjoner og innebygd verktøy. Hvis Reagere er den mest brukte JavaScript-rammeverk for å bygge web-applikasjoner, Bootstrap er den mest populære CSS-rammeverk, slår millioner av nettsteder på internett.,
I denne opplæringen vil vi vise deg hvordan du bruker Reagere og Bootstrap, hvordan å legge Bootstrap til a Reagere app, hvordan å installere Reagere Bootstrap pakker som react-bootstrap (med eksempler), og, til slutt, hvordan å lage en Reagerer app med Bootstrap.
Hvis du er bare komme i gang med disse rammene, vil jeg foreslå å tråle gjennom den offisielle Reagere og Bootstrap dokumentasjon. Jeg vil også oppfordre deg til å se den omfattende video tutorial nedenfor for å få en dypere dykk.,
Legg til i Bootstrap til å Reagere
De tre vanligste måtene å legge til Bootstrap til å Reagere app er:
- Bruk BootstrapCDN
- Importer Bootstrap i Reagerer som en avhengighet
- Installere en Reagerer Bootstrap-pakke (for eksempel
bootstrap-reactellerreactstrap)
ved Hjelp av BootstrapCDN
BootstrapCDN er den enkleste måten å legge Bootstrap til å Reagere app. Ingen installasjoner eller nedlastinger nødvendig. Enkelt sagt en <link> i <head> – delen av appen din, som vist i den følgende teksten.,
Hvis du er interessert i å bruke JavaScript komponenter som leveres med Bootstrap, må du plassere følgende <script> – kodene nær slutten av sidene, rett før den avsluttende </body> – koden for å aktivere dem.
Som du kan se, Bootstrap 4 krever jQuery og Popper.js for sin JavaScript komponenter. I over teksten vi brukt jQuery er slank versjon, men du kan bruke den fulle versjonen som godt.
For din Reagerer app, disse kodebiter vil vanligvis bli lagt til i indeksen siden av appen din., Hvis du har brukt create-react-app for å lage appen din, og deretter på public/index.html side skal se ut som følgende utdrag:
Nå kan du begynne å bruke den innebygde Bootstrap klasser og JavaScript komponenter i din Reagerer app komponenter.
Importer Bootstrap som en avhengighet
Hvis du bruker en bygge-verktøy eller en modul bundler som webpack, så dette er det foretrukne alternativet for å legge til Bootstrap til å Reagere programmet. Du må installere Bootstrap som en avhengighet for appen din.,
npm install bootstrap
Eller, hvis du bruker Garn:
yarn add bootstrap
Når du har Bootstrap er installert, kan du gå videre og ta det med i appen din oppføring JavaScript-fil. Hvis du er vant til create-react-app, bør dette være din src/index.js – filen.
legg Merke til at vi har importert Bootstrap minified CSS som den første avhengighet. Med dette, kan vi gå videre ved hjelp av den innebygde Bootstrap klasser i vår Reagerer app komponenter., Imidlertid, før du kan bruke Bootstrap er JavaScript komponenter i appen din, trenger du å installere jquery og popper.js hvis de ikke allerede er installert.
npm install jquery popper.js
Neste, vil du gjøre flere endringer til src/index.js fil for å legge til den nye avhengigheter som vist i den følgende teksten.
Her har vi lagt til import for $ og Popper. Vi har også importert Bootstrap JavaScript minified bundle-filen. Nå kan du bruke Bootstrap JavaScript komponenter i din Reagerer app.,
Installere en Reagerer Bootstrap pakken
Den tredje måten å legge til Bootstrap til a Reagere app er å bruke en pakke som har gjenreist Bootstrap komponenter utformet for å fungere som Reagerer komponenter. De to mest populære pakkene er:
react-bootstrapreactstrap
Begge pakkene er flotte valg for å bruke Bootstrap med Reagerer apps selv om du ikke nødvendigvis er påkrevd å bruke noen av dem. De har svært like egenskaper.,
ved Hjelp av innebygde Bootstrap klasser og komponenter
Du kan bruke Bootstrap direkte på elementer og komponenter i din Reagerer app ved å bruke den innebygde klasser akkurat som alle andre klasse. La oss bygge en enkel tema, switcher Reagere komponent for å demonstrere ved hjelp av Bootstrap klasser og komponenter.,
Som vist i denne demoen, vi bruker en dropdown komponent er tilgjengelig i Bootstrap til å gjennomføre vårt tema switcher. Vi vil også bruke den innebygde knappen klasser til å angi hvilken størrelse og farge på dropdown-knappen.
Vi vil gå videre til å skrive koden for våre ThemeSwitcher komponent. Sørg for at du har en Reagerer program som allerede er satt opp., Opprette en ny fil for komponenten, og legg inn følgende kodebit for det:
Her har vi bygget en veldig enkel tema, switcher komponent bygge videre på Bootstrap er dropdown komponent og et par innebygde klasser. Du kan lære mer om bruk av Bootstrap dropdown her.
Først, og vi har satt opp komponenten stat med en theme eiendom og initialisert det til null., Neste, vi definert to klikk event-handlere resetTheme() og chooseTheme() på komponent-klassen for å velge et tema og tilbakestille tema henholdsvis.
I render() metode, vi gjengi en del-knapp dropdown meny som inneholder tre temaer. nemlig: Primary, Danger, og Success. Hvert menyelement er koblet til et klikk hendelsesbehandling for den aktuelle handlingen. Legg merke til hvordan vi bruker theme.toLowerCase() for å få temaet farge klasse for både dropdown-knapper og tekst., Vi standard for å bruke secondary som tema farge hvis ingen temaet er angitt.
I dette eksemplet, vi har sett hvor lett det er å bruke Bootstrap innebygde klasser og komponenter i vår Reagerer app. Sjekk Bootstrap dokumentasjon for å lære mer om den innebygde klasser og komponenter.
react-bootstrap eksempel
Nå, vil vi gjenoppbygge vår tema-veksler med react-bootstrap. Vi vil bruke create-react-app command-line verktøy for å lage vår app. Sørg for at du har create-react-app verktøy som er installert på din maskin.,
du vil Opprette en ny Reagere app ved hjelp av create-react-app som følger:
create-react-app react-bootstrap-app
Neste, gå videre og installere avhengigheter som følger:
yarn add bootstrap@3 react-bootstrap
react-bootstrap for øyeblikket mål Bootstrap v3. Men arbeidet er aktivt pågående for å gi Bootstrap v4-støtte.
du vil Opprette en ny fil med navnet ThemeSwitcher.js i src katalog av ditt prosjekt og sett følgende innhold i det.
Her har vi prøvd å etterligne vår første eksempel så mye som mulig ved hjelp av react-bootstrap., Vi importerer to komponenter fra react-bootstrap pakken, nemlig SplitButton og MenuItem. Se react-bootstrap Dropdown dokumentasjon for å lære mer.
Først, og vi har satt opp komponenten stat med en theme eiendom og initialisert det til null. Neste, vi definerer en chooseTheme() klikk hendelsesbehandling for å velge et tema eller tilbakestille tema.
Siden vi bruker Bootstrap 3.3.,7, har vi laget noen container stiler i render() metode for å hjelpe oss med å oppnå horisontal og vertikal sentrering.
legg Merke til hvordan vi spesifiserer knappen størrelse på SplitButton komponent ved hjelp av bsSize prop. Også, legg merke til hvordan vi passerer themeClass til bsStyle prop å dynamisk endre-knappen for farge basert på statens tema.
Vi passerer tema navn til eventKey prop av hver MenuItem komponent., Vi har også sett onSelect fører til this.chooseTheme(), som vi definerte tidligere. MenuItem komponent passerer eventKey og event seg selv til onSelect behandlingsprogram som følger:
(eventKey: any, event: Object) => any
til Slutt, vi vil endre src/index.js fil til å se ut som følgende utdrag:
Her vi først importere Bootstrap er minified CSS-filer. Vi har også import vår ThemeSwitcher komponent og gjøre den til DOM.,
Hvis du kjører programmet nå med kommandoen yarn start eller npm start. Appen din skal starte på port 3000 og bør se ut som følgende demo:
react-bootstrap demo. reactstrap eksempel
Vi vil gå foran og bygge vårt tema switcher ved hjelp av reactstrap denne gangen., Vi vil bruke create-react-app command-line verktøy for å lage vår app. Sørg for at du har create-react-app verktøy som er installert på din maskin.
du vil Opprette en ny Reagere app ved hjelp av create-react-app som følger:
create-react-app reactstrap-app
Neste, gå videre og installere avhengigheter som følger:
yarn add bootstrap reactstra
du vil Opprette en ny fil med navnet ThemeSwitcher.js i src katalog av ditt prosjekt og sett følgende innhold i det:
Her har vi gjenoppbygd vårt første eksempel bruk av reactstrap., Vi importerer et par av komponenter fra reactstrap. Se reactstrap – Knappen Dropdown dokumentasjon for å lære mer.
Først, og vi har satt opp komponenten stat med to egenskaper:
-
themeeiendom initialisert tilnull -
dropdownOpeninitialisert tilfalse. Denne eiendommen vil bli brukt iButtonDropdownkomponent frareactstrapfor å opprettholde veksle tilstand av nedtrekksmenyen.,
Vi også definere en toggleDropdown() metoden for å veksle mellom åpne staten av nedtrekksmenyen. Dette vil også bli brukt i ButtonDropdown komponent.reactstrap gir også en ukontrollert komponent UncontrolledButtonDropdown som ikke krever isOpen prop eller toggle handler prop å jobbe. I de fleste tilfeller, dette kan brukes i stedet for å bruke ButtonDropdown.
Hvert element i dropdown-menyen er gjort ved hjelp av DropdownItem komponent., Legg merke til hvordan vi spesifiserer knappen størrelse på DropdownToggle komponent ved hjelp av size prop. Legg også merke til hvordan vi passerer themeClass til color prop på begge Button og DropdownToggle komponenter for å dynamisk endre-knappen for farge basert på statens tema.
Vi også sett onClick handler på hver DropdownItem akkurat som vi gjorde før, ved hjelp av chooseTheme() og resetTheme() handlere vi definerte tidligere.,
til Slutt, vil vi endre src/index.js fil til å se ut som følgende utdrag:
Her vi først importere Bootstrap minified CSS-fil. Vi har også import vår ThemeSwitcher komponent og gjøre den til DOM.
Hvis du kjører programmet nå med kommandoen yarn start eller npm start., Appen din skal starte på port 3000 og bør se ut som følgende demo:
Opprett et Reagere app med Bootstrap
La oss presse dette litt lenger for å lage en app med litt mer detaljer. Vi vil prøve å bruke så mye Bootstrap klasser og komponenter som mulig. Vi vil også bruke reactstrap for å integrere Bootstrap med Reagere, siden den støtter Bootstrap 4.,
Vi vil bruke create-react-app command-line verktøy for å lage vår app. Sørg for at du har create-react-app verktøy som er installert på din maskin. Her er et skjermbilde av hva vi vil lage.,
du vil Opprette en ny Reagere app ved hjelp av create-react-app som følger:
create-react-app sample-app
Neste, gå videre og installere avhengigheter som følger:
yarn add axios bootstrap reactstrap
legg her Merke til at vi installerer axios som en avhengighet. Axios er et løfte-basert HTTP-klient for leseren og Node.js. Det vil gjøre oss i stand til å hente innlegg fra BaconIpsum JSON API.,
Lag en liten modifikasjon til src/index.js filen du vil inkludere Bootstrap minified CSS-fil. Det skal se ut som følgende utdrag:
Opprett en ny mappe som heter components i src katalog av ditt prosjekt. Opprette en ny fil, Header.js, i nettopp opprettet components katalog med følgende innhold:
Den komponenten som vi akkurat har opprettet, under denne kodebiten Header komponent som inneholder menyen., Neste, vi vil opprette en ny fil med navnet SideCard.js i components katalog med følgende innhold:
Neste, opprettes det en ny fil som heter Post.js i components – katalogen, og legg inn følgende kodebit til det:
Her har vi laget en Post komponent som gjør et innlegg på siden. Vi initialisere staten av-komponent med en post eiendommen satt til null., Når komponenten fester, bruker vi axios for å hente et random innlegg av fire avsnitt fra BaconIpsum JSON API og oppdater post eiendom i staten.
til Slutt, må du endre src/App.js fil til å se ut som følgende utdrag:
Her har vi bare ta med Header, SideCard, og Post komponenter i App komponent. Legg merke til hvordan vi bruker et par av responsive utility klasser gitt av Bootstrap til å tilpasse seg vår app til ulike skjermstørrelser.,
Hvis du kjører programmet nå med kommandoen yarn start eller npm start, din app skal starte på port 3000 og bør se ut akkurat som den skjermbilde vi så tidligere.
Konklusjon
I denne opplæringen, vi utforsket et par forskjellige måter som vi kan integrere Bootstrap med våre Reagerer apps. Vi har også sett hvordan vi kan bruke to av de mest populære Reagere Bootstrap biblioteker, nemlig react-bootstrap og reactstrap.,
Vi har bare brukt et par Bootstrap komponenter i denne opplæringen, for eksempel varsling, skilt, dropdown, navbar, nav, form, knappen, kort, etc. Det er fortsatt et par Bootstrap komponenter du kan eksperimentere med, for eksempel tabeller, modals, verktøytips, karusell, jumbotron, paginering, faner, etc.
Du kan se i dokumentasjonen av pakkene vi har brukt i denne opplæringen for å finne ut mer om hvordan de kan brukes. Kildekoden for alle demo-apps i denne opplæringen kan bli funnet på GitHub.,
Full innsikt i produksjon Reagere apps
Feilsøking Reagere programmer kan være vanskelig, spesielt når brukere opplever problemer som er vanskelige å reprodusere. Hvis du er interessert i overvåking og sporing Redux staten, automatisk overflatebehandling JavaScript-feil, og sporing tregt nettverk forespørsler komponent og legg i tid, kan du prøve LogRocket. 
LogRocket er som en DVR for web-applikasjoner, innspilling bokstavelig talt alt som skjer på din Reagerer app., I stedet for å gjette hvorfor problemer skje, kan du samlede og rapport om hva staten søknaden ble i når et problem har oppstått. LogRocket overvåker også appens ytelse, rapportering med beregninger som klient CPU-belastning, klient bruk av minne, og mer.
LogRocket Redux mellomvare pakken legger til et ekstra lag med synlighet i bruker-økter. LogRocket logger alle handlinger og staten fra Redux butikker.
Modernisere hvordan du feilsøker din Reagerer apps — start overvåking for gratis.