1. diel - Úvod do ekosystému Reactu

Vitajte v kurze pokročilého Reactu. V úvodnom tutoriále si predstavíme základné informácie o Reactu a jeho obsiahlom ekosystéme. Zoznámime sa s knižnicami, ktoré prácu s Reacom uľahčujú a ukážeme si, ako sa v tom obrovskom množstve možností vyznať.

Predpoklady pre úspešné absolvovanie kurzu

Než sa pustíme do samotnej práce s Reactem, je potrebné ešte zmieniť vyžadované znalosti. Nevyhnutne budeme potrebovať znalosti obsiahnuté v kurzoch:

• Základy React
• REST API klient v React - Filmová databáza

Ekosystém Reactu

React sám o sebe je knižnica pre vytváranie používateľských rozhraní, ale jeho ekosystém zahŕňa mnoho ďalších nástrojov a knižníc, ktoré uľahčujú vývoj webových aplikácií. Viac podrobností o knižnici a ako sa v praxi používa máme v kurze Základy React.

Vytvorenie aplikácie

Existuje viacero spôsobov na konfiguráciu novej React aplikácie. Create-react-app (CRA) je nástroj vytvorený Facebookom, ktorý umožňuje vytvárať a spravovať nové projekty React bez nutnosti ručnej konfigurácie. To znamená, že sa nemusíme starať o nastavenie nástrojov Babel, Webpack a ďalších. CRA tiež obsahuje režim vývoja, ktorý umožňuje automatické obnovovanie stránky v prehliadači pri zmenách kódu. To zjednodušuje vývoj a testovanie.

Pre správu závislostí používa npm (Node Package Manager) alebo Yarn, čo zase zjednodušuje inštaláciu a aktualizáciu knižníc.

Na vytvorenie a následné spustenie React aplikácie pomocou CRA sa v termináli používa jednoduchý príkaz:

CRA používa pod pokrievkou pre správu balíčkov a kompiláciu kódu Webpack a Babel. To však nie sú jediné možnosti. Jedným z nových populárnych nástrojov pre konfiguráciu React aplikácií, ktorý sa pýši najmä rýchlosťou a jednoduchosťou, je potrebné Vite.

Správa stavov aplikácie

Stavy sú dôležitou súčasťou Reactu a existuje viacero populárnych knižníc pre ich spravovanie.

Knižnica Redux

Knižnica Redux pomáha organizovať a centralizovať stav aplikácie, čo uľahčuje správu dát a komunikáciu medzi rôznymi komponentmi. Medzi jej základné koncepty patria:

• Store - centrálne úložisko pre stav aplikácie. Obsahuje všetky informácie, ktoré sa používajú v aplikácii, a je dostupný z jej ľubovoľnej časti.
• Actions - objekty, ktoré popisujú zmeny stavu aplikácie. Každá akcia má typ a voliteľné dáta. Akcie sa vytvárajú pomocou tzv. action creators.
• Reducers - čisté funkcie, ktoré popisujú, ako by sa mal stav aplikácie zmeniť na základe prijatých akcií. Každý reducer má definovaný svoj kúsok stavu a určuje, ako reagovať na rôzne typy akcií.

Knižnica React-Redux

React-Redux je knižnica, ktorá uľahčuje integráciu knižnice Redux s aplikáciami Reactu. Zaisťuje, že stav Redux je dostupný pre komponenty Reactu a umožňuje im pristupovať k dátam v Store a odoberať zmeny stavu.

Knižnica Recoil

Ďalšia knižnica pre správu stavu v aplikáciách napísaných v Reactu je Recoil. Hlavnou myšlienkou knižnice je poskytnúť spôsob, ako spravovať stav tak, aby bolo ľahké zdieľať stav medzi komponentmi bez nutnosti vytvárať prop drilling (propagačné reťazce vlastností) alebo používať kontext. Nástroj ponúka jednoduchú konfiguráciu a je celkom jednoduchý aj pre začiatočníkov.

V Recoil je základná jednotka stavu, ktorá sa nazýva atom. Atom v Recoil nie je trieda, metóda ani atribút. Je to koncept, ktorý predstavuje jednotku stavu, ktorú môžeme čítať a aktualizovať. Technicky povedané je atom funkciou, ktorá vracia objekt s konkrétnymi vlastnosťami a metódami.

Tu je základný príklad, ako vyzerá atom:

Selektory sú potom funkcie, ktoré umožňujú pristupovať k hodnotám v atom a vykonávať nad nimi transformácie a výpočty. Pomáhajú organizovať a spracovávať stav aplikácie:

V tomto príklade máme selektor, ktorý zdvojnásobuje hodnotu z countState atómu.

Routovanie pomocou React Router

Knižnica React Router umožňuje vytvoriť dynamickú navigáciu v aplikácii tak, aby používatelia mohli prechádzať medzi rôznymi stránkami alebo časťami webovej aplikácie. To umožňuje vytvárať viac stránok v React aplikácii a zároveň udržiavať synchronizáciu URL adresy s aktuálnou zobrazenou stránkou.

Knižnica React Router obsahuje komponent Routes, ktorý obaľuje jednotlivé komponenty s názvom Route. Tie definujú, ktorý komponent by mal byť zobrazený pre danú URL adresu. Ďalším prvkom je komponent Link, ktorý vytvára odkazy medzi rôznymi stránkami aplikácie.

Ďalšie užitočné knižnice kompatibilné s Reactem

Existujú ďalšie knižnice uľahčujúce prácu s Reactem. S mnohými sa stretneme aj v našom kurze. Pre vytváranie pekného užívateľského rozhrania je to potrebný Material UI, pre prácu s dátami cez REST API je to React Query a pre správu dát pomocou GraphQL knižnica Apollo. Je toho naozaj veľa, preto si teraz ešte ukážeme, ako sa v tom všetkom jednoduchšie zorientovať

Ako vybrať vhodný NPM balíček

Pri rozhodovaní o tom, ktorú knižnicu z rozsiahleho React ekosystému v projekte použiť, máme k dispozícii rôznych pomocníkov.

Npm JS

Stránka npmjs.com ponúka prehľad npm balíčkov. Obsahuje základnú dokumentáciu balíčka, príkaz na jeho inštaláciu a tiež odkaz na GitHub:

Npm trends

Stránka npmtrends.com umožňuje porovnanie rôznych balíkov. Vidíme ich počet stiahnutí na časovej osi a štatistiky z GitHubu, ako sú počet hviezdičiek, veľkosť alebo dátum vytvorenia. Môžeme si takto porovnať napríklad Redux a Recoil:

Import Cost

Ak preferujeme vidieť informácie priamo v editore kódu, existuje nástroj Import Cost ako rozšírenie pre VS Code. Slúži na sledovanie veľkosti a nákladov importovaných JavaScriptových knižníc a modulov v projekte.

Nástroj ukazuje, koľko kilobajtov (KB) alebo megabajtov (MB) importovaný modul v projekte zaberá. To umožňuje vidieť, ktoré knižnice prispievajú k celkovej veľkosti aplikácie. Importy väčšej veľkosti sú tiež vizuálne zvýraznené zafarbením:

Zoznámili sme sa s niektorými základnými stavebnými kameňmi Reactu a jeho veľkého ekosystému. Mnohé z nich spoznáme viac do hĺbky v priebehu kurzu. Dôležité je hlavne vedieť, na čo všetko existujú nástroje na uľahčenie práce, aby sme v prípade potreby poznali svoje možnosti.

V nasledujúcej lekcii, Vykresľovanie v React a jeho optimalizácia , si na názornom príklade ukážeme, ako prebieha v React vykresľovanie. Vymenujeme si aj niektoré možnosti optimalizácie, konkrétne memoizáciu, lazy loading a virtualizáciu.