Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 6 - Kalkulačka v React - Projekt a rozdělení na komponenty

V předešlém cvičení, Řešené úlohy k 1.-5. lekci React, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Již umíme pracovat s vlastnostmi a stavy komponent. Nyní si vyzkoušíme, jak se skládají React aplikace z více komponent a jak mezi těmito komponentami předávat data. Také použijeme první knihovnu.

Vytvoříme si jednoduchou kalkulačku, která bude vypadat asi takto:

Kalkulačka v React - Základy React

Založení projektu

Ve složce si projekty si otevřeme nové okno příkazového řádku. Příkazem create-react-app vytvoříme nový React projekt s názvem calculator:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npx create-react-app@^5.0.1 calculator

Dále přejdeme do složky projektu příkazem cd:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> cd calculator

Instalace knihovny react-select

React obsahuje jednoduchou knihovnu pro obsluhu HTML elementu <select>, který budeme používat pro výběr operace kalkulačky. Knihovna nám poskytuje následující výhody:

  • Snadné zadávání hodnot options předáním pole objektů
  • Vybraná položka je vrácena jako objekt
  • Snadné získávání dat pomocí události onChange
  • Podporuje i asynchronní načítání možností
  • Přizpůsobení stylů (pokud jste někdy zkoušeli stylovat <select> v CSS, určitě tušíte, že tato knihovna bude významná pomoc)

Select pak vypadá takto:

Komponenta React Select - Základy React

Knihovnu si do projektu nainstalujeme příkazem npm i:

Windows PowerShell
PS C:\Users\sdrac\Dropbox\calculator> npm i react-select@^5.6.1

Tímto způsobem budeme do našich React aplikací i v budoucnu instalovat užitečné knihovny.

Opět jsme uvedli i přesnou verzi komponenty, abychom všichni pracovali se stejnou. Když část @^5.6.1 vynecháme, použije se nejnovější verze, která ale někdy může oproti lekci obsahovat nějakou drobnou změnu.

Nakonec projekt spustíme příkazem npm start:

Windows PowerShell
PS C:\Users\sdrac\Dropbox\calculator> npm start

Složku calculator/ otevřeme ve VS Code.

HTML kostra public/index.html

Soubor index.html ve složce public/ jsme dosud neupravovali. Jedná se o samotnou hlavní HTML stránku, do které se pak vkládá komponenta App. Nyní této stránce změníme titulek a počeštíme výzvu k nainstalování JavaScriptu. Kód stránky upravíme do následující podoby:

<!DOCTYPE html>
<html lang="cs">

<head>
    <!-- Úvodní informace pro prohlížeč. -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Popis a titulek aplikace. -->
    <meta name="description" content="Jednoduchá kalkulačka pomocí React knihovny od ITnetwork.cz">
    <title>React kalkulačka | ITnetwork.cz</title>

    <!-- React ikona. -->
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
</head>

<body>
    <noscript>Pro spuštění této aplikace musíte povolit JavaScript.</noscript>

    <!-- Kořen naší komponentové struktury aplikace. -->
    <div id="root"></div>
</body>

</html>

Vidíme, že se jedná o standardní strukturu HTML stránky. Ve stránce samozřejmě musíme ponechat element s id root, do kterého se pak komponenta App vloží. Co stojí za zmínku, je vychytávka v podobě %PUBLIC_URL%, která nám vždy správně doplní cestu do naší složky public/ ;) Bude se vám v budoucnu hodit, až do komponent budete vkládat obrázky a další zdroje.

React komponenty

Při práci s knihovnou React je naším hlavním zaměřením tvorba uživatelského rozhraní (UI) aplikace. Proto není před zahájením práce na škodu si:

  • nejdříve rozmyslet HTML strukturu stránky/komponenty
  • posléze tuto strukturu vhodně rozdělit do více React komponent
  • přidat požadovanou funkcionalitu pomocí manipulace s vlastnostmi a stavem komponent

Krok 1 - Rozmyšlení HTML struktury stránky

Jak tedy bude vypadat stránka s naší kalkulačkou?

Rozložení naší kalkulačky je poměrně jednoduché. Její HTML struktura by mohla vypadat nějak takto (kód níže zatím nikam nepíšeme, jen se podíváme, co kalkulačka bude obsahovat za HTML elementy):

<form>
    <label for="a">
        První číslo: <input id="a" type="number" name="a" required  />
    </label>
    <label for="b">
        Druhé číslo: <input id="b" type="number" name="b" required  />
    </label>
    <label for="operation">
        Operace:
        <select id="operation" name="operation" required>
            <option value="">--Vyberte operaci--</option>
            <option value="add">Sčítání</option>
            ...
        </select>
    </label>
    <input type="submit" value="Spočítej" />
</form>
<div>Výsledek je: 10</div>

Když bychom stránce nenadefinovali žádné styly, vypadala by asi takto:

Tvoje stránka
localhost

Krok 2 - Rozdělení HTML struktury do React komponent

Nyní je čas rozdělit tuto stránku na React komponenty a následně ji pomocí nich poskládat.

Pro kvalitní demonstraci použití knihovny React si strukturu rozdělíme hezky nadrobno. Kalkulačka bude složena z těchto React komponent:

Základy React

Reálně bychom mohli zobrazovat výsledek přímo v komponentě kalkulačky, ale takto si alespoň lépe vyzkoušíme, jak si komponenty mezi sebou posílají data.

Začneme těmi nejmenšími komponentami a postupně je budeme skládat do sebe jako stavebnici. Komponentu pro výběr operace máme již v React připravenou, ty další si vytvoříme sami.

Pro tyto naše nové komponenty si čistě kvůli přehlednosti vytvoříme složku src/calculator/. Ta bude obsahovat komponenty týkající se kalkulačky. Alternativně bychom si mohli složku pojmenovat i components/, ale často se stává, že se aplikace rozroste a bude vyžadovat další a další komponenty. A všechny v jedné složce by byly nepřehledné. Proto je lepší na toto myslet od začátku a vytvářet složky na související komponenty, ne na úplně všechny komponenty.

Příště, v lekci Kalkulačka v React - Tvorba komponent, si postupně vytvoříme komponenty pro zadání čísla, vypsání výsledku a pro formulář kalkulačky.


 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.

Předchozí článek
Řešené úlohy k 1.-5. lekci React
Všechny články v sekci
Základy React
Přeskočit článek
(nedoporučujeme)
Kalkulačka v React - Tvorba komponent
Článek pro vás napsal Jindřich Máca
Avatar
Uživatelské hodnocení:
127 hlasů
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Aktivity