A Bootstrap használata a React

használatával az egyoldalas alkalmazások növekvő népszerűsége az elmúlt években a JavaScript keretrendszerek beáramlásához vezetett, beleértve az Angular, React, Vue.js, Ember – a lista folytatódik. Ennek eredményeként már nem szükséges Dom könyvtárat, például jQuery-t használni webes alkalmazások készítéséhez.

ez egybeesett a megjelenése CSS keretek célja, hogy segítse a fejlesztők építeni reagáló webes alkalmazások., Ha egy frontend fejlesztő, akkor már szinte biztosan használt, vagy legalábbis hallott Bootstrap, Alapítvány, Bulma, minden érzékeny (mobil-első) CSS keretek robusztus funkciók, beépített segédprogramok. Ha Reagál a leggyakrabban használt JavaScript keretrendszer a webalkalmazások, Bootstrap a legnépszerűbb CSS framework, bekapcsolás millió honlapok az interneten.,

ebben A leckében megmutatjuk, hogyan kell használni Reagálni, valamint Bootstrap, hogyan adjunk Bootstrap egy Reagálni app, hogyan kell telepíteni Reagálni Bootstrap csomagok, mint a react-bootstrap (példákkal), majd végül, hogyan kell létrehozni egy Reagálni app Bootstrap.

Ha még csak most kezded el ezeket a keretrendszereket, azt javaslom, hogy a hivatalos React and Bootstrap dokumentációt futtasd át. Azt is javasoljuk, hogy nézze meg az átfogó videó bemutató alább egy mélyebb merülés.,

Hozzáadás a Bootstrap Reagálni

A három leggyakoribb módja, hogy hozzá Bootstrap a Reagálnak alkalmazás:

a BootstrapCDN
Import Bootstrap Reagál, mint egy függőség
Telepíteni egy Reagálni Bootstrap csomag (mint például a bootstrap-react vagy reactstrap)

A BootstrapCDN

BootstrapCDN a legegyszerűbb módja annak, hogy adjunk Bootstrap a Reagálnak, app. Nincs szükség telepítésre vagy letöltésre. Egyszerűen tegyen egy <link> – t az alkalmazás <head> szakaszába, amint az a következő részletben látható.,

Ha érdekli a Bootstrap-ot tartalmazó JavaScript-összetevők használata, akkor a következő <script> címkéket kell elhelyeznie az oldalak vége közelében, közvetlenül a bezárás előtt </body> címke engedélyezéséhez.

mint látható, Bootstrap 4 igényel jQuery és Popper.js annak JavaScript komponensek. A fenti részletben a jQuery slim verzióját használtuk, bár a teljes verziót is használhatja.

a React alkalmazáshoz ezek a kódrészletek általában hozzáadódnak az alkalmazás indexoldalához., Ha acreate-react-app alkalmazást használta az alkalmazás létrehozásához, akkor apublic/index.html oldalnak a következő részletnek kell kinéznie:

most elkezdheti használni a beépített Bootstrap osztályokat és JavaScript komponenseket a React alkalmazás összetevőiben.

Import Bootstrap, mint egy függőség

Ha egy build eszköz vagy egy modul bundler, mint a webpack, akkor ez a preferált lehetőség hozzátéve Bootstrap a React alkalmazás. Telepítenie kell a Bootstrap-ot, mint az alkalmazás függőségét.,

npm install bootstrap

vagy ha fonalat használ:

yarn add bootstrap

miután telepítette a Bootstrap-ot, menjen előre, és vegye be az alkalmazás bejegyzés JavaScript fájljába. Ha megszokta, hogy create-react-app, ez legyen a src/index.js fájl.

vegye figyelembe, hogy az első függőségként importáltuk a Bootstrap minified CSS-t. Ezzel folytathatjuk a React alkalmazás összetevőink beépített Bootstrap osztályait., Mielőtt azonban felhasználná a Bootstrap JavaScript komponenseit az alkalmazásban, telepítenie kell a jquery és popper.js, ha még nincs telepítve.

npm install jquery popper.js

ezután további változtatásokat hajt végre a src/index.js fájlban az új függőségek hozzáadásához, amint az a következő részletben látható.

itt a$ ésPopperimportokat adtunk hozzá. Importáltuk a Bootstrap JavaScript minified bundle fájlt is. Most már használhatja a Bootstrap JavaScript összetevőket a React alkalmazásban.,

telepítse a React Bootstrap csomagot

a Bootstrap hozzáadásának harmadik módja egy React alkalmazáshoz olyan csomag használata, amely újjáépítette a Bootstrap összetevőket, amelyek React komponensekként működnek. A két legnépszerűbb csomag a következő:

react-bootstrap
reactstrap

mindkét csomag nagyszerű választás a Bootstrap használatához a React alkalmazásokkal, bár nem feltétlenül szükséges ezek bármelyikének használata. Nagyon hasonló tulajdonságokkal rendelkeznek.,

beépített Bootstrap osztályok és komponensek használatával

a Bootstrap közvetlenül használható a React alkalmazásban lévő elemeken és komponenseken a beépített osztályok alkalmazásával, mint bármely más osztály. Építsünk egy egyszerű téma switcher React komponens segítségével bizonyítani Bootstrap osztályok és alkatrészek.,

amint az ebben a demóban látható, a Bootstrap-ban elérhető legördülő összetevőt használjuk a téma-váltó megvalósításához. A legördülő gomb méretének és színének beállításához a beépített gombosztályokat is használjuk.

megyünk előre, hogy írja a kódot a ThemeSwitcher komponens. Győződjön meg róla, hogy már létrehozott egy React alkalmazást., Hozzon létre egy új fájlt az összetevőhöz, majd adja hozzá a következő kódrészletet:

itt egy nagyon egyszerű témaváltó komponenst építettünk a Bootstrap legördülő összetevőjére és néhány beépített osztályra. Itt többet megtudhat a Bootstrap legördülő menüből.

először a theme tulajdonsággal állítottuk be az összetevő állapotát, majd inicializáltuk null., Ezután két kattintásos eseménykezelőt definiáltunk: resetTheme()és chooseTheme() a komponensosztályon a téma kiválasztásához és a téma visszaállításához.

a render() metódusban egy osztott gomb legördülő menüt adunk meg, amely három témát tartalmaz. nevezetesen: Primary, Danger és Success. Minden menüpont a megfelelő művelethez egy kattintási eseménykezelőhöz van csatolva. Figyelje meg, hogyan használjuk a theme.toLowerCase() a téma színosztályát mind a legördülő gombok, mind a szöveg számára., Mi alapértelmezés szerint asecondary, mint a téma színe, ha nincs téma be van állítva.

ebben a példában láttuk, milyen egyszerű a Bootstrap beépített osztályai és komponensei használata a React alkalmazásban. Ellenőrizze a Bootstrap dokumentációt, hogy többet tudjon meg a beépített osztályokról és komponensekről.

`react-bootstrap` példa

most újraépítjük a téma váltót a react-bootstrap használatával. Az alkalmazás létrehozásához a create-react-app parancssori eszközt használjuk. Győződjön meg róla ,hogy acreate-react-app eszköz telepítve van a gépére.,

Hozzon létre egy új React alkalmazást acreate-react-app használatával az alábbiak szerint:

create-react-app react-bootstrap-app

ezután folytassa és telepítse a függőségeket az alábbiak szerint:

yarn add bootstrap@3 react-bootstrap

react-bootstrap jelenleg célok Bootstrap v3. A Bootstrap v4 támogatás biztosítása érdekében azonban aktívan folyik a munka.

Hozzon létre egy új fájlt, melynek neveThemeSwitcher.js asrc könyvtárában, majd tegye bele a következő tartalmat.

itt megpróbáltuk a kezdeti példánkat a lehető legnagyobb mértékben utánozni a react-bootstraphasználatával., Két komponenst importálunk areact-bootstrap csomagból, nevezetesenSplitButton ésMenuItem. További információkért lásd a react-bootstrap legördülő dokumentációt.

először a theme tulajdonsággal állítottuk be az összetevő állapotát, majd inicializáltuk null. Ezután definiálunk egy chooseTheme() kattintson az eseménykezelőre a téma kiválasztásához vagy a téma visszaállításához.

mivel Bootstrap 3.3-at használunk.,7, létrehoztunk néhány konténerstílust arender() metódusban, hogy segítsünk a vízszintes és függőleges Központosítás elérésében.

figyeljük meg, hogyan adjuk meg a gomb méretét a SplitButtonkomponens segítségével bsSize prop. Figyelje meg azt is, hogyan haladunk a themeClass bsStyle prop felé, hogy dinamikusan megváltoztassuk a gomb színét az állam témája alapján.

átadjuk a téma nevét a eventKey minden MenuItem összetevőnek., A onSelect kezelőt a korábban definiált this.chooseTheme() értékre állítjuk. A MenuItem komponens a eventKey és a event onSelect kezelő az alábbiak szerint:

(eventKey: any, event: Object) => any

/div>

végül módosítjuk a src/index.js fájlt, hogy a következő részletnek tűnjön:

itt először importáljuk a Bootstrap minified CSS fájljait. Mi is importáljuk a ThemeSwitcher komponenst, majd a DOM-ba tesszük.,

Ha az alkalmazást most a yarn start vagy paranccsal futtatja. Az alkalmazásnak a 3000 porton kell kezdődnie, és a következő demónak kell kinéznie:

`reactstrap` példa

a reactstrap segítségével újraépítjük a téma váltót., Az alkalmazás létrehozásához a create-react-app parancssori eszközt használjuk. Győződjön meg róla ,hogy acreate-react-app eszköz telepítve van a gépére.

hozzon Létre egy új Reagálni alkalmazás segítségével create-react-app a következőképpen:

create-react-app reactstrap-app

a Következő rajta, majd telepítse a függőségek alábbiak szerint:

yarn add bootstrap reactstra

új fájl neve ThemeSwitcher.js a src könyvtár a projekt a következő a tartalma:

Itt van újjá az első példa a reactstrap., Néhány komponenst importálunk a reactstrap – ból. További információkért tekintse meg a reactstrap gomb legördülő dokumentációját.

először két tulajdonsággal állítjuk be az összetevő állapotát:

theme tulajdonság inicializálva null
dropdownOpen inicializálva false. Ezt a tulajdonságot a ButtonDropdown reactstrap összetevőben használjuk a legördülő állapot kapcsoló állapotának fenntartásához.,

definiálunk egy toggleDropdown() módszert is a legördülő Nyitott állapot megváltoztatásához. Ezt a ButtonDropdown komponensben is használják.
reactstrap is biztosít egy ellenőrizetlen komponens UncontrolledButtonDropdown, amely nem igényel a isOpen prop vagy a toggle handler prop dolgozni. A legtöbb esetben ez a ButtonDropdownhasználata helyett használható.

a legördülő menü minden elemét a DropdownItem komponens segítségével renderelik., Figyeljük meg, hogyan adjuk meg a gomb méretét a DropdownTogglekomponens segítségével a size prop. Vegye figyelembe azt is, hogy a themeClass color prop-ra haladunk a Button és DropdownToggle komponensek segítségével dinamikusan megváltoztathatjuk a gomb színét az állam témája alapján.

a onClick kezelőt minden DropdownItem mint korábban, a chooseTheme() és resetTheme() kezelőket is beállítottuk.,

végül módosítjuk asrc/index.js fájlt, hogy a következő részletnek tűnjön:

itt először importáljuk a Bootstrap minified CSS fájlt. Mi is importáljuk a ThemeSwitcher komponenst, majd a DOM-ba tesszük.

Ha az alkalmazást most a yarn start vagy paranccsal futtatja., Az alkalmazás induljon a port 3000 meg kell kinéznie, mint a következő demo:

hozzon Létre egy Reagálni app Bootstrap

Nézzük ezt egy kicsit tovább, hogy hozzon létre egy app néhány további részleteket. Igyekszünk minél több Bootstrap osztályt és komponenst használni. A reactstrap – ot a Bootstrap React-vel való integrálására is használjuk, mivel támogatja a Bootstrap 4-et.,

az alkalmazás létrehozásához a create-react-app parancssori eszközt használjuk. Győződjön meg róla ,hogy acreate-react-app eszköz telepítve van a gépére. Itt van egy képernyőkép arról, hogy mit fogunk létrehozni.,

hozzon Létre egy új Reagálni alkalmazás segítségével create-react-app a következőképpen:

create-react-app sample-app

a Következő rajta, majd telepítse a függőségek a következőképpen:

yarn add axios bootstrap reactstrap

vegyük Észre, hogy, hogy telepítse a axios, mint a függőség. Az Axios egy ígéret alapú HTTP kliens a böngésző és a csomópont számára.js. Ez lehetővé teszi számunkra, hogy a BaconIpsum JSON API-ból állítsunk be hozzászólásokat.,

készítsen egy kis módosítást a src/index.js fájlhoz, hogy tartalmazza a Bootstrap minified CSS fájlt. Úgy kell kinéznie, mint a következő részlet:

Hozzon létre egy új könyvtárat, melynek neve components A projekt src könyvtárában. Hozzon létre egy új fájlt, Header.js, az éppen létrehozott components könyvtárban a következő tartalommal:

Az ebben a részletben létrehozott összetevő aHeader komponens, amely tartalmazza a navigációs menüt., Ezután létrehozunk egy új fájl neve SideCard.js a components könyvtárban az alábbi tartalom:

a Következő hozzon létre egy új fájlt, a neve Post.js a components könyvtárat, majd adjuk hozzá az alábbi kódrészletet kell:

Itt létrehoztunk egy Post komponens, ami miatt egy poszt az oldalon. Az összetevő állapotát inicializáljuk egy post tulajdonsággal, amely nullértékre van állítva., Amikor az összetevő fel van szerelve, aaxios – t használjuk a BaconIpsum JSON API négy bekezdéséből álló véletlenszerű bejegyzés letöltéséhez, valamint a post tulajdonság frissítéséhez az államban.

végül módosítsa a src/App.js fájlt, hogy úgy nézzen ki, mint a következő részlet:

itt egyszerűen beillesztjük a Header, SideCard és Post komponenseket a a App komponens. Figyeljük meg, hogyan használjuk a Bootstrap által biztosított néhány érzékeny segédprogramot, hogy alkalmazásunk különböző képernyőméretekhez igazodjon.,

Ha az alkalmazást most a yarn start vagy paranccsal futtatja, az alkalmazásnak a 3000-es porton kell elindulnia, és pontosan úgy kell kinéznie, mint a korábban látott képernyőképnek.

következtetés

ebben az oktatóanyagban néhány különféle módszert vizsgáltunk meg, amelyekkel integrálhatjuk a Bootstrap – ot a React alkalmazásokkal. Azt is láttuk, hogyan használhatjuk a két legnépszerűbb React Bootstrap könyvtárat, nevezetesen a react-bootstrapés reactstrap.,

csak néhány Bootstrap összetevőt használtunk ebben a bemutatóban, mint például riasztás, jelvény, legördülő menü, navbar, nav, űrlap, gomb, kártya stb. Még mindig van néhány Bootstrap összetevő, amellyel kísérletezhet, például táblázatok, modálok, eszköztippek, körhinta, jumbotron, lapozás, lapok stb.

ellenőrizheti az ebben a bemutatóban használt csomagok dokumentációját, hogy megtudja, hogyan használhatók fel. A forráskód az összes demo alkalmazások ebben a bemutatóban megtalálható GitHub.,

teljes láthatóság a termelési React alkalmazásokban

A React alkalmazások hibakeresése nehéz lehet, különösen akkor, ha a felhasználók nehezen reprodukálható problémákat tapasztalnak. Ha érdekel a monitoring, illetve nyomkövető Redux állam, automatikusan felszínre JavaScript-hibák nyomon lassú hálózati kéréseket, illetve komponens betöltési ideje, próbáld LogRocket.

A LogRocket olyan, mint egy DVR a webes alkalmazásokhoz, szó szerint rögzítve mindent, ami a React alkalmazásban történik., Ahelyett, hogy kitalálná, hogy miért történnek problémák, összesítheti és jelentést tehet arról, hogy milyen állapotban volt az alkalmazás, amikor probléma merült fel. LogRocket is figyeli az alkalmazás teljesítményét, jelentési mutatók, mint a kliens CPU terhelés, kliens memória használat, stb.

a LogRocket Redux middleware csomag további látási réteget ad a felhasználói munkamenetekhez. A LogRocket naplózza a Redux áruházak összes műveletét és állapotát.

modernizálja a React alkalmazások hibakeresésének módját-indítsa el a felügyeletet ingyen.