Lekce 4 - Kalkulačka v React - Komponenty

V minulé lekci, Kalkulačka v React - Vytvoření projektu, jsme vytvořili React projekt pro první jednoduchou kalkulačku pomocí Node.js.

A teď se pojďme konečně pustit do úprav zdrojového kódu!

HTML kostra `public/index.html`

Začneme logicky s hlavní HTML kostrou naší aplikace, kterou 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 v 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 se vstupním bodem do naší komponentové struktury.

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/

Soubor `src/index.js`

Co nám teď oproti minulému projektu chybí, je kód na vykreslení komponenty aplikace do naší HTML struktury. To nyní nalezneme v samostatném souboru, který je již vygenerovaný a není jej třeba nijak upravovat:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Z hlediska funkčnosti to není nic, co bychom už neznali. Za povšimnutí ale stojí použití JS import z ES6+, díky kterým můžeme soubory naší aplikace skládat mnohem pohodlnějším a přehlednějším způsobem. Můžeme tedy zapomenout na nějaké vkládání mnoha tagů <script> do HTML struktury, protože takto si jednoduše vložíme, co potřebujeme, přímo tam, kde to potřebujeme

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 si rozmyslet jeho HTML strukturu
posléze strukturu vhodně rozdělit do React komponent
přidat požadovanou funkcionalitu pomocí manipulace s jejich vlastnostmi a stavem

1. Rozmyšlení HTML struktury

Začněme s prvním bodem - jak tedy bude vypadat struktura naší aplikace?

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="x">
        První číslo: <input id="x" type="number" name="x" required  />
    </label>
    <label for="y">
        Druhé číslo: <input id="y" type="number" name="y" 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>

Výsledná stránka bude vypadat asi takto:

2. Rozdělení HTML struktury do React komponent

Nyní je čas rozdělit tuto strukturu na React komponenty a následně ji znovu 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:

Zadávání čísla (tu použijeme pak 2x, protože budeme zadávat 2 čísla)
Zadávání operace
Zobrazení výsledku
Formulář s kalkulačkou, kam výše uvedené komponenty vložíme.
Celá aplikace - Sem vložíme komponentu s celou kalkulačkou.

Zní to dobře, tak pojďme začít těmi nejmenšími komponentami a postupně je 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/.

Komponenta pro zadávání čísla - `NumberInput.js`

V nové složce calculator/ vytvoříme soubor NumberInput.js, který bude naší komponentou pro číselný vstup:

let NumberInput = () => {

    return (
    //htmlFor = JSX jej přeloží jako HTML atribut for
        <label htmlFor="x">
            První číslo
            <input
                id="x"
                type="number"
                name="x"
                required
            />
        </label>
    );
};

export default NumberInput;

Oproti minulé lekci jsme pro deklaraci komponenty použili místo function takzvané arrow functions. Není to nutné, můžeme psát funkce i "klasicky", ale syntaxe je kratší.

Dále vracíme výsledný HTML kód komponenty, což je element <input> a vše, co k němu patří. Možná jste si všimli, že místo atributu for u <label> použijeme htmlFor. To proto, že když mixujeme HTML přímo do JS, 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 ale 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.

Do komponenty jsme prozatím nastavili popisek na "První číslo", i když ji budeme používat i pro zadání druhého čísla. Také jsme napsali za id a name statické hodnoty, které pak dále v kurzu nahradíme proměnnými.

Komponenta pro zobrazení výsledku - `Result.js`

Dále ve složce calculator/ vytvoříme soubor Result.js, který bude komponentou pro výsledek. Ten si zobrazíme jednoduše v elementu <div> a opět v něm zatím vypíšeme nějakou statickou hodnotu, např. 10:

const Result = () => {
     return <div className="Result">Výsledek je: 10</div>;
};

export default Result;

Jelikož dále budeme chtít na výsledek aplikovat CSS, označíme si ho pomocí HTML atributu class. Ovšem opět se jedná o v JS rezervované slovo, takže místo toho v JSX použijeme className. 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 jako má komponenta.

Komponenta s formulářem kalkulačky - `CalculatorForm.js`

Nyní, když už máme příslušné části, můžeme vytvořit komponentu našeho formuláře CalculatorForm.js, kterou opět vložíme do podsložky calculator/ v src/. Ta bude složená z námi vytvořených komponent výše, a vypadat bude takto:

import NumberInput from "./NumberInput";
import Select from "react-select";
import Result from "./Result";

const CalculatorForm = () => {
    return (
        <div>
            <form className="CalculatorForm">
                <NumberInput />
                <NumberInput />
                <Select options={[]} />
                <input type="submit" value="Spočítej" />
            </form>
            <Result />
        </div>
    );
};
export default CalculatorForm;

Zde vidíme krásné a jednoduché složení komponent. Je pravda, že zde máme dvakrát stejně pojmenovaný číselný vstup, ale to pak samozřejmě napravíme Možná se divíte, kde se vzala komponenta <Select />. Importovali jsme ji z knihovny react-select, protože proč znovuvynalézat kolo, když můžeme využívat bohaté zásoby Reactu. Jde však o externí komponentu, a proto si ji nesmíme zapomenout nainstalovat pomocí příkazu:

npm i [email protected]^5.6.1

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 se tedy podíváme na samotnou komponentu naší aplikace, do které naší kalkulačku vložíme:

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, měli bychom si však všimnout vložení hodnoty proměnné z JS do JSX. Vidíme, vkládáme titulek title z konstanty pomocí syntaxe {}, a je to opět velice přímočaré.

CSS pro naši aplikaci se dají také vložit přímo za pomoci JS import.

A to je vše. Když si teď spustíme aplikaci, v prohlížeči se zobrazí odpovídající HTML struktura:

Your page

localhost

V příloze jsou k dispozici složky public/ a src/ s kódy vytvořenými podle této lekce.

Zobrazit variantu s třídami

`NumberInput.js`

import { Component } from 'react';

export default class NumberInput extends Component {
    render() {
        return (
            <label htmlFor="x">
                První číslo:
                <input id="x" type="number" name="x" required />
            </label>
        );
    }
}

V této variantě je navíc komponenta pro výběr operace OperationSelect.js, kterou ve variantě s funkcemi nemáme. Ukážeme si ji ale, abychom variantu se třídami měli kompletní:

`OperationSelect.js`

import { Component } from 'react';

export default class OperationSelect extends Component {
    render() {
        return (
            <label htmlFor="operation">
                Operace:
                <select id="operation" name="operation" required>
                    <option value="">--Vyberte operaci--</option>
                    <option value="add">Sčítání</option>
                    ...
                </select>
            </label>
        );
    }
}

`Result.js`

import { Component } from 'react';

export default class Result extends Component {
    render() {
        return <div className="Result">Výsledek je: 10</div>;
    }
}

`CalculatorForm.js`

import { Component } from 'react';
import NumberInput from './NumberInput';
import OperationSelect from './OperationSelect';

export default class CalculatorForm extends Component {
    render() {
        return (
            <form className="CalculatorForm">
                <NumberInput />
                <NumberInput />
                <OperationSelect />
                <input type="submit" value="Spočítej" />
            </form>
        );
    }
}

`App.js`

import React, { Component } from 'react';
import CalculatorForm from './calculator/CalculatorForm';
import Result from './calculator/Result';
import './App.css';

export default class App extends Component {


    render() {
        const title = 'React kalkulačka';

        return (
            <div className="App">
                <h1>{title}</h1>
                <CalculatorForm />
                <Result />
            </div>
        );
    }
}

Příště, v lekci Kalkulačka v React - Vlastnosti v React, si vysvětlíme koncept vlastností props. Ukážeme si, jak se vlastnosti zadávají v HTML kódu, načítají v komponentě a destrukturalizují.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 72x (36.14 kB)
Aplikace je včetně zdrojových kódů

Článek pro vás napsal Jindřich Máca

Uživatelské hodnocení:

48 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

Lekce 4 - Kalkulačka v React - Komponenty

HTML kostra public/index.html

Soubor src/index.js

React komponenty

1. Rozmyšlení HTML struktury

2. Rozdělení HTML struktury do React komponent

Komponenta pro zadávání čísla - NumberInput.js

Komponenta pro zobrazení výsledku - Result.js

Komponenta s formulářem kalkulačky - CalculatorForm.js

Komponenta celé aplikace - src/App.js

NumberInput.js

OperationSelect.js

Result.js

CalculatorForm.js

App.js