Kódím.cz
5

Zastaralé hodnoty

Nahlédneme pod pokličku principům, kvůli kterýn naše React komponenty často fungují podivně a nečekaně.

1
Datluj.cz, fáze 1

V tomto cvičení zařídíme, že uživatel bude moci napsat slovo zobrazené na obrazovce.

  1. Udělejte si fork repozitáře se zadáním celého projektu. Nainstalujte závislosti a prohlédněte si strukturu projektu. Po spuštění stránky uvidíte na obrazovce jedno slovo vykreslené pomocí komponenty Wordbox.
  2. Prostudujte si zdrojový kód a seznamte se s tím, jak aplikace funguje.
  3. Prohlédněte si kompnentu Stage. Prozatím si nevšímejte funkce generateWord, tu máme připravenou na později. Ve stavu komponenty nemáme uložen jen jeden řetězec ale celé pole slov. To je také příprava na později. Dokud neřekneme jinak, budeme pracovat s jednoprvkovým polem.
  4. Upravte komponentu Wordbox tak, že pověsíte posluchače události keyUp na document. Pokud uživatel napsal správně první písmenko slova, toto písmenko ze slova umažte. Takto pokračujte dokud uživatel nenapíše celé slovo. V posluchači budete používat stav lettersLeft a bude potřeba se vyhnout jeho zastarávání (stale state). Použijte probíranou techniku, kdy posluchače události měníte svépomocí. Do závislostí useEffectu bude potřeba přidat stav lettersLeft.
  5. Jakmile uživatel napíše správně celé slovo, na stránce zůstane viset prázdná komponenta Wordbox. Nechejte ji zatím viset.