Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Komponenta NumberInput v React - Základy React

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 vstupu
  • label - Text popisku číselného vstupu
  • value - Zadaná hodnota
  • onChange - 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:

Komponenta Result - Základy React

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:

Formulář kalkulačky - Základy React

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:

Jednoduchá kalkulačka v React - Základy React

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.

Předchozí článek
Kalkulačka v React - Projekt a rozdělení na komponenty
Všechny články v sekci
Základy React
Přeskočit článek
(nedoporučujeme)
Kalkulačka v React - Utility funkce a stavy
Článek pro vás napsal Jindřich Máca
Avatar
Uživatelské hodnocení:
156 hlasů
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Aktivity