Lekce 1 - Úvod do ekosystému Reactu

Vítejte v kurzu pokročilého Reactu. V úvodním tutoriálu si představíme základní informace o Reactu a jeho obsáhlém ekosystému. Seznámíme se s knihovnami, které práci s Reactem ulehčují a ukážeme si, jak se v tom obrovském množství možností vyznat.

Předpoklady pro úspěšné absolvování kurzu

Než se pustíme do samotné práce s Reactem, je potřeba ještě zmínit vyžadované znalosti. Nezbytně budeme potřebovat znalosti obsažené v kurzech:

• Základy React,
• REST API klient v React - Filmová databáze.

Ekosystém Reactu

React sám o sobě je knihovna pro vytváření uživatelských rozhraní, ale jeho ekosystém zahrnuje mnoho dalších nástrojů a knihoven, které usnadňují vývoj webových aplikací. Více podrobností o knihovně a jak se v praxi používá, máme v kurzu Základy React.

Vytvoření aplikace

Existuje vícero způsobů na konfiguraci nové React aplikace. Create-react-app (CRA) je nástroj vytvořený Facebookem, který umožňuje vytvářet a spravovat nové projekty React bez nutnosti ruční konfigurace. To znamená, že se nemusíme starat o nastavení nástrojů Babel, Webpack a dalších. CRA také obsahuje režim vývoje, který umožňuje automatické obnovování stránky v prohlížeči při změnách kódu. To zjednodušuje vývoj a testování.

Pro správu závislostí používá npm (Node Package Manager) nebo Yarn, což zase zjednodušuje instalaci a aktualizaci knihoven.

Pro vytvoření a následné spuštění React aplikace pomocí CRA se v terminálu používá jednoduchý příkaz:

Windows PowerShell
npx create-react-app nazev-aplikace
cd nazev-aplikace
npm start

CRA používá pod pokličkou pro správu balíčků a kompilaci kódu Webpack a Babel. To však nejsou jediné možnosti. Jedním z nových populárních nástrojů pro konfiguraci React aplikací, který se pyšní zejména rychlostí a jednoduchostí, je třeba Vite.

Správa stavů aplikace

Stavy jsou důležitou součástí Reactu a existuje vícero populárních knihoven pro jejich spravování.

Knihovna Redux

Knihovna Redux pomáhá organizovat a centralizovat stav aplikace, což usnadňuje správu dat a komunikaci mezi různými komponentami. Mezi její základní koncepty patří:

• Store - centrální úložiště pro stav aplikace. Obsahuje veškeré informace, které se používají v aplikaci, a je dostupný z její libovolné části.
• Actions - objekty, které popisují změny stavu aplikace. Každá akce má typ a volitelná data. Akce se vytvářejí pomocí tzv. action creators.
• Reducers - čisté funkce, které popisují, jak by se měl stav aplikace změnit na základě přijatých akcí. Každý reducer má definovaný svůj kousek stavu a určuje, jak reagovat na různé typy akcí.

Knihovna React-Redux

React-Redux je knihovna, která usnadňuje integraci knihovny Redux s aplikacemi Reactu. Zajišťuje, že stav Redux je dostupný pro komponenty Reactu a umožňuje jim přistupovat k datům ve Store a odebírat změny stavu.

Knihovna Recoil

Další knihovna pro správu stavu v aplikacích napsaných v Reactu je Recoil. Hlavní myšlenkou knihovny je poskytnout způsob, jak spravovat stav tak, aby bylo snadné sdílet stav mezi komponentami bez nutnosti vytvářet prop drilling (propagační řetězce vlastností) nebo používat kontext. Nástroj nabízí jednoduchou konfiguraci a je docela snadný i pro začátečníky.

V Recoil je základní jednotka stavu, která se nazývá atom. Atom v Recoil není třída, metoda ani atribut. Je to koncept, který představuje jednotku stavu, kterou můžeme číst a aktualizovat. Technicky řečeno je atom funkcí, která vrací objekt s konkrétními vlastnostmi a metodami.

Zde je základní příklad, jak vypadá atom:

import { atom } from 'recoil';

export const countState = atom({
  key: 'countState', // unikátní klíč pro tento atom
  default: 0,        // výchozí hodnota
});

Selektory jsou pak funkce, které umožňují přistupovat k hodnotám v atom a provádět nad nimi transformace a výpočty. Pomáhají organizovat a zpracovávat stav aplikace:

import { selector } from 'recoil';
import { countState } from './countAtom';

export const doubledCount = selector({
  key: 'doubledCount',
  get: ({ get }) => {
    const count = get(countState);
    return count * 2;
  },
});

V tomto příkladu máme selektor, který zdvojnásobuje hodnotu z countState atomu.

Routování pomocí React Router

Knihovna React Router umožňuje vytvořit dynamickou navigaci v aplikaci tak, aby uživatelé mohli přecházet mezi různými stránkami nebo částmi webové aplikace. To umožňuje vytvářet více stránek v React aplikaci a zároveň udržovat synchronizaci URL adresy s aktuální zobrazenou stránkou.

Knihovna React Router obsahuje komponentu Routes, která obaluje jednotlivé komponenty s názvem Route. Ty definují, která komponenta by měla být zobrazena pro danou URL adresu. Dalším prvkem je komponenta Link, která vytváří odkazy mezi různými stránkami aplikace.

Další užitečné knihovny kompatibilní s Reactem

Existují další knihovny usnadňující práci s Reactem. S mnohými se potkáme také v našem kurzu. Pro vytváření hezkého uživatelského rozhraní je to třeba Material UI, pro práci s daty přes REST API je to React Query a pro správu dat pomocí GraphQL knihovna Apollo. Je toho opravdu hodně, proto si teď ještě ukážeme, jak se v tom všem jednodušeji zorientovat

Jak vybrat vhodný NPM balíček

Při rozhodování o tom, kterou knihovnu z rozsáhlého React ekosystému v projektu použít, máme k dispozici různé pomocníky.

npm JS

Stránka npmjs.com nabízí přehled npm balíčků. Obsahuje základní dokumentaci balíčku, příkaz na jeho instalaci a také odkaz na GitHub:

npm trends

Stránka npmtrends.com umožňuje porovnání různých balíčku. Vidíme jejich počet stažení na časové ose a statistiky z GitHubu, jako jsou počet hvězdiček, velikost nebo datum vytvoření. Můžeme si takto porovnat třeba Redux a Recoil:

Import Cost

Pokud preferujeme vidět informace přímo v editoru kódu, existuje nástroj Import Cost jako rozšíření pro VS Code. Slouží pro sledování velikosti a nákladů importovaných JavaScriptových knihoven a modulů v projektu.

Nástroj ukazuje, kolik kilobajtů (KB) nebo megabajtů (MB) importovaný modul v projektu zabírá. To umožňuje vidět, které knihovny přispívají k celkové velikosti aplikace. Importy větší velikosti jsou také vizuálně zvýrazněné obarvením:

Seznámili jsme se s některými základními stavebními kameny Reactu a jeho velkého ekosystému. Mnohé z nich poznáme více do hloubky v průběhu kurzu. Důležité je hlavně vědět, na co všechno existují nástroje pro ulehčení práce, abychom v případě potřeby znali své možnosti.

V následující lekci, Vykreslování v Reactu a jeho optimalizace, si na názorném příkladu ukážeme, jak probíhá v Reactu vykreslování. Vyjmenujeme si také některé možnosti optimalizace, konkrétně memoizaci, lazy loading a virtualizaci.