Lekce 1 - Úvod do React
Vítejte u první lekce on-line kurzu programování v populární javascriptové knihovně React, někdy také zvané React.js. React se využívá k tvorbě moderních uživatelských rozhraní, rozděluje aplikaci do komponent, optimalizuje vykreslování a ulehčuje práci dalšími způsoby, které si v kurzech vysvětlíme. Vyzkoušíme si základní principy Reactu včetně práce s webovým API a vytvoříme několik reálných aplikací, mimo jiné např. prohlížeč pokémonů:
V dnešním React tutoriálu si knihovnu představíme spolu se základními principy, které již v příští lekci začneme využívat.
Minimální požadavky kurzu
Než se pustíme do samotné práce s React, je potřeba ještě zmínit vyžadované znalosti. Ke všem máme zde na síti kurzy, takže pokud něco z toho náhodou neznáte, absolvujte prosím nejdříve příslušný kurz.
Budete nezbytně potřebovat:
- Základy JavaScriptu.
- Základy HTML a CSS pro tvorbu uživatelského rozhraní
Výhodou jsou znalosti:
Úvod do React
React je open-source javascriptová knihovna pro tvorbu uživatelského rozhraní (anglicky UI jako User Interface). Vyvinula ji společnost Meta (dříve Facebook).
Určitě jste si již zkusili, že manuální obsluha formulářů v JavaScriptu, jejich validace nebo třeba obnovování různých částí stránky novými daty, nejsou úplně triviální úlohy. Právě s tímto vším nám React pomůže a ve výsledku budeme mít aplikaci vytvořenou rychleji a kvalitněji. Důležité je také rozdělení aplikace do komunikujících komponent, čímž se zjednoduší.
Webová API
Uživatelská rozhraní v React typicky komunikují s nějakým webovým API serverem, ze kterého získávají data, případně mu data posílají. Díky tomu můžeme React aplikaci používat snadno na více zařízeních a máme stále aktuální data, protože jsou uložena na serveru. Tato serverová část aplikace může být napsaná také v JavaScriptu, např. v prostředí Node.js. React se nicméně používá prakticky s jakýmkoli dalším programovacím jazykem běžícím s databází na serveru (Java, C#, PHP, ...).
React je knihovna, ne komplexní framework
Na rozdíl od různých kompletních frameworků (např. Angular) se React soustředí na jednu specifickou oblast - UI. Pokud jste seznámeni s konceptem MVC architektury, React tvoří právě a pouze view, tedy pohledovou vrstvu aplikace, která prezentuje data uživateli. React se z tohoto důvodu s oblibou používá s dalšími knihovnami a existuje kolem něj celý ekosystém. Ten je potom předmětem navazujících kurzů. Pro účely tohoto kurzu si nicméně vystačíme s téměř čistým Reactem.
React je v současné době na trhu práce jednou z nejoblíbenějších a nejžádanějších technologií. Určitě je tedy skvělou volbou jako další znalost webového programátora, kterou lze využít na front-end většiny běžných aplikací.
Využití Reactu
Jelikož je React knihovnou úzce zaměřenou pouze na uživatelské rozhraní aplikace, kombinuje se v rámci celé aplikace s dalšími knihovnami se značně rozdílným přístupem i architekturou. React se pak v rámci těchto použití vždy stará jen o vykreslení uživatelského rozhraní. Pro lepší představu si uveďme několik příkladů:
- Tvorba tzv. single-page aplikací (SPA). SPA je webová stránka v React, která komunikuje s webovým API. Aplikace se načte jen jednou a poté reaguje již bez přenačítání stránky, jako by jediná stránka obsahovala celou aplikaci, od toho je odvozen i název. Jako SPA je dnes řešena většina moderních webových aplikací, jako jsou např. Google Docs nebo Spotify.
- Další možností je použití Reactu pro vykreslování webových stránek na straně serveru (server-side rendering), kde se používá např. v kombinaci s knihovnou Next.js v serverovém prostředí Node.js.
- Dále ho můžeme využít např. v kombinaci s knihovnou Gatsby v rámci vykreslování statických webových stránek orientovaných na obsah, kde se sází především na rychlost předvykresleného HTML a CSS.
- V neposlední řadě bychom neměli opomenout projekt React Native pro tvorbu nativních mobilních aplikací pomocí JavaScriptu a Reactu.
Jak vidíme, možností je spousta. My se v rámci tohoto tutoriálu zaměříme především na knihovnu React jako takovou a další funkcionalitu doplníme použitím čistého JavaScriptu. Také se pro jednoduchost budeme orientovat na prostředí webových aplikací.
Jak React aplikace fungují
Než se pustíme do tvorby React aplikací, seznámíme se s hlavními principy, na kterých fungují.
React komponenty
Základní stavební kameny React aplikací tvoří tzv. komponenty (components). To jsou různé znovupoužitelné HTML elementy se zapouzdřenou funkcionalitou, jejichž skládáním vzniká komplexní UI aplikace. Komponentou může být např. přihlašovací formulář nebo hvězdičkové hodnocení produktu. Rozdělením aplikace na menší celky je aplikace přehlednější a vývoj jednodušší.
React komponenty pak mají své:
- vstupní vlastnosti (props) a
- svůj vnitřní stav (state).
React dokáže automaticky reagovat na změnu stavů a překreslovat aplikaci jen kdy a kde je to potřeba. Způsob práce v React je tzv. deklarativní. To znamená, že definujeme stavy a prvky rozhraní a neřešíme např. jak se má překreslovat při změně. Právě to je jedním z důvodů, proč je tato knihovna tak populární.
Komponenty lze v React vytvářet buď jako funkce nebo jako
třídy (class). Pro tvorbu UI má
funkcionální způsob hned několik výhod a proto
převládá nad objektovým.
React hooks
React nám pro funkcionální komponenty poskytuje tzv. React hooks. To jsou jednoduché funkce, jejichž voláním můžeme pokrýt veškerou funkcionalitu tříd a objekty tak vůbec nemusíme používat. Zbavení se objektů možná může znít nestandardně, ale připomeňme si, že pracujeme s UI částí aplikace, jejíž kód obsahuje HTML, a proto by měl být minimalistický. Současně hooks poskytují větší flexibilitu při extrakci, testování a znovupoužití kódu.
Starší syntaxi komponent pomocí klíčového slova
class si rovněž ukážeme.
JSX - HTML kód v JavaScriptu
Aby byla tvorba React aplikací ještě jednodušší, kromě
funkcionálního paradigma se nejčastěji používá také
JSX. To je zkratkou
JavaScript + XML a
umožňuje psát HTML kód přímo do JavaScriptu. A to ne jako
klasický string, ale opravdu jako HTML elementy. React si s ním
opět hezky rozumí a celkově se nám tak zjednoduší vytváření HTML
elementů i samotných komponent.
Použití JSX může vypadat např. takto:
return <h1>Ukázka JSX</h1>;
Nepoužili jsme žádné uvozovky, protože výsledkem není text, ale opravdu nový element.
Samozřejmě takováto kombinace nebude jen tak fungovat přímo v prohlížeči a kód se musí prvně přeložit potřebnými nástroji. To za nás udělají aplikace z ekosystému React (konkrétně Babel, který již budeme mít po založení React projektu nakonfigurovaný). Používání JSX není při psaní kódu v Reactu povinné, rozhodně se ale vyplatí a je k Reactu oficiálně doporučované. Proto jej i my budeme používat.
Příště, v lekci Vytvoření React projektu, vytvoříme React projekt pro první jednoduchou aplikaci pomocí Node.js.
