rostoucí popularita jednostránkových aplikací v posledních několika letech vedla k přílivu rámců JavaScriptu, včetně Angular, React, Vue.js, Ember-seznam pokračuje. V důsledku toho již není nutné používat knihovnu DOM, jako je jQuery, k vytváření webových aplikací.
to se shodovalo se vznikem rámců CSS navržených tak, aby vývojářům pomohlo vytvářet responzivní webové aplikace., Pokud jste frontend developer, jste téměř jistě používal, nebo alespoň slyšel o Bootstrap, Foundation a Bulma, všechno citlivý (mobile-first) CSS rámců s robustní funkce a vestavěné nástroje. Pokud je React nejpoužívanějším rámcem JavaScriptu pro vytváření webových aplikací, Bootstrap je nejoblíbenějším rámcem CSS, který pohání miliony webových stránek na internetu.,
V tomto tutoriálu, budeme vám ukázat, jak používat Reagovat a Bootstrap, jak přidat Bootstrap Reagovat na app, jak nainstalovat Reagovat Bootstrap balíčky, například react-bootstrap (s příklady), a konečně, jak vytvořit aplikace Reagovat s Bootstrap.
pokud právě začínáte s těmito frameworky, Navrhoval bych skimming prostřednictvím oficiální dokumentace React a Bootstrap. Také bych vás povzbudil, abyste se podívali na komplexní video tutoriál níže pro hlubší ponor.,
Přidat Bootstrap Reagovat
tři nejčastější způsoby, jak přidat Bootstrap, aby vaše aplikace Reagovat, jsou:
- Použití BootstrapCDN
- Import Bootstrap Reagují jako závislost
- Nainstalovat Reagovat Bootstrap balíček (jako je
bootstrap-reactneboreactstrap)
Použití BootstrapCDN
BootstrapCDN je nejjednodušší způsob, jak přidat Bootstrap, aby vaše aplikace Reagovat. Nevyžaduje se žádná instalace ani stahování. Jednoduše vložte <link> do<head> sekce vaší aplikace, jak je uvedeno v následujícím úryvku.,
Pokud máte zájem v používání JavaScript komponenty, které loď s Bootstrap, budete muset umístit následující <script> značky blízkosti konec stránky, těsně před zavírací </body> tag, je povolit.
Jak vidíte, Bootstrap 4 vyžaduje jQuery a Popper.js pro jeho JavaScript komponenty. Ve výše uvedeném úryvku jsme použili štíhlou verzi jQuery, i když můžete použít i plnou verzi.
pro vaši aplikaci React budou tyto úryvky kódu obvykle přidány na indexovou stránku vaší aplikace., Pokud jste použili create-react-app vytvořit vaše aplikace, pak se vaše public/index.html stránka by měla vypadat jako následující úryvek:
Nyní můžete začít používat vestavěný Bootstrap třídy a JavaScript komponenty ve vašem Reagovat, aplikace komponenty.
Import Bootstrap jako závislost
Pokud používáte nástroj pro sestavení nebo modul bundler jako webpack, pak toto je upřednostňovanou možnost pro přidání Bootstrap, aby vaše aplikace Reagovat. Budete muset nainstalovat Bootstrap jako závislost pro vaši aplikaci.,
npm install bootstrap
nebo pokud používáte příze:
yarn add bootstrap
jakmile máte nainstalovaný Bootstrap, pokračujte a zahrňte jej do vstupu aplikace JavaScript file. Pokud jste zvyklí nacreate-react-app, mělo by to být vášsrc/index.js soubor.
Všimněte si, že jsme importovali minifikovaný CSS Bootstrap jako první závislost. Díky tomu můžeme pokračovat pomocí vestavěných tříd Bootstrap v našich komponentách aplikace React., Nicméně předtím, než můžete použít Bootstrap JavaScript komponenty v aplikaci, budete muset nainstalovat jquery popper.js pokud již nejsou nainstalovány.
npm install jquery popper.js
dále budete provádět další změny src/index.js souboru přidat nové závislosti, jak je ukázáno v následujícím fragmentu kódu.
zde jsme přidali import pro $a Popper. Také jsme importovali Bootstrap JavaScript minified bundle soubor. Nyní můžete použít Bootstrap JavaScript komponenty v aplikaci React.,
Nainstalovat Reagovat Bootstrap balení
třetí způsob, jak přidat Bootstrap na Reagovat aplikace je použít balíček, který byl přestavěn Bootstrap komponenty, určený pro práci jak Reagovat komponenty. Dvě nejoblíbenější balíčky jsou:
react-bootstrapreactstrap
Oba balíčky jsou skvělé možnosti pro použití Bootstrap Reagovat s aplikací, i když ty nejsou nezbytně nutné používat žádné z nich. Mají velmi podobné vlastnosti.,
Použití vestavěné Bootstrap třídy a komponenty
můžete použít Bootstrap přímo na prvky a součásti Reagovat aplikace za použití vestavěných tříd, stejně jako jakékoli jiné třídy. Pojďme vytvořit jednoduchý téma switcher reagovat komponentu demonstrovat pomocí Bootstrap tříd a komponent.,
Jak je uvedeno v této ukázce, jsme pomocí rozevíracího seznamu součástí k dispozici v Bootstrap realizovat naše theme switcher. K nastavení velikosti a barvy rozbalovacího tlačítka používáme také vestavěné třídy tlačítek.
budeme pokračovat v psaní kódu pro naši komponentu ThemeSwitcher. Ujistěte se, že máte již nastavenou aplikaci React., Vytvořit nový soubor pro komponentu a přidejte následující fragment kódu:
Tady jsme si vybudovali velmi jednoduché téma switcher součást využitím Bootstrap je rozbalovací součásti a pár vestavěných tříd. Můžete se dozvědět více o použití Bootstrap rozbalovací nabídky zde.
nejprve nastavíme stav komponenty pomocí vlastnosti theme a inicializujeme ji na ., Dále jsme definovali dva klikací ovladače událostí resetTheme()a chooseTheme() na třídě komponent pro výběr motivu a resetování motivu.
v metoděrender() vykreslíme rozbalovací nabídku s rozděleným tlačítkem obsahující tři témata. konkrétně: Primary, Danger a Success. Každá položka nabídky je připojena k obslužnému programu událostí kliknutí pro příslušnou akci. Všimněte si ,jak používámetheme.toLowerCase() k získání třídy barev motivu pro rozbalovací tlačítka i text., Standardně používáme secondary jako barvu motivu, pokud není nastaveno žádné téma.
v tomto příkladu jsme viděli, jak snadné je používat vestavěné třídy A komponenty Bootstrap v naší aplikaci React. Zkontrolujte dokumentaci Bootstrap a dozvíte se více o vestavěných třídách a součástech.
react-bootstrap příklad:
Teď, obnovíme naše téma switcher pomocí react-bootstrap. K vytvoření naší aplikace použijeme nástroj příkazového řádku create-react-app. Ujistěte se, že máte na svém počítači nainstalován nástroj create-react-app.,
Vytvořit novou Reagovat aplikace pomocí create-react-app takto:
create-react-app react-bootstrap-app
Next, jděte do toho a nainstalovat závislostí takto:
yarn add bootstrap@3 react-bootstrap
react-bootstrap v současné době se zaměřuje Bootstrap v3. Aktivně však probíhá práce na poskytování podpory Bootstrap v4.
Vytvořit nový soubor s názvem ThemeSwitcher.js src adresář vašeho projektu a vložte následující obsah v ní.
zde jsme se snažili co nejvíce napodobit náš počáteční příklad pomocí react-bootstrap., Dovážíme dvě složky z react-bootstrap balíček, konkrétně SplitButton MenuItem. Další informace naleznete v rozbalovací dokumentaci react-bootstrap.
nejprve nastavíme stav komponenty pomocí vlastnosti theme a inicializujeme ji na . Dále definujeme chooseTheme() klikněte na správce událostí pro výběr motivu nebo resetování motivu.
protože používáme Bootstrap 3.3.,7, vytvořili jsme některé styly kontejnerů v metodě render(), která nám pomůže dosáhnout horizontálního a vertikálního Centrování.
Všimněte si, jak máme určit velikost tlačítka na SplitButton součásti pomocí bsSize prop. Všimněte si také, jak jsme kolem themeClass bsStyle prop dynamicky změnit tlačítko barvu v závislosti na stavu tématu.
předáváme název tématu komponentě eventKey prop každého MenuItem., Také jsme nastavilionSelect handler na this.chooseTheme(), které jsme definovali dříve. MenuItem složka prochází eventKey event onSelect handler takto:
(eventKey: any, event: Object) => any
a Konečně, budeme upravit src/index.js soubor vypadat jako následující úryvek:
Tady, musíme nejprve importovat Bootstrap je minified CSS soubory. Importujeme také naši komponentu ThemeSwitcher a vykreslíme ji do DOM.,
Pokud spustíte aplikaci nyní s příkazem yarn start nebo npm start. Vaše aplikace by měla začít na portu 3000 by měl vypadat podobně jako následující ukázka:
react-bootstrap demo. reactstrap příklad:
Budeme pokračovat a obnovit naše téma switcher pomocí reactstrap tentokrát., K vytvoření naší aplikace použijeme nástroj příkazového řádku create-react-app. Ujistěte se, že máte na svém počítači nainstalován nástroj create-react-app.
Vytvořit novou Reagovat aplikace pomocí create-react-app takto:
create-react-app reactstrap-app
Next, jděte do toho a nainstalovat závislostí takto:
yarn add bootstrap reactstra
Vytvořit nový soubor s názvem ThemeSwitcher.js src adresář vašeho projektu a vložte následující obsah:
Tady jsme přestavěli náš původní příklad použití reactstrap., Importujeme několik komponent z reactstrap. Další informace naleznete v rozbalovací dokumentaci tlačítkareactstrap.
za Prvé, jsme se nastavit složky státu s dvě vlastnosti:
-
themevlastnost inicializována nanull -
dropdownOpeninicializovánfalse. Tato vlastnost bude použita v komponentěButtonDropdownzreactstrappro udržení přepínacího stavu rozbalovacího seznamu.,
také definujeme metodu toggleDropdown() pro přepínání otevřeného stavu rozbalovací nabídky. To bude také použito v komponentě ButtonDropdown.reactstrap také poskytuje nekontrolované součásti UncontrolledButtonDropdown, který nevyžaduje isOpen prop toggle handler prop do práce. Ve většině případů to lze použít místo použití ButtonDropdown.
každá položka v rozbalovací nabídce je vykreslena pomocí komponentyDropdownItem., Všimněte si, jak určíme velikost tlačítka na komponentě DropdownToggle pomocísize prop. Také si všimněte, jak jsme se kolem themeClass color prop na obou Button DropdownToggle komponenty dynamicky změnit tlačítko barvu v závislosti na stavu tématu.
Jsme také nastavit onClick popisovač na každý DropdownItem stejně jako jsme to udělali předtím, pomocí chooseTheme() resetTheme() manipulátory jsme definovali dříve.,
a Konečně, budeme upravit src/index.js soubor vypadat jako následující úryvek:
Tady, musíme nejprve importovat Bootstrap minified CSS souboru. Importujeme také naši komponentu ThemeSwitcher a vykreslíme ji do DOM.
Pokud spustíte aplikaci nyní s příkazem yarn start nebo npm start., Vaše aplikace by měla začít na portu 3000 by měl vypadat podobně jako následující ukázka:
Vytvořit Reagovat aplikace s Bootstrap
Pojďme se tlačit to trochu dále vytvořit aplikaci s více informací. Budeme se snažit používat co nejvíce Bootstrap tříd a komponent, jak je to možné. Budeme také používat reactstrap pro integraci Bootstrap s React, protože podporuje Bootstrap 4.,
k vytvoření naší aplikace použijeme nástroj příkazového řádku create-react-app. Ujistěte se, že máte na svém počítači nainstalován nástroj create-react-app. Zde je screenshot toho, co budeme vytvářet.,
Vytvořit novou Reagovat aplikace pomocí create-react-app takto:
create-react-app sample-app
Next, jděte do toho a nainstalovat závislostí takto:
yarn add axios bootstrap reactstrap
Všimněte si tady, že jsme nainstalovat axios jako závislost. Axios je HTTP klient založený na slibu pro prohlížeč a uzel.js. To nám umožní načíst příspěvky z BaconIpsum JSON API.,
proveďte malou změnu souboru src/index.js, aby zahrnoval minifikovaný CSS soubor Bootstrap. Mělo by to vypadat jako následující úryvek:
vytvořte nový adresář s názvem components v adresáři src vašeho projektu. Vytvořit nový soubor, Header.js, v právě vytvořili, components adresář s následujícím obsahem:
komponenta jsme právě vytvořili v tomto úryvku je Header složka, která obsahuje navigační menu., Dále budeme vytvářet nový soubor s názvem SideCard.js components adresář s následujícím obsahem:
Next, vytvořit nový soubor s názvem Post.js components adresář a přidat následující fragment kódu:
Zde jsme vytvořili Post komponenta, která poskytuje příspěvek na stránce. Inicializujeme stav komponenty pomocí vlastnostipost nastavené na null., Když se komponenta připojí, budeme používat axios načíst náhodný post čtyři body z BaconIpsum JSON API a aktualizovat post majetku státu.
a Konečně, upravte src/App.js soubor vypadat jako následující úryvek:
Tady jsme prostě patří Header SideCard Post, složky v App složka. Všimněte si, jak používáme několik citlivých tříd nástrojů poskytovaných Bootstrap, abychom přizpůsobili naši aplikaci různým velikostem obrazovky.,
Pokud spustíte aplikaci nyní pomocí příkazu yarn start nebo npm start, vaše aplikace by měla začít na portu 3000 a měl by vypadat přesně jako na obrázku, který jsme viděli dříve.
závěr
v tomto tutoriálu jsme prozkoumali několik různých způsobů, jak můžeme integrovat Bootstrap s našimi aplikacemi React. Viděli jsme také, jak můžeme použít dvě z nejpopulárnějších knihoven React Bootstrap, a to react-bootstrap a reactstrap.,
v tomto tutoriálu jsme použili pouze několik komponent Bootstrap, jako je upozornění, odznak, rozbalovací nabídka, navbar, nav, formulář, tlačítko, karta atd. Stále existuje několik komponent Bootstrap, se kterými můžete experimentovat, jako jsou tabulky, modály, popisky, kolotoč, jumbotron, stránkování, karty atd.
můžete zkontrolovat dokumentaci balíčků, které jsme použili v tomto tutoriálu, abyste zjistili více způsobů, jak je lze použít. Zdrojový kód pro všechny demo aplikace v tomto tutoriálu najdete na Githubu.,
Plná viditelnost do produkčních aplikací React
ladění aplikací React může být obtížné, zejména pokud uživatelé mají problémy, které je obtížné reprodukovat. Pokud máte zájem o sledování a sledování stavu Redux, automatické vynoření chyb JavaScriptu a sledování pomalých síťových požadavků a času načítání komponent, zkuste LogRocket. 
LogRocket je jako DVR pro webové aplikace, nahrávání doslova vše, co se děje na vašem Reagují aplikace., Místo toho, abyste hádali, proč se problémy dějí, můžete agregovat a informovat o tom, v jakém stavu byla vaše aplikace, když došlo k problému. LogRocket také sleduje výkon vaší aplikace, hlášení s metrikami, jako je zatížení CPU klienta, využití paměti klienta a další.
balíček LogRocket Redux middleware přidává další vrstvu viditelnosti do Vašich uživatelských relací. LogRocket zaznamenává všechny akce a stav z vašich obchodů Redux.
modernizujte způsob ladění aplikací React-začněte monitorovat zdarma.