Java týden Java týden
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací
Pouze tento týden slevy až 80 % na programování v Javě

Lekce 2 - První aplikace v React

JavaScript React První aplikace v React

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, , jsme si představili knihovnu React a popsali její základní vlastnosti. V dnešním tutoriálu si ukážeme tvorbu první jednoduché aplikace, na níž si detailněji vysvětlíme základy tvorby aplikací za použití této knihovny.

Volba aplikace

Výběr projektu, na kterém bychom si mohli demonstrovat vše potřebné, nebyl úplně snadný, ale nakonec se vítězem stala jednoduchá kalkulačka, jejíž screenshot vidíte níže. Takže když již víme v čem a co budeme dělat, tak hurá do práce! :)

React kalkulačka

Vytvoření projektu

Minule jsme si ukázali úplný základ pro vytvoření React aplikace. Pro dnešní projekt ale použijeme trochu pokročilejší postup, jehož výstup je aplikovatelný i pro produkční prostředí, tedy reálné nasazení aplikace na internet. Pro tento postup již použijeme jako nástroj Node.js, zmíněný v minulé lekci. Je to poměrně jednoduché. Stačí ho mít nainstalovaný a pomocí něj spustit jediný příkaz ve složce, kam chcete umístit projekt. Jako parametr uvedeme název projektu:

npx create-react-app calculator

To je vše. Nyní počkejte na dokončení instalace, jednoduše si otevřete projekt ve vámi vybraném IDE nebo textovém editoru a můžeme se pustit do programování.

Spuštění aplikace

Bylo by dobré vyzkoušet si jak aplikaci nyní spustit. To co jsme nainstalovali je totiž kompletní základ React aplikace poháněný lokálním serverem s podporou kontinuálního překladu JSX, který nám mimo jiné nabízí možnost finální verzi aplikace sestavit pro produkční prostředí. Pro spuštění stačí uvnitř složky s projektem opět zadat příkaz:

npm start

Ten nám tedy spustí naši aplikaci v rámci lokálního serveru standardně na adrese http://localhost:3000/ a rovnou i otevře ve výchozím prohlížeči. Výsledek hned po instalaci by měl vypadat nějak takto:

První React aplikace

Server navíc během svého běhu hlídá změny v souborech aplikace a pokud se něco změní, automaticky aplikaci znovu načte. Nám tedy stačí pouze upravovat kód a instantně vidíme výsledky našich změn přímo v prohlížeči.

Struktura projektu

Dále by nebylo špatné ještě si trochu popsat novou strukturu projektu, se kterou budeme pracovat:

  • node_modules/ - Nainstalované nástroje pro naší aplikaci, které si ukládá npx (Node.js).
  • public/ - Složka pro umisťování veřejně dostupných zdrojů jako je index.html a dále např. obrázky apod.
    • index.html - Hlavní vstupní soubor do naší webové aplikace. Obsahuje základ struktury našeho HTML.
  • src/ - Zdrojové kódy naší aplikace. Zde budeme hlavně programovat!
    • App.css - Sem si pro jednoduchost umístíme všechny CSS styly naší aplikace.
    • App.js - Definice hlavní React komponenty naší aplikace. S tou budeme za chvíli pracovat.
    • index.js - Soubor, který zavádí React komponentu naší aplikace do HTML struktury.
    • ... - Další, pro nás momentálně nepodstatné, soubory naší aplikaci, které je možné i promazat.
  • ... - Konfigurační soubory projektu vytvořené pomocí npx. Prozatím si bohatě vystačíme s výchozím nastavením projektu.

Editace projektu

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

public/index.html

Začneme logicky s hlavní HTML kostrou naší aplikace:

<!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íte, že se jedná o standardní strukturu HTML stránky se vstupním bodem do naší komponentové struktury.

Co pak 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/ ;)

src/index.js

Co nám teď oproti minule chybí je kód na vykreslení komponenty aplikace do naší HTML struktury, který byl ale pouze jednoduše přesunut do samostatného souboru:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Vykreslení instance aplikační komponenty do HTML struktury.
ReactDOM.render(<App />, document.getElementById('root'));

Jak vidíte, 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ádal mnohem pohodlnějším a přehlednějším způsobem. Můžete tedy zapomenout na nějaké vkládání mnoha tagů <script> do HTML struktury, protože takto si jednoduše vložíte co potřebujete přímo tam, kam to potřebujete :)

Komponenty

Při práci s knihovnou React je našim hlavním zaměřením tvorba uživatelského rozhraní (UI) aplikace. Proto není před zahájením práce na škodu nejdříve si rozmyslet jeho strukturu, posléze ji vhodně rozdělit do React komponent a nakonec k nim přidat požadovanou funkcionalitu pomocí manipulace s jejich vlastnostmi a stavem. Jak tedy bude vypadat struktura naší aplikace?

Struktura

Jak vidíte na obrázku výše, rozložení naší kalkulačky je poměrně jednoduché. Jeho HTML struktura by mohla vypadat nějak takto:

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

Dobrá, nyní je čas rozdělit tuto strukturu na React komponenty a následně ji znovu pomocí nich poskládat.

Viděl bych to tak, že pro kvalitní demonstraci použití knihovny React to rozdělíme hezky na drobno. Takže jedna komponenta pro číselné vstupy a další pro výběr operace. Ty potom složíme do komponenty formuláře kalkulačky. A nakonec formulář spolu s komponentou pro výsledek vložíme do komponenty naší aplikace. Zní to dobře, tak pojďme začít těmi nejmenšími a postupně je skládat.

Pro tyto naše nové komponenty si čistě kvůli přehlednosti vytvoříme složku src/calculator/.

src/calculator/Num­berInput.js

Začneme komponentou pro číselný vstup:

import React, { Component } from 'react';

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

Jak vidíte, definice za pomocí JS třídy je stejná jako v minulé lekci a díky použití JSX sem můžeme náš HTML kód rovnou vložit.

Bystřejší z vás už asi postřehli, že je zde jedna změna. Místo HTML atributu for je u <label> použit htmlFor. To proto, že když mixujeme HTML přímo do JS, tak 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 for.

src/calculator/O­perationSelec­t.js

Pokračovat budeme ve stejném duchu komponentou pro výběr operace:

import React, { Component } from 'react';

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

src/calculator/Re­sult.js

Dále se podíváme na komponentu pro výsledek:

import React, { Component } from 'react';

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

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.

src/calculator/Cal­culatorForm.js

Nyní, když už máme příslušné části, můžeme složit komponentu našeho formuláře:

import React, { 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>
        );
    }
}

Zde vidíme krásné a jednoduché složení komponent. Je pravda, že zde máme 2x stejně pojmenovaný číselný vstup, ale to pak samozřejmě napravíme :)

src/App.js

Nakonec se tedy podíváme na samotnou komponentu naší aplikace, kterou upravíme následovně:

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>
        );
    }
}

Opět nic složitého, akorát jsem si dovolil ukázku vložení hodnoty proměnné z JS do JSX. Vidíte, že se to dělá pomocí syntaxe {} a je to opět velice přímočaré.

Dále si můžete povšimnout, že 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íte aplikaci, měli byste v prohlížeči vidět poskládanou odpovídající HTML strukturu.

Příště, v lekci Komponenty React kalkulačky, se podíváme detailněji na vlastnosti i stavy našich komponent pro kalkulačku :)


 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
1 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. :-)
Miniatura
Všechny články v sekci
React
Miniatura
Následující článek
Komponenty React kalkulačky
Aktivity (5)

 

 

Komentáře

Avatar
Petr Novák
Člen
Avatar
Petr Novák:1. března 22:24

Ahoj.Zřejmě došlo k chybnému zařaení článku,který by měl být v sekci Javascript/React ale jen v sekci Javascript a není vidět.

 
Odpovědět 1. března 22:24
Avatar
Petr Novák
Člen
Avatar
Petr Novák:1. března 22:25

To samé hbned v úvodu článku

V minulé lekci, Regulární výrazy v JavaScriptu,

měl být odkaz na Úvod do Reactu

 
Odpovědět 1. března 22:25
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Petr Novák
Jindřich Máca:1. března 23:02

Díky! Článek byl omylem publikován do špatné sekce, ale už jsem to přehodil. ;)

 
Odpovědět 1. března 23:02
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.