Učiť sa a porozumieť Reactu - praktický tutoriál.

Tu sú predstavené témy, ktoré budú ďalej spracované, a je uvedený dôvod na tento kurz.

Existuje už neúčtovné množstvo UI Frameworkov pre JavaScript - prečo by to malo byť teraz práve React? Okrem neodškrtnutej obľúbenosti tejto knižnice existuje niekoľko dôvodov, ktoré hovoria v prospech Reactu.

Nastavíme v tomto kurze vývojové prostredie a okamžite vytvoríme našu prvú React-App s npm create vite.

Po tom, čo sme v poslednej lekcii vytvorili „čerstvú“ React aplikáciu, teraz budeme skúmať štruktúru tejto aplikácie a vysvetlíme, ako môže byť React vložený do webovej stránky.

Malý osviežovač na tému var vs. let/const.

Destruktúrovanie umožňuje cieľené extrahovanie prvkov z objektov a polí. Pri bližšom preskúmaní sa objavuje mnoho možností použitia, ktoré robia JS kód elegantnejším a kompaktnejším.

Funkcie sú v JS esenciálne a doteraz boli deklarované a definované iba pomocou kľúčového slova funkcia. ES6 prináša elegantný a krátky spôsob zápisu, ktorý robí kód čitateľnejším a poskytuje riešenie pre ťažký problém s this.

V NodeJs sa moduly používali od začiatku, no na začiatku výhradne na formát modulov CommonJs s require. Od ES6 existuje štandardná definícia modulu a nové kľúčové slová import/export. V súčasnosti je toto formát podporovaný takmer všetkými (novými) JS knižnicami a NodeJs môže s nimi taktiež pracovať vo svojich najnovších verziách.

Pomocou JSX popíšete rozhranie komponentu a integrujete do neho JS výrazy. Súbor projektu k videu obsahuje hotový kód pre túto časť návodu.

Vlastné React komponenty možno veľmi jednoducho vytvoriť pomocou funkcií, ktoré vrátia JSX.

Táto lekcia vysvetľuje, ako sa dáta a JavaScriptové výrazy môžu byť integrované do JSX.

Bez stavu, ktorý sa môže zmeniť, je ťažké implementovať akúkoľvek zmysluplnú aplikáciu. V Reacte sa na to zvyčajne používa useState. Táto lekcia predstavuje tento Hook a vysvetľuje jeho použitie.

Props slúžia na odovzdávanie údajov do podriadených komponentov. Tu je vysvetlené, ako presne sa to deje a na čo treba dbať.

Ak sa vlastnosti dynamicky menia, príslušná render funkcia komponentu bude zavolaná znovu.

Ak chce komponenta dieťaťa oznámiť niečo nadradenej komponente, použije k tomu prop s callbackom.

Úlohy by mali byť niekedy aj vykonané. Tu diskutujeme, ako to funguje v kóde.

Vzhľad UI je nepochybne dôležitý. Preto tu vysvetľujem, ako to funguje s knižnicou Emotion a ako sa používa Prop className. Okrem toho sa zaberie aj atribút style-, s ktorým je možné štýlovať každý prvok individuálne.

Pomocou filtrovania pola úloh je možné rozdeliť úlohy do dvoch skupín.

Samozrejme, je potrebné byť schopný vymazať úlohy. Tu je vysvetlené, ako to funguje pomocou filtrovania poľa.

Doteraz sme vždy obalili komponenty do DIV-ov. V niektorých prípadoch si však môžete túto prácu ušetriť.

Teraz to bude zaujímavé: To-dos sa dajú relatívne jednoducho ukladať do pamäte prehliadača a samozrejme ich aj načítať, aby prežili obnovenie stránky.

Pomocou useEffect môžete integrovať efekty stránok. Montovanie komponentu môžete tiež riešiť touto funkciou.

Krátky súhrn nášho úložného aplikácie a posledné vylepšenia.

Video-Player aplikácia sa vytvorí pomocou create vite a vysvetlí sa, ako by mala byť aplikácia vytvorená. Projektový súbor pripojený k videu obsahuje hotový kód pre video prehrávač.

Pomocou atribútu ref môžeme odkazovať na DOM elementy a pristupovať k nim pomocou useRef. Tu to robíme s video elementom.

Vytvoríme skutočného video prehrávača, ktorý už má tlačidlá pre prehrávanie, pozastavenie a zastavenie.

Keďže nie je potrebné mať tlačidlá Play a Pause súčasne, kombinujeme ich do jedného tlačidla.

Ovládače vlastného prvku videa ovládajú tiež video, čo však vedie k tomu, že náš stav tlačidla prehrávania/zastavenia nie je správne prispôsobený. Vyriešime to pomocou udalostných handlerov pri prvku videa.

Hlasitosť môžeme tiež ovplyvniť pomocou vlastného regulátora.

Presunutie na ľubovoľnú pozíciu vo videu (Seek) sa dá prekvapivo ľahko dosiahnuť nastavením vlastnosti currentTime.

Dĺžka videa sa určí až po načítaní metadát videa, preto musíme počkať na správnu udalosť.

Playlist sa realizuje pomocou zoznamu, ktorý je možné implementovať pomocou HTML elementu select.

Teraz prichádza spracovanie zoznamu videí do hry: Pridávame možnosť pridania video záznamov.

Čo pridáme, musíme tiež byť schopní odstrániť. To robíme podobne ako pri filtrovaní v aplikácii To-do.

Playlist by nemala slúžiť len ako zoznam „záložiek“, ale tiež automaticky prehrávať videá za sebou. Toto bude realizované v tomto lekciu.

Pre netrpezlivých: Tlačidlá pre ďalšie a predchádzajúce video.

Špeciálne zaobchádzanie s prvým a posledným videom je realizované: tlačidlá Next a Previous by mali byť zodpovedajúco deaktivované.

Teraz uložíme a načítame naše playlisty. Toto sa deje analogicky k To-do-App v lokálnom úložisku prehliadača.

Videá, ktoré sa používajú ako príklad v aplikácii pre prehrávač videí, si môžete pozrieť tu v originálnom stave (všetky s licenciou CC-Attribution, viď príslušné webové stránky):

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

Na príklade useJsonFetch-hooks sa tu vysvetľuje, ako môžete písať vlastné funkcie hookov.

Meniť stav pomocou setteru useState môže byť zradné. S useImmer už to nie je problém.

Užívateľské rozhranie sa bude rýchlejšie vytvárať a bude rýchlejšie reagovať na vstupy používateľa, ak nedochádza k zbytočným volaniam renderovacích funkcií. S memo je možné zabrániť renderovaniu komponentov, ak sa ich Props nezmenia.

Pomocou useCallback sa dá zabrániť zbytočnému vykresľovaniu detských komponentov, keď sa používajú Callback-Props.

Náročné výpočty v rámci render funkcií by sa mali vykonávať len v prípade potreby. S useMemo je možné tieto výpočty uchovávať s ohľadom na závislosti.

Tu som zhrnul výsledky kurzu a poskytnem naznačenie, čo by si účastníci mali po kurze pozrieť.