Naučte se a porozumějte Reactu - praktický tutoriál.

Zde budou představena témata, která budou dále probírána, a bude se diskutovat o motivaci za tímto kurzem.

V současnosti existuje nepřeberné množství UI frameworků pro JavaScript – proč by tedy mělo být zrovna React? Kromě bezesporu oblíbenosti této knihovny existují také několik hlubších důvodů, které hovoří pro React.

V této lekci zřizujeme vývojové prostředí a okamžitě vytváříme naši první React aplikaci pomocí npm create vite.

Po tom, co jsme v poslední lekci vytvořili „čerstvou“ React aplikaci, je cílem této části porozumění struktuře této aplikace a vysvětlení, jak lze React vložit do webové stránky.

Malé osvěžení týkající se var vs. let/const.

Destrukturalizace umožňuje cílené extrahování prvků z objektů a polí. Po bližším zkoumání se objevuje mnoho možností použití, které dělají JS kód elegantnější a kompaktnější.

Funkce jsou v JS základní a doposud byly deklarovány a definovány pouze pomocí klíčového slova funkce. ES6 představuje elegantní a krátký zápis, který zlepšuje čitelnost kódu a poskytuje řešení pro otravný problém s this.

V NodeJs byly moduly používány od samého začátku, ale zpočátku se výhradně spoléhaly na CommonJs modulární formát s require. Od ES6 existuje standardní definice modulu a nová klíčová slova import/export. Tento formát je nyní podporován téměř všemi (novými) JS knihovnami a také NodeJs s ním umí zacházet ve svých nejnovějších verzích.

Pomocí JSX popisujete uživatelské rozhraní komponenty a integrujete do něj výrazy JS. Soubor projektu k videu obsahuje hotový kód tohoto výukového úseku.

Vlastní React komponenty lze velmi snadno psát pomocí funkcí, které vracejí JSX.

Tato lekce vysvětluje, jak lze integrovat data a výrazy JavaScriptu do JSX.

Bez stavu, který se může měnit, je těžké implementovat smysluplnou aplikaci. V Reactu se obvykle používá useState. Tento tutoriál představuje tento hook a vysvětluje jeho použití.

Props slouží k předávání dat dětským komponentám. Zde je vysvětleno, jak přesně k tomu dochází a na co je třeba dát pozor.

Pokud se props dynamicky mění, bude znovu zavolána odpovídající funkce renderování komponenty.

Když chce dětská komponenta něco sdělit rodičovské komponentě, používá se prop callback.

To-do seznamy by měly být nakonec vyřešeny. Zde diskutujeme, jak to funguje v kódu.

Vzhled uživatelského rozhraní je nepochybně důležitý. Proto zde vysvětluji, jak to funguje s pomocí knihovny Emotion a jak s ní lze použít vlastnost className. Kromě toho se ještě podíváme na atribut style-, který umožňuje každému prvku samostatně nastavit styly.

Pomocí filtrování pole úkolů lze úkoly rozdělit do dvou skupin.

Samozřejmě je třeba být schopen také smazat úkoly. Zde je vysvětleno, jak tato operace funguje pomocí filtrování pole.

Dosud jsme vždy obalili komponenty v DIVech. V určitých případech si však můžete tento krok ušetřit.

Teď to začíná být zajímavé: Úkoly lze poměrně snadno ukládat trvale do paměti prohlížeče a samozřejmě je také znovu načíst, aby přežily obnovení stránky.

S useEffect je možné integrovat vedlejší efekty. Montování komponenty lze pomocí této funkce také řešit.

Stručný souhrn naší aplikace na seznam úkolů a poslední vylepšení.

Aplikace videopřehrávače je vytvořena pomocí create vite a je vysvětleno, jak by měla být aplikace postavena. Projektový soubor připojený k videu obsahuje hotový kód pro přehrávač videa.

S atributem ref lze odkazovat na prvky DOM a přistupovat k nim pomocí useRef. Zde to děláme s prvkem videa.

Vytvoříme skutečného video přehrávače, který již obsahuje tlačítka pro přehrání, pauzu a zastavení.

Jelikož tlačítka Spustit a Pozastavit nikdy nepotřebujeme současně, spojíme je do jednoho tlačítka.

Ovládací prvky video prvku ovládají video stejně, což však způsobuje, že náš stav u tlačítka Přehrát/Pauza není přiměřeně upraven. To napravíme pomocí událostních posluchačů u video prvku.

Hlasitost můžeme také změnit pomocí vlastního regulátoru.

Skok na libovolnou pozici ve videu (Seek) lze snadno provést nastavením vlastnosti currentTime.

Délka videa se určí až po načtení metadat videa, proto musíme počkat na správnou událost.

Playlist je realizována pomocí seznamu, který lze implementovat pomocí HTML prvku select.

Nyní přichází na řadu úprava seznamu videí: Přidáváme přidání videa příspěvků.

To, co přidáte, musíte také být schopni odstranit. To děláme podobně jako u To-do aplikace pomocí filtrů.

Seznam skladeb by neměl sloužit pouze jako „seznam záložek“, ale také automaticky přehrávat videa za sebou. Toto bude realizováno v této lekci.

Pro netrpělivé: Tlačítka pro předchozí a další video.

Speciální zpracování pro první a poslední video je realizováno: tlačítka Next a Previous by měla být odpovídajícím způsobem deaktivována.

Nyní uložíme a načteme náš playlist. To se provádí obdobně jako u aplikace To-do-App v lokálním úložišti prohlížeče.

Videa, která jsou použita jako příklad ve Video-Player-App, můžete zde zhlédnout v původní podobě (všechny s licencí CC-Attribution, viz příslušné webové stránky):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Na příkladu useJsonFetch-Hooks je zde vysvětleno, jak lze psát vlastní funkce Hook.

Stavová změna pomocí setteru useState může být zrádná. S useImmer už ale žádný problém není.

Uživatelské rozhraní se bude rychleji sestavovat a rychleji reagovat na vstupy uživatele, pokud nedochází k zbytečným voláním renderovacích funkcí. Pomocí memo lze zabránit renderování komponent, pokud se jejich props nezmění.

S useCallback můžete zabránit zbytečnému vykreslování dětských komponent, pokud se používají Callback-Props.

Složité výpočty uvnitř renderovacích funkcí by měly být prováděny pouze tehdy, když je to nutné. Pomocí useMemo lze tyto výpočty vzhledem k závislostem cachovat.

Zde shrnuji výsledky kurzu a poskytuji doporučení ohledně toho, co by si účastníci měli po kurzu přečíst.