den ökande populariteten för ensidiga applikationer under de senaste åren har lett till en tillströmning av JavaScript-ramar, inklusive vinkel, React, Vue.JS, Ember — listan fortsätter. Som ett resultat är det inte längre nödvändigt att använda ett DOM-bibliotek, till exempel jQuery, för att bygga webbappar.
detta har sammanfallit med uppkomsten av CSS-ramar som är utformade för att hjälpa utvecklare att bygga responsiva webbappar., Om du är en frontend-utvecklare har du nästan säkert använt eller åtminstone hört talas om Bootstrap, Foundation och Bulma, alla responsiva (mobila) CSS-ramar med robusta funktioner och inbyggda verktyg. Om React är den mest använda JavaScript-ramen för att bygga webbapplikationer, är Bootstrap den mest populära CSS-ramen, som driver miljontals webbplatser på internet.,
i den här handledningen visar vi hur du använder React och Bootstrap, hur man lägger till Bootstrap till en React-app, hur man installerar React Bootstrap-paket som react-bootstrap (med exempel) och slutligen hur man skapar en React-app med Bootstrap.
om du just har börjat med dessa ramar, föreslår jag att du skummar igenom den officiella React-och Bootstrap-dokumentationen. Jag skulle också uppmuntra dig att titta på den omfattande video tutorial nedan för en djupare dyk.,
Lägg till Bootstrap för att reagera
de tre vanligaste sätten att lägga till Bootstrap till din React-app är:
- använd BootstrapCDN
- importera Bootstrap i React som ett beroende
- installera ett React Bootstrap-paket (till exempel
bootstrap-reactellerreactstrap)
använda Bootstrapcdn
bootstrapcdn är det enklaste sättet att lägga till Bootstrap till din react app. Inga installationer eller nedladdningar krävs. Enkelt uttryckt en<link> I avsnittet<head> I din app, som visas i följande utdrag.,
om du är intresserad av att använda JavaScript-komponenter som levereras med Bootstrap måste du placera följande <script> – taggar nära slutet av dina sidor, precis innan du stänger </body> – taggen för att aktivera dem.
som du kan se kräver Bootstrap 4 jQuery och Popper.js för dess JavaScript-komponenter. I ovanstående utdrag använde vi jquerys smala version, även om du också kan använda den fullständiga versionen.
för din React-app läggs kodavsnitten vanligtvis till på appens indexsida., Om du använde create-react-app för att skapa din app bör sidan public/index.html se ut som följande utdrag:
Nu kan du börja använda de inbyggda Bootstrap-klasserna och JavaScript-komponenterna i dina React-appkomponenter.
importera Bootstrap som ett beroende
om du använder ett byggverktyg eller en modul bundler som webpack, är detta det föredragna alternativet för att lägga till Bootstrap till din React-applikation. Du måste installera Bootstrap som ett beroende för din app.,
npm install bootstrap
eller om du använder garn:
yarn add bootstrap
När du har installerat Bootstrap, fortsätt och inkludera det i appens JavaScript-fil. Om du är van vid create-react-app ska detta vara din src/index.js – fil.
Observera att vi har importerat Bootstrap minified CSS som det första beroendet. Med detta kan vi fortsätta med de inbyggda Bootstrap-klasserna i våra React-appkomponenter., Innan du kan använda JavaScript-komponenter för Bootstrap i appen måste du installera jquery ochpopper.js om de inte redan är installerade.
npm install jquery popper.js
därefter kommer du att göra ytterligare ändringar i filen src/index.js för att lägga till de nya beroenden som visas i följande utdrag.
Här har vi lagt till import för $ och Popper. Vi importerade också Bootstrap JavaScript minified bundle-filen. Nu kan du använda Bootstrap JavaScript komponenter i din React app.,
installera ett react Bootstrap-paket
det tredje sättet att lägga till Bootstrap till en React-app är att använda ett paket som har byggt om Bootstrap-komponenter som är utformade för att fungera som React-komponenter. De två mest populära paketen är:
react-bootstrapreactstrap
båda paketen är bra val för att använda Bootstrap med React-appar, även om du inte nödvändigtvis behöver använda någon av dem. De delar mycket liknande egenskaper.,
använda inbyggda Bootstrap klasser och komponenter
Du kan använda Bootstrap direkt på element och komponenter i din React app genom att tillämpa de inbyggda klasserna precis som alla andra klass. Låt oss bygga en enkel tema switcher React komponent för att visa med hjälp av Bootstrap klasser och komponenter.,
som visas i denna demo använder vi en rullgardinsmeny som är tillgänglig i bootstrap att genomföra vårt tema switcher. Vi använder också de inbyggda knappklasserna för att ställa in storleken och färgen på rullgardinsmenyn.
Vi kommer att fortsätta att skriva koden för vår ThemeSwitcher komponent. Se till att du redan har en React-applikation., Skapa en ny fil för komponenten och Lägg till följande kodavsnitt till den:
Här har vi byggt en mycket enkel tema switcher komponent utnyttja på Bootstrap s dropdown komponent och ett par inbyggda klasser. Du kan lära dig mer om att använda Bootstrap dropdown här.
först konfigurerade vi komponentens tillstånd med entheme – egendom och initierade den tillnull., Därefter definierade vi två klick händelsehanterare resetTheme()och chooseTheme() på komponentklassen för att välja ett tema och återställa temat respektive.
irender() – metoden gör vi en rullgardinsmeny med delad knapp som innehåller tre teman. nämligen: Primary, Danger, och Success. Varje menyalternativ är ansluten till en klick händelsehanterare för lämplig åtgärd. Lägg märke till hur vi använder theme.toLowerCase() för att få temafärgklassen för både rullgardinsmenyn och texten., Vi standard att använda secondary som tema färg om inget tema är inställt.
i det här exemplet har vi sett hur lätt det är att använda Bootstraps inbyggda klasser och komponenter i vår React-app. Kontrollera Bootstrap-dokumentationen för att lära dig mer om de inbyggda klasserna och komponenterna.
react-bootstrap exempel
nu kommer vi att bygga upp vårt tema switcher medreact-bootstrap. Vi kommer att använda kommandoradsverktygetcreate-react-app för att skapa vår app. Se till att du har verktyget create-react-app installerat på datorn.,
skapa en ny React-app medcreate-react-app enligt följande:
create-react-app react-bootstrap-app
nästa, fortsätt och installera beroenden enligt följande:
yarn add bootstrap@3 react-bootstrap
react-bootstrap riktar sig för närvarande mot Bootstrap v3. Arbetet pågår dock aktivt för att ge Bootstrap v4-stöd.
skapa en ny fil med namnet ThemeSwitcher.js i katalogen src I projektet och lägg följande innehåll i det.
Här har vi försökt efterlikna vårt första exempel så mycket som möjligt med react-bootstrap., Vi importerar två komponenter från paketetreact-bootstrap, nämligenSplitButton ochMenuItem. Se Rullgardinsdokumentationenreact-bootstrap för mer information.
först konfigurerade vi komponentens tillstånd med entheme – egendom och initierade den tillnull. Därefter definierar vi enchooseTheme() klicka på händelsehanterare för att välja ett tema eller återställa temat.
eftersom vi använder Bootstrap 3.3.,7, Vi skapade några container stilar irender() metod för att hjälpa oss att uppnå horisontell och vertikal centrering.
Lägg märke till hur vi anger knappstorleken på SplitButton – komponenten med hjälp av bsSize prop. Lägg också märke till hur vi skickarthemeClass tillbsStyle prop för att dynamiskt ändra knappfärgen baserat på statens tema.
vi skickar temanamnet till komponenteneventKey prop för varjeMenuItem., Vi ställer också inonSelect – hanteraren tillthis.chooseTheme(), som vi definierade tidigare. KomponentenMenuItem passerareventKey ochevent själv tillonSelect hanteraren enligt följande:
(eventKey: any, event: Object) => any
slutligen kommer vi att ändrasrc/index.js fil för att se ut som följande utdrag:
här importerar vi först bootstraps minifierade CSS-filer. Vi importerar också vårThemeSwitcher – komponent och gör den till DOM.,
om du kör appen nu med kommandotyarn start ellernpm start. Din app bör starta på port 3000 och ska se ut som följande demo:
react-bootstrap
reactstrap exempel
Vi kommer att gå vidare och bygga om vårt tema switcher medreactstrap den här gången., Vi kommer att använda kommandoradsverktygetcreate-react-app för att skapa vår app. Se till att du har verktyget create-react-app installerat på datorn.
skapa en ny React-app medcreate-react-app enligt följande:
create-react-app reactstrap-app
nästa, fortsätt och installera beroenden enligt följande:
yarn add bootstrap reactstra
skapa en ny fil med namnetThemeSwitcher.js Isrc katalog över ditt projekt och lägg följande innehåll i det:
Här har vi byggt om vårt ursprungliga exempel medreactstrap., Vi importerar ett par komponenter från reactstrap. Se rullgardinsmenynreactstrap för mer information.
först konfigurerar vi komponentens tillstånd med två egenskaper:
-
themeegenskapen initierades tillnull -
dropdownOpeninitierades tillfalse. Den här egenskapen kommer att användas iButtonDropdown– komponenten frånreactstrapför att bibehålla växelläget för rullgardinsmenyn.,
Vi definierar också entoggleDropdown() metod för att växla det öppna tillståndet för rullgardinsmenyn. Detta kommer också att användas i komponenten ButtonDropdown.reactstraptillhandahåller också en okontrollerad komponentUncontrolledButtonDropdownsom inte kräver attisOpenprop ellertoggle handler prop ska fungera. I de flesta fall kan detta användas istället för att använda ButtonDropdown.
varje objekt i rullgardinsmenyn återges med komponentenDropdownItem., Lägg märke till hur vi anger knappstorleken på DropdownToggle – komponenten med hjälp av size prop. Lägg också märke till hur vi skickar themeClass till color prop på både Button och DropdownToggle komponenter för att dynamiskt ändra knappfärgen baserat på statens tema.
vi ställer också inonClick hanteraren på varjeDropdownItem precis som vi gjorde tidigare, med hjälp avchooseTheme() ochresetTheme() hanterare vi definierade tidigare.,
slutligen kommer vi att ändra filensrc/index.js så att den ser ut som följande utdrag:
här importerar vi först Bootstrap minified CSS-filen. Vi importerar också vårThemeSwitcher – komponent och gör den till DOM.
om du kör appen nu med kommandotyarn start ellernpm start., Din app ska börja med port 3000 och ska se ut som följande demo:
3000och ska se ut som följande demo:
skapa en react app med Bootstrap
låt oss driva detta lite längre för att skapa en app med några fler detaljer. Vi kommer att försöka använda så mycket Bootstrap klasser och komponenter som möjligt. Vi kommer också att använda reactstrap för att integrera Bootstrap med React, eftersom den stöder Bootstrap 4.,
Vi kommer att använda kommandoradsverktygetcreate-react-app för att skapa vår app. Se till att du har verktyget create-react-app installerat på datorn. Här är en skärmdump av vad vi kommer att skapa.,
skapa en ny React app med create-react-app enligt följande:
create-react-app sample-app
nästa, gå vidare och installera beroenden enligt följande:
yarn add axios bootstrap reactstrap
Observera här att vi installerar axios som ett beroende. Axios är en löftesbaserad HTTP-klient för webbläsaren och noden.js. Det gör det möjligt för oss att hämta inlägg från BaconIpsum JSON API.,
gör en liten ändring av filensrc/index.js för att inkludera Bootstrap minified CSS-filen. Det ska se ut som följande utdrag:
skapa en ny katalog med namnet components i katalogen src I ditt projekt. Skapa en ny fil,Header.js, I den just skapade katalogencomponents med följande innehåll:
komponenten vi just skapat i det här kodavsnittet är komponentenHeader som innehåller navigeringsmenyn., Därefter kommer vi att skapa en ny fil med namnet SideCard.js i katalogen components med följande innehåll:
skapa sedan en ny fil med namnet Post.js i katalogen components och Lägg till följande kodavsnitt till det:
här skapade vi en ny fil med namnet iv id=”Post komponent som gör ett inlägg på sidan. Vi initierar komponentens tillstånd med egenskapenpost inställd pånull., När komponenten monteras använder vi axios för att hämta ett slumpmässigt inlägg av fyra stycken från BaconIpsum JSON API och uppdatera egenskapen post I staten.
ändra slutligen filensrc/App.js så att den ser ut som följande utdrag:
här inkluderar vi helt enkelt komponenternaHeader,SideCard ochPost I komponenterna App komponent. Lägg märke till hur vi använder ett par responsiva verktygsklasser som tillhandahålls av Bootstrap för att anpassa vår app till olika skärmstorlekar.,
om du kör appen nu med kommandot yarn start eller npm start, bör din app Börja på port 3000 och ska se exakt ut som skärmdumpen vi såg tidigare.
slutsats
i den här handledningen utforskade vi några olika sätt på vilka vi kan integrera Bootstrap med våra React-appar. Vi har också sett hur vi kan använda två av de mest populära react Bootstrap-biblioteken, nämligen react-bootstrap och reactstrap.,
Vi har bara använt några Bootstrap komponenter i denna handledning, såsom alert, badge, dropdown, navbar, nav, form, knapp, kort, etc. Det finns fortfarande ett par Bootstrap komponenter Du kan experimentera med, såsom tabeller, modaler, verktygstips, karusell, jumbotron, pagination, flikar, etc.
Du kan kontrollera dokumentationen för de paket vi använde i denna handledning för att ta reda på fler sätt som de kan användas. Källkoden för alla demo apps i denna handledning kan hittas på GitHub.,
fullständig synlighet i produktions React-appar
felsökning React-program kan vara svårt, särskilt när användare upplever problem som är svåra att reproducera. Om du är intresserad av övervakning och spårning Redux state, automatiskt surfacing JavaScript fel, och spåra långsamma nätverksförfrågningar och komponent laddningstid, prova LogRocket. 
LogRocket är som en DVR för webbappar, inspelning bokstavligen allt som händer på din React app., Istället för att gissa varför problem händer kan du aggregera och rapportera om vilket tillstånd din ansökan var i när ett problem uppstod. LogRocket övervakar också appens prestanda, rapportering med mått som klientprocessorbelastning, klientminnesanvändning och mer.
LogRocket Redux middleware-paketet lägger till ett extra lager av synlighet i dina användarsessioner. LogRocket loggar alla åtgärder och tillstånd från dina Redux butiker.
modernisera hur du felsöker dina React — appar-börja övervaka gratis.