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 npm create vite vytvoríme nový React projekt s názvom
calculator:
Windows PowerShell PS C:\Users\sdrac\Dropbox> npm create vite@^6.5.0 calculator -- --template react
Ďalej prejdeme do priečinka projektu príkazom cd:
Windows PowerShell PS C:\Users\sdrac\Dropbox> cd calculator
A nainštalujeme potrebné balíčky príkazom npm install:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm install
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.10.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.10.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 run dev:
Windows PowerShell PS C:\Users\sdrac\Dropbox\calculator> npm run dev
Priečinok calculator/ otvoríme vo VS Code.
HTML kostra index.html
Súbor index.html v koreňovom priečinku sme doteraz
neupravovali. Jedná sa o samotnú hlavnú HTML stránku, do ktorej sa potom
vkladá komponent App. Teraz tejto stránke zmeníme titulok a
pridáme krátky popis. Kód stránky upravíme do nasledujúcej podoby:
<!doctype html> <html lang="en"> <head> <!-- Essential information to the browser and an icon --> <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" /> <!-- Application description and title --> <meta name="description" content="A simple calculator using the React library by Ictdemy.com"> <title>React calculator | Ictdemy.com</title> </head> <body> <!-- The root of our application's component structure --> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>
Vidíme, že ide 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ží. Na konci elementu
<body> si môžeme všimnúť načítanie skriptu zo súboru
main.jsx, ktorý práve ono vkladanie komponentu App
rieši.
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:
- zadávanie čísla – komponent
NumberInput(použijeme dvakrát), - zadávanie operácie – komponent
Select, - zobrazenie výsledku – komponent
Result, - formulár kalkulačky – komponent
CalculatorForm, - samotná aplikácia – komponent
App.
Ukážme si pre lepšiu predstavu hlavné komponenty formulára na obrázku:
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.
