4 způsoby, jak nainstalovat Bootstrap v React, abyste vytvořili podrobnější aplikaci

Obsah

Integrace Bootstrapu s Reactem: Průvodce pro Vývojáře

React se etabloval jako jeden z nejpoužívanějších frameworků a knihoven v JavaScriptovém světě pro tvorbu interaktivních jednostránkových aplikací a uživatelských rozhraní. Jeho obliba pramení z flexibility, kterou nabízí při vytváření opakovaně použitelných komponent, rychlosti vývoje a silné podpory komunity.

Nicméně, aby aplikace v Reactu byly vizuálně atraktivní a uživatelsky příjemné, je nutné je kombinovat s kaskádovými styly (CSS). Ruční vytváření CSS může být však časově náročné a zdržovat vývojáře od implementace klíčových funkcionalit aplikace.

Naštěstí existují nástroje a frameworky, jako je Bootstrap, které usnadňují přidávání CSS do projektů v Reactu. Díky nim mohou vývojáři ušetřit čas a soustředit se na podstatnější aspekty aplikace.

Co je to Bootstrap?

Bootstrap je open-source CSS framework, který slouží jako základ pro front-end vývoj. Nabízí komplexní sadu nástrojů a šablon založených na JavaScriptu a CSS, které umožňují vývojářům vytvářet responzivní webové stránky, optimalizované pro mobilní zařízení.

Tento framework byl původně vyvinut společností Twitter a je stále aktivně udržován týmem inženýrů z této společnosti. Jeho zdrojový kód je veřejně dostupný na GitHubu, kde komunita může přispívat, hlásit chyby a navrhovat vylepšení. Aktuální verzí je Bootstrap 5.3.0-alpha1, ke dni psaní tohoto textu.

Proč používat Bootstrap s Reactem?

Úspora času: Bootstrap se postará o formátování, čímž získáte více času na implementaci klíčových funkcí. Nemusíte se tedy zaobírat detaily vzhledu, jako jsou formuláře nebo tlačítka, ale můžete se soustředit například na to, zda tlačítko „Odeslat“ správně předává data do backendu nebo API.
Jednoduché použití: Po integraci Bootstrapu do vaší React aplikace, můžete jednoduše používat předpřipravené komponenty uživatelského rozhraní.
Konzistentní design: Většina aplikací se s časem rozšiřuje. Zajistit konzistentní design je zásadní pro získání a udržení spokojených uživatelů. Bootstrap vám v tomto pomůže tím, že poskytuje jednotný styl napříč celou aplikací.
Bohatý výběr šablon: Bootstrap nabízí širokou škálu šablon, od navigačních panelů, tlačítek, formulářů a karuselů až po rozevírací seznamy.
Snadná personalizace: I když Bootstrap poskytuje šablony, můžete si snadno upravit velikost písma, barvy a další aspekty designu tak, aby vyhovovaly vašim potřebám.
Silná podpora komunity: Bootstrap disponuje obsáhlou dokumentací a aktivní komunitou, která neustále přidává nové funkce a zajišťuje jeho aktuálnost.
Responzivní design: Integrací Bootstrapu získáte záruku, že vaše webová aplikace bude správně fungovat a vypadat na všech velikostech obrazovek.

Jak nainstalovat Bootstrap do Reactu

Standardně, Bootstrap není součástí instalace Reactu. Než se pustíme do instalace, musíme ověřit několik předpokladů:

Předpoklady

Ověřte instalaci Node.js: Node.js je multiplatformní běhové prostředí JavaScriptu, které umožňuje spouštět JavaScript mimo webový prohlížeč.
K ověření, zda máte Node.js nainstalované, použijte příkaz:
```
node -v
```
Pokud je Node.js nainstalované, terminál vám zobrazí verzi Node.js.

V případě, že Node.js není nainstalované, můžete si stáhnout instalátor z https://nodejs.org/en/.
Ověřte instalaci Reactu: React bude sloužit k tvorbě funkcionalit, zatímco Bootstrap se postará o styling.
K ověření instalace Reactu, použijte následující příkaz:
```
npm list react
```
Pokud je React instalován globálně na vašem počítači, terminál zobrazí nainstalovanou verzi Reactu.
Vytvořte si React aplikaci: I když je možné vytvořit React aplikaci ručně, je to poměrně pracné. Pro demonstraci použijeme příkaz create-react-app. Pro vytvoření nové aplikace React, postupujte podle těchto kroků:

Nainstalujte create-react-app globálně pomocí příkazu:

npm install -g create-react-app

Následně vytvořte novou aplikaci React pomocí:

npx create-react-app my-app

Místo my-app můžete použít jakýkoli název.

Po dokončení instalace by měl terminál zobrazit podobný výstup:

Nyní spusťte aplikaci pomocí následujících příkazů:

cd reagovat-b (použijte název aplikace, který jste zvolili v předchozím kroku).
npm start (tento příkaz spustí vaši aplikaci).

Nyní můžeme přejít k dalším krokům a přidat Bootstrap do naší React aplikace:

Instalace Bootstrapu pomocí NPM

Node.js standardně obsahuje nainstalovaný npm (Node Package Manager).

Verzi npm můžete ověřit pomocí příkazu:

npm -v

V případě, že je npm nainstalováno, terminál zobrazí jeho verzi, například 9.2.0.

Bootstrap nainstalujete pomocí příkazu:

npm install bootstrap

Po dokončení instalace otevřete soubor ./src/index.js a na jeho začátek přidejte tento řádek:

import 'bootstrap/dist/css/bootstrap.css';

Použití Yarn Package Manager

Yarn není na rozdíl od npm automaticky instalován s Node.js.

Nainstalujte Yarn pomocí příkazu:

npm install -g yarn

Tento příkaz nainstaluje Yarn globálně, takže ho nebudete muset instalovat pokaždé, když vytváříte novou React aplikaci.

Pro instalaci Bootstrapu do Reactu použijte příkaz:

yarn add bootstrap

Po dokončení instalace přidejte do souboru ./src/index.js na začátek tento řádek:

import 'bootstrap/dist/css/bootstrap.css';

Bootstrap by měl být vždy importován na začátku vstupního souboru vaší aplikace, před importem ostatních CSS souborů. Díky tomu můžete později snadno přepisovat výchozí styly Bootstrapu.

Metoda CDN

Pro přidání Bootstrapu do Reactu můžete využít také odkaz z Content Delivery Network (CDN). Tímto způsobem zahrnete knihovnu Bootstrap do aplikace bez nutnosti stahovat a hostovat soubory v adresáři projektu. Postupujte podle následujících kroků:

V kořenovém adresáři přejděte do souboru .public/index.html.
V sekci <head> přidejte následující <link> tag:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

Dále musíte přidat závislosti JavaScriptu. V <body> souboru index.html, těsně před koncový tag </body> přidejte tento script:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Tímto je Bootstrap úspěšně nainstalován ve vaší React aplikaci.

Použití balíčku React Bootstrap

Výše uvedené metody byly původně určeny pro HTML. Pro lepší pochopení, podívejte se na následující kód rozevíracího seznamu 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 s tímto kódem špatně? Bootstrap ve výchozím nastavení používá atribut class pro klasifikaci DIV prvků. React používá JSX, který vyžaduje syntaxi camelCase. Znamená to, že musíte ručně nahradit class za className.

Aby tento kód správně fungoval v Reactu, musíte nahradit každou instanci class za className. Upravený kód by vypadal takto:

<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í existují dva další způsoby – react-bootstrap a reactstrap, které eliminují nutnost ručních úprav.

React-bootstrap

React-bootstrap obsahuje komponenty React, vytvořené přímo od základu. Tato knihovna je plně kompatibilní s jádrem Bootstrapu.

Pro instalaci a použití React-bootstrap postupujte následovně:

Nainstalujte react-bootstrap a bootstrap pomocí příkazu:

npm install react-bootstrap bootstrap

Otevřete src/index.js nebo App.js a na začátek přidejte tento řádek:

import 'bootstrap/dist/css/bootstrap.min.css';

React-bootstrap umožňuje importovat specifické komponenty namísto celé knihovny. Například, pokud chcete importovat jen tlačítko, můžete tak učinit pomocí:

import { Button } from 'react-bootstrap';

Reactstrap

Reactstrap je knihovna komponent React pro Bootstrap. Styly a motivy Reactstrap využívají Bootstrap CSS framework. Tato knihovna importuje správné Bootstrap třídy do vaší React aplikace, čímž zajistí konzistentní styl. Pro správnou funkci navíc nemusíte přidávat soubory JavaScript z Bootstrapu.

Pro přidání Reactstrap do vaší React aplikace postupujte následovně:

Nainstalujte reactstrap, react a react-dom pomocí příkazu:

npm install reactstrap react react-dom

Nainstalujte Bootstrap pomocí příkazu:

npm install --save bootstrap

Otevřete app.js a přidejte na začátek tento řádek:

import 'bootstrap/dist/css/bootstrap.min.css';

Pro integraci Bootstrapu do aplikace, můžete použít i metodu CDN odkaz. Po provedení prvního kroku, přejděte do kořenového adresáře, souboru .public/index.html a přidejte tento řádek do sekce <head>:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>

Stejně jako u react-bootstrap, i Reactstrap umožňuje importovat konkrétní komponentu namísto celé knihovny. Pro import tlačítka můžete použít:

import { Button } from 'reactstrap';

Závěr

Výše jsou popsány některé metody, které můžete využít pro integraci Bootstrapu do vaší React aplikace a tím vylepšit její vzhled. Způsob instalace je otázkou osobních preferencí, protože cíl je vždy stejný.

Kombinace Reactu a Bootstrapu vám ušetří starosti se sledováním všech CSS stylů, jak vaše aplikace roste. Vytváření stylů bude jednodušší a efektivnější, protože se budete moci více soustředit na funkčnost aplikace.

Můžete si prozkoumat více důvodů, proč zvolit React Native pro vývoj mobilních aplikací.