From 65be21b0396e55372c52722d5e7fa072babf8311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Jirs=C3=A1k?= Date: Wed, 8 May 2024 21:34:52 +0200 Subject: [PATCH] =?UTF-8?q?Drobn=C3=A9=20opravy=20v=20lekci=20React=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react/formulare-efekty/cvlekce/prazsky-cas/exercise.md | 2 +- daweb/react/formulare-efekty/cvlekce/registrace/exercise.md | 2 +- daweb/react/formulare-efekty/cvlekce/vyber-zeme/exercise.md | 2 +- .../cvlekce/zasilani-newsletteru/exercise.md | 6 +++++- daweb/react/formulare-efekty/efekty-api.md | 2 +- daweb/react/formulare-efekty/efekty-zavislosti.md | 2 +- 6 files changed, 10 insertions(+), 6 deletions(-) diff --git a/daweb/react/formulare-efekty/cvlekce/prazsky-cas/exercise.md b/daweb/react/formulare-efekty/cvlekce/prazsky-cas/exercise.md index d3d008b7..40abc1a5 100644 --- a/daweb/react/formulare-efekty/cvlekce/prazsky-cas/exercise.md +++ b/daweb/react/formulare-efekty/cvlekce/prazsky-cas/exercise.md @@ -9,7 +9,7 @@ solutionAccess: protected ::fig[ukázka řešení]{src=assets/ukazka-reseni.png} 1. Založte si novou React aplikaci podle klasického postupu. -1. Uvnitř komponenty `HomePage` vytvořte jednoduchý efekt, který se spustí pří prvním zobrazení komponenty. Uvnitř tohoto efektu zavolejte funkci `alert` a zobrazte vyskakovací okno s nějakou zprávou. +1. Uvnitř komponenty `HomePage` vytvořte jednoduchý efekt, který se spustí při prvním zobrazení komponenty. Uvnitř tohoto efektu zavolejte funkci `alert` a zobrazte vyskakovací okno s nějakou zprávou. 1. Přidejte do vaší komponenty stav `datetime`, jehož výchozí hodnota bude prázdný řetězec. V efektu smažte volání `alert` a uložte do stavu nějaký čas jako řetězec ve formátu ``` diff --git a/daweb/react/formulare-efekty/cvlekce/registrace/exercise.md b/daweb/react/formulare-efekty/cvlekce/registrace/exercise.md index 6d1592d7..b4bca53f 100644 --- a/daweb/react/formulare-efekty/cvlekce/registrace/exercise.md +++ b/daweb/react/formulare-efekty/cvlekce/registrace/exercise.md @@ -17,7 +17,7 @@ solutionAccess: protected Uživatelské jméno je povinný údaj ``` Tato zpráva bude vidět pouze pokud je ve stavu `userName` prázdný řetězec. V opačném případě tento div nezobrazujte. -1. Vzpomeňte si na vlastnost `disabled` a zařiďte, aby registrační tlačítko bylo klikatelné pouze v případě, že ve stavu `userName` není prázdný řetězec. +1. Vzpomeňte si na vlastnost `disabled` a zařiďte, aby registrační tlačítko bylo klikatelné pouze v případě, že ve stavu `userName` není prázdný řetězec. HTML atributy, které mají formu příznaku (tj. atribut nemá žádnou hodnotu, ale důležité je, zda se atribut v HTML elementu vyskytuje či nevyskytuje), se v JSX předávají pomocí přiřazení hodnoty `true` nebo `false`. Tj. když v JSX uvedete ``, je to jako kdybyste v HTML napsali ``. Pokud naopak uvedete v JSX ``, výsledné HTML bude vypadat takto: ``. :::solution diff --git a/daweb/react/formulare-efekty/cvlekce/vyber-zeme/exercise.md b/daweb/react/formulare-efekty/cvlekce/vyber-zeme/exercise.md index fe4a62d5..576b4645 100644 --- a/daweb/react/formulare-efekty/cvlekce/vyber-zeme/exercise.md +++ b/daweb/react/formulare-efekty/cvlekce/vyber-zeme/exercise.md @@ -34,7 +34,7 @@ Pokračujte v předchozím cvičení. 1. Vytvořte stav `country`, který bude sloužit k uložení hodnoty z vaší nabídky. Výchozí hodnotu stavu nastavte na `Česká republika`. 1. Pomocí události `onChange` zařiďte one-way data binding mezi nabídkou `select` a stavem `country`. -1. Zařiďte two-way data binding mezi nabídkou `select` a stavem `country` tak, aby nabídka zobrazovala výchozí hodnotu uloženou ve stavu. +1. Zařiďte two-way data binding mezi atributem `value` v nabídce `select` a stavem `country` tak, aby nabídka zobrazovala výchozí hodnotu uloženou ve stavu. 1. Zprávu vypisovanou pomocí funkce `alert` po odeslání formuláře změňte na ```text Uživatel „???“ ze země „???“ se chce zaregistrovat. diff --git a/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md b/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md index a6aa1a97..540e4856 100644 --- a/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md +++ b/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md @@ -16,7 +16,11 @@ Pokračujte v předchozím cvičení. Chci pravidelně dostávat novinky do mé e-mailové schránky. ``` -1. Do výpisu ve funkci `alert` přidejte informaci o tom, jestli uživatel chce dostávat novinky. Informaci o uživatelově volbě si uložte do stavové proměnné `newsletterAccepted`. +1. Vytvořte si stav `newsletterAccepted`, ve kterém budete mít uloženo, zda si uživatel přeje či nepřeje dostávat e-mailové novinky – tedy stav zaškrtávacího políčka. + +1. Přes dvoucestný (two-way) binding propojte stav `newsletterAccepted` a zaškrtávací políčko. Použijete k otmu událost `onChange` a atribut `value`, jako u textových políček. Jako hodnota se bude předávat `true` nebo `false`. + +1. Do výpisu ve funkci `alert` přidejte informaci o tom, jestli uživatel chce dostávat novinky. ```text Uživatel „???“ ze země „???“ se chce zaregistrovat a dostávat pravidelně novinky. diff --git a/daweb/react/formulare-efekty/efekty-api.md b/daweb/react/formulare-efekty/efekty-api.md index c285a8ea..d048a155 100644 --- a/daweb/react/formulare-efekty/efekty-api.md +++ b/daweb/react/formulare-efekty/efekty-api.md @@ -1,6 +1,6 @@ ## Efekty a volání API -Pokud chceme v naší aplikaci zobrazovat data z nějakého API, musíme si tato data stáhnout pomocí nám již známé funkce `fetch`. V čiistéme JavaScriptu jsme byli zvýklí tuto funkci volat ve chvíli, kdy se načítá naše stránka a načíst si všechna data pro celou stránku najednou. V Reactu však můžeme načítat data jen pro každou komponentu zvlášť. Funkci `fetch` tak budeme chtít volat ve chvíli, kdy se naše komponenta poprvé objeví na stránce. To zní jako případ pro použití efektů. +Pokud chceme v naší aplikaci zobrazovat data z nějakého API, musíme si tato data stáhnout pomocí nám již známé funkce `fetch`. V čistém JavaScriptu jsme byli zvyklí tuto funkci volat ve chvíli, kdy se načítá naše stránka – načetli jsme si všechna data pro celou stránku najednou. V Reactu však můžeme načítat data jen pro každou komponentu zvlášť. Funkci `fetch` tak budeme chtít volat ve chvíli, kdy se naše komponenta poprvé objeví na stránce. To zní jako případ pro použití efektů. Naše poslední aplikace zatím zobrazovala, že svátek má Jiří. To je však pravda pouze jeden den v roce. Pojďme aplikaci vylepšit tak, aby si stáhla aktuální jméno z API. diff --git a/daweb/react/formulare-efekty/efekty-zavislosti.md b/daweb/react/formulare-efekty/efekty-zavislosti.md index 79439f23..6661db21 100644 --- a/daweb/react/formulare-efekty/efekty-zavislosti.md +++ b/daweb/react/formulare-efekty/efekty-zavislosti.md @@ -14,7 +14,7 @@ const Komponenta = () => { }; ``` -Tato technika se nám hodí nejčastěji ve chvíli, kdy chceme stáhnout nějaká data z API ve chvíli, kdy komponenta změní svůj stav. V našem příkladu si stáhneme jméno z API, které má svátek v den, který uživatel vybere v kalendáři. +Tato technika se nám hodí nejčastěji ve chvíli, kdy chceme stáhnout nějaká data z API ve chvíli, kdy komponenta změní svůj stav. V našem příkladu si stáhneme z API jméno, které má svátek v den, který uživatel vybere v kalendáři. ```jsx export const HomePage = () => {