Lekce 7 - Kalkulačka v React - Tvorba komponent
V minulé lekci, Kalkulačka v React - Projekt a rozdělení na komponenty, jsme vytvořili základ pro první jednoduchou kalkulačku za použití knihovny React.
V tomto React tutoriálu si postupně vytvoříme komponenty pro zadání čísla, vypsání výsledku a pro formulář kalkulačky.
Komponenta pro
zadávání čísla - NumberInput.js
V nové složce src/calculator/
vytvoříme soubor
NumberInput.js
, který bude naší komponentou pro
číselný vstup:
Bude tedy vykreslovat elementy <input>
,
<label>
a obsluhovat událost změny čísla ve vstupním
poli. Kód komponenty bude následující:
function NumberInput({ name, label, value, onChange }) { return ( <label htmlFor={name}> {label} <input onChange={onChange} id={name} value={value} type="number" name={name} required /> </label> ); } export default NumberInput;
Výhodou této komponenty je, že si generuje i <label>
a
nastavuje atributy, které bychom jinak museli nastavovat pro každé zadání
čísla v aplikaci znovu.
Hned v deklaraci funkce komponenty jsme si destrukturalizovali vlastnosti. Ty komponentě nastavíme, až ji budeme vkládat do komponenty kalkulačky. Jsou to:
name
- Název číselného vstupulabel
- Text popisku číselného vstupuvalue
- Zadaná hodnotaonChange
- Funkce, kterou komponenta zavolá při změně hodnoty
Dále vracíme výsledný HTML kód komponenty, který je rozepsaný na více
řádek a proto je zapsaný v závorkách ()
. Také si všimněte,
že je celý HTML kód uzavřený v jediném HTML elemementu (zde
<label>
), jinak by totiž JSX zápis nebyl validní.
Možná jste si také všimli, že místo atributu for
u
<label>
používáme htmlFor
. To proto, že
když mixujeme HTML přímo do JavaScriptu, nesmíme zapomenout, že
for
je v JS rezervované klíčové slovo pro cyklus. JSX tedy
místo něj zavádí náhradu, která se do výsledného HTML přeloží
správně jako HTML atribut for
. Ten, jak víme, určuje, ke
kterému formulářovému prvku je štítek (<label>
)
vázán. Zde bychom jej ani zadávat nemuseli, protože vstupní pole je
vložené přímo v labelu, ale ukázali jsme si, jak se v JSX zapisuje.
Komponenta pro zobrazení
výsledku - Result.js
Ve složce src/calculator/
vytvoříme další soubor,
Result.js
, který bude komponentou pro
výsledek:
Výsledek si zobrazíme jednoduše v elementu <div>
. Kód
komponenty bude následující:
function Result({value}) { if (value !== null) return <div className="Result">Výsledek: {value}</div>; return null; } export default Result;
Výsledek má jen jednu vlastnost a tou je vypisovaná hodnota.
Jelikož dále budeme chtít na výsledek aplikovat CSS, přidáme mu HTML
atribut class
. Ovšem opět se jedná v JS o rezervované slovo,
takže v JSX namísto toho použijeme atribut className
, který se
pak vyrenderuje jako atribut class
. Ten se také používá v
souvislosti s označením samotných komponent, a proto za účelem
přehlednosti zvolíme stejný název CSS třídy, jako je název
komponenty.
Dále stojí za povšimnutí, že v komponentě vracíme null
,
pokud výsledek není zadaný a my nic nevyrenderujeme. Pokud komponenta nemá
nic vykreslit, měla by vracet null
- přeci jen nějakou hodnotu
vracet musí.
Komponenta s
formulářem kalkulačky - CalculatorForm.js
Nyní, když už máme příslušné součásti, můžeme vytvořit
centrální komponentu aplikace - formulář CalculatorForm.js
.
Soubor opět vytvoříme do podsložky calculator/
v
src/
. Formulář s kalkulačkou bude tvořený elementem
<form>
. Dále bude obsahovat námi výše vytvořené
komponenty a samozřejmě odesílací tlačítko typu submit
, aby
se formulář dal odeslat:
Kód komponenty bude následující:
import NumberInput from "./NumberInput"; import Select from "react-select"; import Result from "./Result"; function CalculatorForm() { return ( <div> <form className="CalculatorForm"> <NumberInput name="a" label="První číslo:" /> <NumberInput name="b" label="Druhé číslo:" /> <Select options={[]} /> <input type="submit" value="Spočítej" /> </form> <Result /> </div> ); } export default CalculatorForm;
Potřebné komponenty jsme na začátku souboru naimportovali.
Při vykreslení formuláře vidíme krásné a jednoduché složení React
aplikace z komponent, které jsme vytvořili před chvílí. Všimněte si, že
jsme při vložení našich komponent do formuláře nastavili některé jejich
vlastnosti. Zbytek vlastností, např. hodnota čísel nebo výsledek, se bude
nastavovat podle stavů kalkulačky, které přidáme dále v kurzu. Vidíme zde
i použití komponenty <Select />
, kterou jsme při
založení projektu naimportovali. Selectu jsme nastavili jeho možnosti
options
zatím na prázdné pole []
, možnosti k
výběru dodáme opět později v kurzu.
Komponenta celé aplikace -
src/App.js
Nakonec tedy upravíme samotnou komponentu naší aplikace. Odmažeme zbytečné zbytky výchozí React šablony a vložíme sem náš formulář s kalkulačkou:
import CalculatorForm from "./calculator/CalculatorForm"; import './App.css'; const title = "React kalkulačka"; const App = () => { return ( <div className="App"> <h1>{title}</h1> <CalculatorForm /> </div> ); } export default App;
Opět nic složitého. Jediná zajímavá věc v kódu je nastavení hodnoty
nadpisu přes konstantu pomocí syntaxe {}
, a je to opět velice
přímočaré.
A to je vše. Když si teď spustíme aplikaci, v prohlížeči se zobrazí odpovídající HTML struktura:
V příští lekci, Kalkulačka v React - Utility funkce a stavy, se naučíme používat utility funkce a
definujeme stavy naší aplikace pomocí React hook useState()
.
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.