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:
Založení projektu
Ve složce s projekty si otevřeme nové okno příkazového řádku.
Příkazem npm create vite vytvoříme nový React projekt s
názvem calculator:
Windows PowerShell PS C:\Users\sdrac\Dropbox> npm create vite@^6.1.1 calculator -- --template react
Dále přejdeme do složky projektu příkazem cd:
Windows PowerShell PS C:\Users\sdrac\Dropbox> cd calculator
A nainstalujeme potřebné balíčky příkazem npm install:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm install
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
optionspř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:
Knihovnu si do projektu nainstalujeme příkazem npm i:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm i react-select@^5.9.0
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.9.0 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 run dev:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm run dev
Složku calculator/ otevřeme ve VS Code.
HTML kostra index.html
Soubor index.html v kořenové složce 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 přidáme krátký
popis. Kód stránky upravíme do následující podoby:
<!doctype html> <html lang="cs"> <head> <!-- Úvodní informace pro prohlížeč a ikona --> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Popis a titulek aplikace --> <meta name="description" content="Jednoduchá kalkulačka pomocí React knihovny od ITnetwork.cz"> <title>React kalkulačka | ITnetwork.cz</title> </head> <body> <!-- Kořen naší komponentové struktury aplikace --> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </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ží. Na konci elementu <body>
si můžeme všimnout načítání skriptu ze souboru main.jsx,
který právě ono vkládání komponenty App řeší.
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:
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:
- zadávání čísla – komponenta
NumberInput(použijeme dvakrát), - zadávání operace – komponenta
Select, - zobrazení výsledku – komponenta
Result, - formulář kalkulačky – komponenta
CalculatorForm, - samotná aplikace – komponenta
App.
Ukažme si pro lepší představu hlavní komponenty formuláře na obrázku:
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.
