1. diel - Úvod do React
Vitajte pri prvej lekcii online kurzu programovania v populárnej javascriptovej knižnici React, niekedy tiež zvanej React.js. React sa využíva na tvorbu moderných používateľských rozhraní, rozdeľuje aplikáciu do komponentov, optimalizuje vykresľovanie a uľahčuje prácu ďalšími spôsobmi, ktoré si v kurzoch vysvetlíme. Vyskúšame si základné princípy Reactu vrátane práce s webovým API a vytvoríme niekoľko reálnych aplikácií, okrem iného napr. prehliadač pokémonov:
V dnešnom React tutoriále si knižnicu predstavíme spolu so základnými princípmi, ktoré už v budúcej lekcii začneme využívať.
Minimálne požiadavky kurzu
Než sa pustíme do samotnej práce s React, treba ešte spomenúť vyžadované znalosti. Ku všetkým máme tu na sieti kurzy, takže pokiaľ niečo z toho náhodou nepoznáte, absolvujte prosím najskôr príslušný kurz.
Budete nevyhnutne potrebovať:
- Základy JavaScriptu.
- Základy HTML a CSS pre tvorbu používateľského rozhrania
Výhodou sú znalosti:
Úvod do React
React je open-source javascriptová knižnica pre tvorbu používateľského rozhrania (anglicky UI ako User Interface). Vyvinula ju spoločnosť Meta (predtým Facebook).
Určite ste si už skúsili, že manuálna obsluha formulárov v JavaScripte, ich validácia alebo obnovovanie rôznych častí stránky novými dátami, nie sú práve triviálne úlohy. S týmto všetkým nám React pomôže a vo výsledku budeme mať aplikáciu vytvorenú rýchlejšie a kvalitnejšie. Dôležité je tiež rozdelenie aplikácie do komunikujúcich komponentov, čím sa zjednoduší.
Webové API
Používateľské rozhrania v React typicky komunikujú s nejakým webovým API serverom, z ktorého získavajú dáta, prípadne mu dáta posielajú. Vďaka tomu môžeme React aplikáciu jednoducho používať na viacerých zariadeniach a máme stále aktuálne dáta, pretože sú uložené na serveri. Táto serverová časť aplikácie môže byť napísaná aj v JavaScripte, napr. v prostredí Node.js. React sa však používa prakticky s akýmkoľvek ďalším programovacím jazykom bežiacim s databázou na serveri (Java, C#, PHP...).
React je knižnica, nie komplexný framework
Na rozdiel od rôznych kompletných frameworkov (napr. Angular) sa React sústredí na jednu špecifickú oblasť - UI. Ak ste oboznámení s konceptom MVC architektúry, React tvorí práve a iba view, teda pohľadovú vrstvu aplikácie, ktorá prezentuje dáta používateľovi. React sa z tohto dôvodu s obľubou používa s ďalšími knižnicami a existuje okolo neho celý ekosystém. Ten je potom predmetom nadväzujúcich kurzov. Na účely tohto kurzu si však vystačíme s takmer čistým Reactom.
React je v súčasnej dobe na trhu práce jednou z najobľúbenejších a najžiadanejších technológií. Určite je teda skvelou voľbou ako ďalšia znalosť webového programátora, ktorú je možné využiť na front-end väčšiny bežných aplikácií.
Využitie Reactu
Keďže je React knižnicou úzko zameranou iba na používateľské rozhranie aplikácie, kombinuje sa v rámci celej aplikácie s ďalšími knižnicami so značne rozdielnym prístupom aj architektúrou. React sa potom v rámci týchto použití vždy stará len o vykreslenie používateľského rozhrania. Pre lepšiu predstavu si uveďme niekoľko príkladov:
- Tvorba tzv. single-page aplikácií (SPA). SPA je webová stránka v React, ktorá komunikuje s webovým API. Aplikácia sa načíta len raz a potom reaguje už bez prenačítania stránky, ako keby jediná stránka obsahovala celú aplikáciu, od toho je odvodený aj názov. Ako SPA je dnes riešená väčšina moderných webových aplikácií, ako sú napr. Google Docs alebo Spotify.
- Ďalšou možnosťou je použitie Reactu pre vykresľovanie webových stránok na strane servera (server-side rendering), kde sa používa napr. v kombinácii s knižnicou Next.js v serverovom prostredí Node.js.
- Ďalej ho môžeme využiť napr. v kombinácii s knižnicou Gatsby v rámci vykresľovania statických webových stránok orientovaných na obsah, kde sa vsádza predovšetkým na rýchlosť predvykresleného HTML a CSS.
- V neposlednom rade by sme nemali zabudnúť na projekt React Native pre tvorbu natívnych mobilných aplikácií pomocou JavaScriptu a Reactu.
Ako vidíme, možností je množstvo. My sa v rámci tohto tutoriálu zameriame predovšetkým na knižnicu React ako takú a ďalšiu funkcionalitu doplníme použitím čistého JavaScriptu. Tiež sa pre jednoduchosť budeme orientovať na prostredie webových aplikácií.
Ako React aplikácie fungujú
Než sa pustíme do tvorby React aplikácií, zoznámime sa s hlavnými princípmi, na ktorých fungujú.
React komponenty
Základné stavebné kamene React aplikácií tvoria tzv. komponenty (components). To sú rôzne znovupoužiteľné HTML elementy so zapuzdrenou funkcionalitou, ktorých skladaním vzniká komplexná UI aplikácia. Komponentom môže byť napr. prihlasovací formulár alebo hviezdičkové hodnotenie produktu. Rozdelením aplikácie na menšie celky je aplikácia prehľadnejšia a vývoj jednoduchší.
React komponenty potom majú svoje:
- vstupné vlastnosti (props) a
- svoj vnútorný stav (state).
React dokáže automaticky reagovať na zmenu stavov a prekresľovať aplikáciu len kedy a kde je to potrebné. Spôsob práce v React je tzv. deklaratívny. To znamená, že definujeme stavy a prvky rozhrania a neriešime napr. ako sa má prekresľovať pri zmene. Práve to je jedným z dôvodov, prečo je táto knižnica tak populárna.
Komponenty je možné v React vytvárať buď ako funkcie
alebo ako triedy (class). Pri tvorbe UI má
funkcionálny spôsob hneď niekoľko výhod a preto
prevláda nad objektovým.
React hooks
React nám pre funkcionálne komponenty poskytuje tzv. React hooks. To sú jednoduché funkcie, ktorých volaním môžeme pokryť všetku funkcionalitu tried a objekty tak vôbec nemusíme používať. Zbavenie sa objektov možno môže znieť neštandardne, ale pripomeňme si, že pracujeme s UI časťou aplikácie, ktorej kód obsahuje HTML, a preto by mal byť minimalistický. Súčasne hooks poskytujú väčšiu flexibilitu pri extrakcii, testovaní a znovupoužití kódu.
Staršiu syntax komponentov pomocou kľúčového slova
class si tiež ukážeme.
JSX - HTML kód v JavaScripte
Aby bola tvorba React aplikácií ešte jednoduchšia, okrem funkcionálnej
paradigmy sa najčastejšie používa aj JSX. To je skratkou
Java Script + XML a
umožňuje písať HTML kód priamo do JavaScriptu. A to nie
ako klasický string, ale naozaj ako HTML elementy. React si s ním
opäť pekne rozumie a celkovo sa nám tak zjednoduší vytváranie HTML
elementov aj samotných komponentov.
Použitie JSX môže vyzerať napr. takto:
return <h1>Example JSX</h1>;
Nepoužili sme žiadne úvodzovky, pretože výsledkom nie je text, ale naozaj nový element.
Samozrejme takáto kombinácia nebude len tak fungovať priamo v prehliadači a kód sa musí prvýkrát preložiť potrebnými nástrojmi. To za nás urobia aplikácie z ekosystému React (konkrétne Babel, ktorý už budeme mať po založení React projektu nakonfigurovaný). Používanie JSX nie je pri písaní kódu v React povinné, rozhodne sa ale oplatí a je k React oficiálne odporúčané. Preto ho aj my budeme používať.
V budúcej v lekcii, Vytvorenie React projektu, si vytvoríme React projekt pre prvú jednoduchú aplikáciu pomocou Node.js.
