React patří mezi nejoblíbenější frameworky a knihovny JavaScriptu pro vytváření jednostránkových aplikací a uživatelských rozhraní. Jeho flexibilita při vytváření uživatelských rozhraní pomocí opakovaně použitelných komponent, rychlost vývoje a podpůrná komunita jsou důvody pro jeho popularitu.
React však musí být kombinován s kaskádovými styly (CSS), aby byly jeho aplikace vizuálně přitažlivější a prezentovatelnější. Psaní CSS od začátku může být časově náročné.
Vývojáři mohou strávit spoustu času prací na stylingu namísto klíčových funkcí aplikace React. Dobrou zprávou je, že nástroje a rámce jako Bootstrap usnadňují přidávání CSS do vaší aplikace React.
Table of Contents
Co je Bootstrap?
Bootstrap je open-source CSS framework pro front-end vývoj. Bootstrap umožňuje vývojářům vytvářet responzivní a mobilní webové stránky prostřednictvím své komplexní sady návrhových nástrojů a šablon založených na JavaScriptu a CSS.
Bootstrap byl vytvořen Twitterem a je také udržován týmem inženýrů ze stejné společnosti. Jeho zdrojový kód je udržován na GitHubu a členové komunity mohou přispívat a posílat zprávy o chybách a návrhy. Bootstrap 5.3.0-alpha1 je nejnovější verze v době psaní tohoto článku.
Proč používat Bootstrap s Reactem?
- Šetří čas: Bootstrap se postará o formátování a poskytne vám více času soustředit se na funkčnost. Nemusíte se tak starat o problémy, jako je vzhled vašich formulářů nebo tlačítek, ale o oblasti, jako je to, zda tlačítko Odeslat odesílá data do vašeho backendu nebo API.
- Snadné použití: Jakmile do aplikace React přidáte Bootstrap, stačí vzít předem navržené komponenty uživatelského rozhraní a přidat je do své aplikace.
- Konzistentní design: Většina aplikací se postupem času zvětšuje. Zajištění konzistentního designu vašeho webu je důležité, pokud chcete přilákat věrné uživatele. Bootstrap má konzistentní styl, který dodá vašim stránkám jednotný vzhled.
- Spousta šablon, ze kterých si můžete vybrat: Bootstrap má stovky šablon, od navigačních panelů, tlačítek, formulářů a karuselu až po rozevírací seznamy, abychom zmínili několik, z nichž si můžete vybrat.
- Snadné přizpůsobení: I když má Bootstrap šablony návrhů, vždy můžete přizpůsobit velikost písma, barvu a další funkce tak, aby vyhovovaly vašim potřebám.
- Podpora komunity: Bootstrap má rozsáhlou dokumentaci, která vám pomůže začít. Stále se však můžete spolehnout na velkou komunitu, stále přidávat nové funkce a udržovat tento rámec CSS.
- Responzivní design: Jakmile do aplikace React přidáte Bootstrap, máte jistotu, že vaše webová aplikace bude reagovat na všechny velikosti obrazovky.
Jak nainstalovat Bootstrap v React
Aplikace React se standardně nedodává s nainstalovaným Bootstrapem. Ale než prozkoumáme, jak přidat/instalovat Bootstrap v Reactu, musíme zkontrolovat pár věcí;
Předpoklady
Pomocí tohoto příkazu zkontrolujte, zda je na vašem počítači nainstalován node.js:
node -v
Pokud je nainstalován node.js, budete mít na svém terminálu výstup podobný tomuto.
Verze uzlu
Pokud není nainstalován, můžete se podívat na pokyny ke stažení na https://nodejs.org/en/.
Pomocí tohoto příkazu zkontrolujte, zda je na vašem PC nainstalován React:
npm list react
Pokud je React na vašem počítači nainstalován globálně, budete mít na svém terminálu něco takového.
Reagovat Verze
- Nainstalujte si do svého počítače aplikaci Reagovat. Pomocí tohoto příkazu
npm install -g create-react-app
- Pomocí tohoto příkazu vytvořte svou aplikaci React
npx create-react-app my-app
My-app můžete nahradit libovolným názvem dle vašeho výběru. Pro náš případ jsme naši aplikaci pojmenovali reagovat-b.
Po instalaci budete mít na svém terminálu něco podobného:
Začněte spuštěním těchto příkazů
- cd reagovat-b (použijte název vaší aplikace vybraný v předchozím kroku)
- npm start (tento příkaz spustí vaši aplikaci React)
Nyní můžeme přejít k dalším krokům a přidat/instalovat Bootstrap do naší aplikace React:
Metoda bootstrap instalace NPM
Node.js je standardně dodáván s nainstalovaným npm (správce balíčků uzlů).
Verzi svého npm můžete zkontrolovat pomocí tohoto příkazu:
npm -v
Pokud je nainstalováno npm, získáte výstup, například 9.2.0
Nyní můžete nainstalovat bootstrap pomocí tohoto příkazu:
npm install bootstrap
Po dokončení přejděte do souboru ./src/index.js. Přidejte tento řádek nahoru.
import ‚bootstrap/dist/css/bootstrap.css‘;
Použití Správce balíčků příze
Na rozdíl od npm se příze při instalaci node.js ve výchozím nastavení neinstaluje.
Install yard pomocí tohoto příkazu;
npm install -g yarn
Tento příkaz nainstaluje přízi globálně, takže již nemusíte instalovat balíček pokaždé, když vytvoříte aplikaci React.
Spusťte tento příkaz a přidejte bootstrap do React:
yarn add bootstrap
Po dokončení přejděte do souboru ./src/index.js. Přidejte tento řádek nahoru.
import ‚bootstrap/dist/css/bootstrap.css‘;
Bootstrap byste měli vždy importovat v horní části vstupního souboru vaší aplikace před ostatními soubory CSS. To usnadňuje změnu vašich položek Bootstrap, pokud potřebujete změnit výchozí hodnoty šablon při vytváření aplikace React.
Metoda CDN
Pomocí odkazu Content Delivery Network (CDN) můžete do React přidat Bootstrap. Přidáním tohoto odkazu CDN zahrnete do své aplikace React knihovnu Bootstrap, aniž byste museli stahovat a hostovat soubory ve složce projektu. Následuj tyto kroky.
- V kořenové složce přejděte do souboru .public/index.html
- Na značku přidejte tuto značku
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Do aplikace musíte přidat závislosti JavaScriptu. Přejděte do těla svého souboru index.html a přidejte tuto značku těsně před koncovou značku :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap je konečně nainstalován ve vaší aplikaci React.
Pomocí balíčku React Bootstrap Package
Přístupy, kterými jsme se dosud zabývali, byly původně navrženy pro soubory HTML. Abyste tomu lépe porozuměli, zvažte tento rozevírací kód z Bootstrapu:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Co je špatného na kódu? Bootstrap ve výchozím nastavení používá třídu ke klasifikaci svých dělení (DIV). React však používá JSX, který používá syntaxi camelCase. Musíte tedy nahradit třídu třídou název_třídy ručně.
Aby tento kód fungoval na Reactu, musíme nahradit každou „třídu“ „className“. Konečný kód bude:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Naštěstí máme dva další přístupy, reagovat-bootstrap a reagovat-strap, kde není potřeba ručního zásahu.
React-bootstrap
React-bootstrap má skutečné komponenty React postavené od nuly. Knihovna je kompatibilní s jádrem Bootstrap.
Chcete-li začít s React-bootstrap, postupujte takto:
- Nainstalujte React-bootstrap pomocí tohoto příkazu:
npm install react-bootstrap bootstrap
- Přejděte do souboru src/index.js nebo App.js a přidejte tento řádek před ostatní soubory CSS
import ‚bootstrap/dist/css/bootstrap.min.css‘;
React-bootstrap umožňuje importovat konkrétní komponentu namísto celé knihovny. Pokud například potřebujete importovat tlačítko na jednu z vašich komponent, můžete jej importovat následovně;
import { Button } z ‚react-bootstrap‘;
Reactstrap
Toto je knihovna komponent React pro Bootstrap. Reactstrap ve svých stylech a motivech spoléhá na framework Bootstrap CSS. Tato knihovna importuje správné třídy Bootstrap do vaší aplikace React, což vám umožní mít konzistentní styl aplikace. Ke spuštění funkce také nemusíte přidávat soubory JavaScript Bootstrapu.
Chcete-li přidat Reactstrap do aplikace React, postupujte takto:
- Nainstalujte Reactstrap pomocí tohoto příkazu:
npm install reactstrap react react-dom
- Importujte Bootstrap pomocí těchto příkazů:
npm install --save bootstrap
import ‚bootstrap/dist/css/bootstrap.min.css‘; (přidejte tento řádek do souboru app.js)
K zahrnutí Bootstrapu do aplikace můžete také použít možnost odkazu CDN. Po prvním kroku přejděte do kořenového adresáře a přejděte do souboru .public/index.html a přidejte tento řádek do značky
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap umožňuje importovat konkrétní komponentu namísto celé knihovny. Pokud například potřebujete importovat tlačítko na jedné z vašich komponent, můžete importovat jako;
import { Button } z ‚reactstrap‘;
Závěr
Výše jsou uvedeny některé přístupy, které můžete použít k instalaci Bootstrapu do aplikace React a upravit tak své webové aplikace. Volba způsobu instalace je otázkou preferencí, protože konečný cíl je stejný.
Kombinace React s Bootstrap vám ušetří bolesti spojené s nutností sledovat všechny styly CSS, jak vaše aplikace roste. Styling vaší aplikace bude snadný a efektivní, protože budete mít více času soustředit se na funkce.
Můžete prozkoumat několik důvodů, proč zvolit React Native pro vývoj mobilních aplikací.