6. diel - Kalkulačka v React - Projekt a rozdelenie na komponenty
V predchádzajúcom cvičení, Riešené úlohy k 1.-5. lekcii React, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
Už vieme pracovať s vlastnosťami a stavmi komponentov. Teraz si vyskúšame, ako sa skladajú React aplikácie z viacerých komponentov a ako medzi týmito komponentmi odovzdávať dáta. Tiež použijeme prvú knižnicu.
Vytvoríme si jednoduchú kalkulačku, ktorá bude vyzerať asi takto:
Založenie projektu
V priečinku s projektmi si otvoríme nové okno príkazového riadka.
Príkazom create-react-app vytvoríme nový React projekt s názvom
calculator:
Windows PowerShell PS C:\Users\sdrac\Dropbox> npx create-react-app@^5.0.1 calculator
Ďalej prejdeme do priečinka projektu príkazom cd:
Windows PowerShell PS C:\Users\sdrac\Dropbox> cd calculator
Inštalácia knižnice
react-select
React obsahuje jednoduchú knižnicu na obsluhu HTML elementu
<select>, ktorý budeme používať na výber operácie
kalkulačky. Knižnica nám poskytuje nasledujúce výhody:
- Jednoduché zadávanie hodnôt
optionsodovzdaním poľa objektov - Vybraná položka je vrátená ako objekt
- Jednoduché získavanie dát pomocou udalosti
onChange - Podporuje aj asynchrónne načítanie možností
- Prispôsobenie štýlov (ak ste niekedy skúšali štýlovať
<select>v CSS, určite tušíte, že táto knižnica bude významnou pomocou)
Select potom vyzerá takto:
Knižnicu si do projektu nainštalujeme príkazom npm i:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm i react-select@^5.6.1
Týmto spôsobom budeme do našich React aplikácií aj v budúcnosti inštalovať užitočné knižnice.
Opäť sme uviedli aj presnú verziu komponentu, aby sme všetci
pracovali s rovnakou verziou. Keď časť @^5.6.1 vynecháme,
použije sa najnovšia verzia, ktorá ale niekedy môže oproti lekcii
obsahovať nejakú drobnú zmenu.
Nakoniec projekt spustíme príkazom npm start:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm start
Priečinok calculator/ otvoríme vo VS Code.
HTML kostra
public/index.html
Súbor index.html v priečinku public/ sme doteraz
neupravovali. Jedná sa o samotnú hlavnú HTML stránku, do ktorej sa potom
vkladá komponent App. Teraz obsah tejto stránky premažeme a
zmeníme titulok aplikácie. Kód stránky upravíme do nasledujúcej
podoby:
<!DOCTYPE html> <html lang="en"> <head> <!-- Essential information to the browser --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Application description and title. --> <meta name="description" content="A simple calculator using the React library by Ictdemy.com/"> <title>React calculator | Ictdemy.com</title> <!-- React icon. --> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> </head> <body> <noscript>To run this application, you must enable JavaScript.</noscript> <!-- The root of our application's component structure. --> <div id="root"></div> </body> </html>
Vidíme, že sa jedná o štandardnú štruktúru HTML stránky. V stránke
samozrejme musíme ponechať element s id root, do ktorého sa
potom komponent App vloží. Čo stojí za zmienku, je vychytávka
v podobe %PUBLIC_URL%, ktorá nám vždy správne doplní cestu do
nášho priečinka public/ 
Bude sa vám v budúcnosti hodiť, až do komponentov budete vkladať
obrázky a ďalšie zdroje.
React komponenty
Pri práci s knižnicou React je naším hlavným zameraním tvorba používateľského rozhrania (UI) aplikácie. Preto nie je pred začatím práce na škodu si:
- najskôr rozmyslieť HTML štruktúru stránky/komponentu,
- neskôr túto štruktúru vhodne rozdeliť do viacerých React komponentov,
- pridať požadovanú funkcionalitu pomocou manipulácie s vlastnosťami a stavom komponentov.
Krok 1 - Rozmyslenie HTML štruktúry stránky
Ako teda bude vyzerať stránka s našou kalkulačkou?
Rozloženie našej kalkulačky je pomerne jednoduché. Jej HTML štruktúra by mohla vyzerať nejako takto (kód nižšie zatiaľ nikam nepíšeme, len sa pozrieme, čo za HTML elementy bude kalkulačka obsahovať):
<form> <label for="a"> First number: <input id="a" type="number" name="a" required /> </label> <label for="b"> Second number: <input id="b" type="number" name="b" required /> </label> <label for="operation"> Operation: <select id="operation" name="operation" required> <option value="">--Select an operation--</option> <option value="add">Addition</option> ... </select> </label> <input type="submit" value="Calculate" /> </form> <div>Result: 10</div>
Ak by sme stránke nenadefinovali žiadne štýly, vyzerala by asi takto:
Krok 2 - Rozdelenie HTML štruktúry do React komponentov
Teraz je čas rozdeliť túto stránku na React komponenty a následne ju pomocou nich poskladať.
Pre kvalitnú demonštráciu použitia knižnice React si štruktúru podrobne rozdelíme. Kalkulačka bude zložená z týchto React komponentov:
Reálne by sme mohli zobrazovať výsledok priamo v komponente kalkulačky, ale takto si aspoň lepšie vyskúšame, ako si komponenty medzi sebou posielajú dáta.
Začneme tými najmenšími komponentmi a postupne ich budeme skladať do seba ako stavebnicu. Komponent na výber operácie máme už v React pripravený, tie ďalšie si vytvoríme sami.
Pre tieto naše nové komponenty si čisto kvôli prehľadnosti vytvoríme
priečinok src/calculator/. Ten bude obsahovať komponenty
týkajúce sa kalkulačky. Alternatívne by sme si mohli priečinok pomenovať
aj components/, ale často sa stáva, že sa aplikácia rozrastie a
bude vyžadovať ďalšie a ďalšie komponenty. A všetky v jednom priečinku
by boli neprehľadné. Preto je lepšie na toto myslieť od začiatku a
vytvárať priečinky na súvisiace komponenty, nie na úplne všetky
komponenty.
Nabudúce, v lekcii Kalkulačka v React - Tvorba komponentov, si postupne vytvoríme komponenty na zadanie čísla, vypísanie výsledku a pre formulár kalkulačky.
