ITnetwork summer 2020
80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

2. diel - Prvé aplikácie v React

V minulej lekcii, , sme si predstavili knižnicu React a popísali jej základné vlastnosti. V dnešnom tutoriále si ukážeme tvorbu prvé jednoduché aplikácie, na ktorej si detailnejšie vysvetlíme základy tvorby aplikácií za použitia tejto knižnice.

Voľba aplikácie

Výber projektu, na ktorom by sme si mohli demonštrovať všetko potrebné, nebol úplne jednoduchý, ale nakoniec sa víťazom stala jednoduchá kalkulačka, ktorej screenshot vidíte nižšie. Takže keď už vieme v čom a čo budeme robiť, tak hurá do práce! :)

React kalkulačka

Vytvorenie projektu

Minule sme si ukázali úplný základ pre vytvorenie React aplikácie. Pre dnešný projekt ale použijeme trochu pokročilejšie postup, ktorého výstup je aplikovateľný aj pre produkčné prostredie, teda reálne nasadenie aplikácie na internet. Pre tento postup už použijeme ako nástroj Node.js, spomínaný v minulej lekcii. Je to pomerne jednoduché. Stačí ho mať nainštalovaný a pomocou neho spustiť jediný príkaz v priečinku, kam chcete umiestniť projekt. Ako parameter uvedieme názov projektu:

npx create-react-app calculator

To je všetko. Teraz počkajte na dokončenie inštalácie, jednoducho si otvorte projekt vo vami vybranom IDE alebo textovom editore a môžeme sa pustiť do programovania.

Spustení aplikácie

Bolo by dobré vyskúšať si ako aplikáciu teraz spustiť. To čo sme nainštalovali je totiž kompletný základ React aplikácie poháňaný lokálnym serverom s podporou kontinuálneho prekladu JSX, ktorý nám okrem iného ponúka možnosť finálnu verziu aplikácie zostaviť pre produkčné prostredie. Pre spustenie stačí vnútri zložky s projektom opäť zadať príkaz:

npm start

Ten nám teda spustí našu aplikáciu v rámci lokálneho servera štandardne na adrese http://localhost:3000/ a rovno aj otvorí v predvolenom prehliadači. Výsledok hneď po inštalácii by mal vyzerať nejako takto:

Prvé React aplikácie

Server navyše počas svojho behu stráži zmeny v súboroch aplikácie a ak sa niečo zmení, automaticky aplikáciu znova načíta. Nám teda stačí len upravovať kód a instantne vidíme výsledky našich zmien priamo v prehliadači.

Štruktúra projektu

Ďalej by nebolo zlé ešte si trochu popísať novú štruktúru projektu, s ktorou budeme pracovať:

  • node_modules/ - Nainštalované nástroje pre našu aplikáciu, ktoré si ukladá NPX (Node.js).
  • public/ - Komponent umiestňovanie verejne dostupných zdrojov ako je index.html a ďalej napr. obrázky a pod. index.html - Hlavný vstupný súbor do našej webovej aplikácie. Obsahuje základ štruktúry nášho HTML.
  • index.html - Hlavný vstupný súbor do našej webovej aplikácie. Obsahuje základ štruktúry nášho HTML.
  • src/ - Zdrojové kódy našej aplikácie. Tu budeme hlavne programovať! App.css - Sem si pre jednoduchosť umiestnime všetky CSS štýly našej aplikácie.

    App.js - Definícia hlavné React komponenty našej aplikácie. S tou budeme za chvíľu pracovať.

    index.js - Súbor, ktorý zavádza React komponent našej aplikácie do HTML štruktúry.

    ... - Ďalšie, pre nás momentálne nepodstatné, súbory našej aplikácii, ktoré je možné aj premazať.

  • App.css - Sem si pre jednoduchosť umiestnime všetky CSS štýly našej aplikácie.
  • App.js - Definícia hlavné React komponenty našej aplikácie. S tou budeme za chvíľu pracovať.
  • index.js - Súbor, ktorý zavádza React komponent našej aplikácie do HTML štruktúry.
  • ... - Ďalšie, pre nás momentálne nepodstatné, súbory našej aplikácii, ktoré je možné aj premazať.
  • ... - Konfiguračné súbory projektu vytvorené pomocou NPX. Zatiaľ si bohato vystačíme s predvolenými nastaveniami projektu.

Editácia projektu

A teraz sa poďme konečne pustiť do úprav zdrojového kódu!

Public / index.html

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Začneme logicky s hlavnou HTML kostrou našej aplikácie:

<!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 sa jedná o štandardnú štruktúru HTML stránky so vstupným bodom do našej komponentovej štruktúry.

Čo potom stojí za zmienku je vychytávka v podobe %PUBLIC_URL%, ktorá nám vždy správne doplní cestu do našej zložky public/ ;)

Src / index.js

Čo nám teraz oproti minule chýba je kód na vykreslenie komponenty aplikácie do našej HTML štruktúry, ktorý bol ale len jednoducho presunutý do samostatného súboru:

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

Ako vidíte, z hľadiska funkčnosti to nie je nič, čo by sme už nepoznali. Za povšimnutie ale stojí použitie JS import z ES6 +, vďaka ktorým môžeme súbory našej aplikácie skladal oveľa pohodlnejším a prehľadnejším spôsobom. Môžete teda zabudnúť na nejaké vkladanie mnohých tagov <script> do HTML štruktúry, pretože takto si jednoducho vložíte čo potrebujete priamo tam, kam to potrebujete :)

Komponenty

Pri práci s knižnicou React je našim hlavným zameraním tvorba užívateľského rozhrania (UI) aplikácie. Preto nie je pred začatím práce na škodu najskôr si rozmyslieť jeho štruktúru, neskôr ju vhodne rozdeliť do React komponentov a nakoniec k nim pridať požadovanú funkcionalitu pomocou manipulácie s ich vlastnosťami a stavom. Ako teda bude vyzerať štruktúra našej aplikácie?

Štruktúra

Ako vidíte na obrázku vyššie, rozloženie našej kalkulačky je pomerne jednoduché. Jeho HTML štruktúra by mohla vyzerať nejako 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á, teraz je čas rozdeliť túto štruktúru na React komponenty a následne ju znova pomocou nich poskladať.

Videl by som to tak, že pre kvalitné demonštráciu použitia knižnice React to rozdelíme pekne na drobno. Takže jeden komponent pre číselné vstupy a ďalšie pre výber operácie. Tie potom zložíme do komponenty formulára kalkulačky. A nakoniec formulár spolu s komponentom pre výsledok vložíme do komponenty našej aplikácie. Znie to dobre, tak poďme začať tými najmenšími a postupne ich skladať.

Pre tieto naše nové komponenty si čisto kvôli prehľadnosti vytvoríme zložku src/calculator/.

Src / calculator / NumberInput.js

Začneme komponentom pre čí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>
        );
    }
}

Ako vidíte, definície za pomocou JS triedy je rovnaká ako v minulej lekcii a vďaka použitiu JSX sem môžeme náš HTML kód rovno vložiť.

Bystrejší z vás už asi postrehli, že je tu jedna zmena. Namiesto HTML atribútu for je u <label> použitý htmlFor. To preto, že keď mixujeme HTML priamo do JS, tak nesmieme zabudnúť, že for je v JS rezervované kľúčové slovo pre cyklus. JSX teda miesto neho zavádza náhradu, ktorá sa ale do výsledného HTML preloží správne ako for.

Src / calculator / OperationSelect.js

Pokračovať budeme v rovnakom duchu komponentom pre výber operácie:

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 / Result.js

Ďalej sa pozrieme na komponent pre výsledok:

import React, { Component } from 'react';

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

Keďže ďalej budeme chcieť na výsledok aplikovať CSS, označíme si ho pomocou HTML atribútu class. Ovšem opäť sa jedná ov JS rezervované slovo, takže namiesto toho v JSX použijeme className. Ten sa tiež používa v súvislosti s označením samotných komponentov a preto na účely prehľadnosti zvolíme rovnaký názov ako má komponent.

Src / calculator / CalculatorForm.js

Teraz, keď už máme príslušnej časti, môžeme zložiť komponent nášho formulára:

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

Tu vidíme krásne a jednoduché zloženie komponentov. Je pravda, že tu máme 2x rovnako pomenovaný číselný vstup, ale to potom samozrejme napravíme :)

Src / App.js

Nakoniec sa teda pozrieme na samotnú komponent našej aplikácie, ktorú upravíme nasledovne:

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äť nič zložité, akurát som si dovolil ukážku vloženie hodnoty premennej z JS do JSX. Vidíte, že sa to robí pomocou syntaxe {} a je to opäť veľmi priamočiare.

Ďalej si môžete všimnúť, že CSS pre našu aplikáciu sa dajú tiež vložiť priamo za pomoci JS import.

A to je všetko. Keď si teraz spustíte aplikáciu, mali by ste v prehliadači vidieť poskladanú zodpovedajúce HTML štruktúru.

Nabudúce, v lekcii Komponenty React kalkulačky , sa pozrieme detailnejšie na vlastnosti i stavy našich komponentov pre kalkulačku :)


 

Všetky články v sekcii
React
Článok pre vás napísal Jindřich Máca
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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 (1)

 

 

Komentáre

Avatar
Petr Novák
Člen
Avatar
Petr Novák:1.3.2019 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.

 
Odpovedať
1.3.2019 22:24
Avatar
Petr Novák
Člen
Avatar
Petr Novák:1.3.2019 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

 
Odpovedať
1.3.2019 22:25
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovedá na Petr Novák
Jindřich Máca:1.3.2019 23:02

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

 
Odpovedať
1.3.2019 23:02
Avatar
Lukáš Korel:29.9.2019 13:28

Ahoj, asi něco dělám špatně při nastavení kódování, v kořenovém index.html mám <meta charset="utf-8">, ale diakritika se mi v prohlížeči (chrome i edge) zobrazuje takto: Prvn� ��slo
Něvíte co s tím?
Děkuji

 
Odpovedať
29.9.2019 13:28
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovedá na Lukáš Korel
Jindřich Máca:29.9.2019 13:45

Ahoj a v jakém kódování máš uložený ten soubor/y? :)

 
Odpovedať
29.9.2019 13:45
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Odpovedá na Jindřich Máca
Lukáš Korel:29.9.2019 14:29

Už ten problém asi vidím, ANSI, jen nevím jak všechny soubory v projektu předělat do UTF-8, používám Visual Studio Cummunity

 
Odpovedať
29.9.2019 14:29
Avatar
Karel Paulík:26. júna 12:16

Ahoj, kde je uvedeno, že index.html má použít index.js? Dokud nebyl soubor rozdělen, bylo to jasné, ale nyní mi vazba index.js do index.html chybí.

 
Odpovedať
26. júna 12:16
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovedá na Karel Paulík
Jindřich Máca:26. júna 12:58

Ahoj, odpověď tkví v nástroji https://github.com/…te-react-app, který byl použit pro vytvoření struktury projektu. Ten se totiž následně stará i o jeho sestavení s minimální configurací a nutností zásahu uživatele. :D

 
Odpovedať
26. júna 12:58
Avatar
Karel Paulík:26. júna 15:36

Předpokládám, že za tím bude webpack, který je součástí create-react-app.

 
Odpovedať
26. júna 15:36
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 9 správy z 9.