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 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:
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:
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:
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.