Merge pull request #655 from Czechitas-podklady-WEB/654-react-2-aktua…

…lizace-lekce

React 2: Aktualizace lekce

daweb/react/formulare-efekty/cv-efekty-api.md

@@ -1,4 +1,5 @@
 ## Cvičení: Efekty a volání API
 
+::exc[cvlekce/efekty]
 ::exc[cvlekce/prazsky-cas]
 ::exc[cvlekce/vyber-zony]

daweb/react/formulare-efekty/cv-formularove-prvky.md

@@ -1,5 +1,11 @@
 ## Cvičení: Formulářové prvky
 
+::exc[cvlekce/binding]
 ::exc[cvlekce/registrace]
 ::exc[cvlekce/vyber-zeme]
+
+## Bonusy
+
+Pokud máte ještě čas, můžete si vyzkoušet následující cvičení, případně si je nechte jako úložky na doma.
+
 ::exc[cvlekce/zasilani-newsletteru]

daweb/react/formulare-efekty/cvlekce/binding.md

@@ -0,0 +1,9 @@
+---
+title: Data binding
+lead: Vyzkoušejte si obousměrný data binding.
+demand: 3
+solutionAccess: lock
+---
+
+1. Vytvořte si repozitář ze šablony [cviceni-data-binding](https://github.com/Czechitas-podklady-WEB/cviceni-data-binding).
+1. Následujte instrukce z README repozitáře.

daweb/react/formulare-efekty/cvlekce/efekty.md

@@ -0,0 +1,9 @@
+---
+title: Efekty
+lead: Vyzkoušejte si vytvořit jednoduché efekty.
+demand: 3
+solutionAccess: lock
+---
+
+1. Vytvořte si repozitář ze šablony [cviceni-react-efekty](https://github.com/Czechitas-podklady-WEB/cviceni-react-efekty).
+1. Následujte instrukce z README repozitáře.

daweb/react/formulare-efekty/cvlekce/prazsky-cas/exercise.md

@@ -1,12 +1,14 @@
 ---
 title: Pražský čas
+lead: Vytvořte jednoduchou aplikaci, která zobrazuje aktuální čas v Praze.
 demand: 2
+solutionAccess: lock
 ---
 
 ::fig[ukázka řešení]{src=assets/ukazka-reseni.png}
 
 1. Založte si novou React aplikaci podle klasického postupu.
-1. Uvnitř komponenty `App` 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ří 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
 
    ```

daweb/react/formulare-efekty/cvlekce/registrace/exercise.md

@@ -1,33 +1,15 @@
 ---
 title: Registrace
+lead: Vytvořte jednoduchý formulář pro registraci uživatele.
 demand: 3
+solutionAccess: lock
 ---
 
 ::fig[ukázka řešení]{src=assets/ukazka-reseni.gif}
 
 1. Založte si novou React aplikaci dle klasického postupu.
-1. Vytvořte komponentu `App` s jednoduchým textovým políčkem dle následujícího vzoru.
-
-   ```jsx
-   const App = () => {
-     const handleSubmit = (event) => {
-       event.preventDefault();
-     };
-
-     return (
-       <form onSubmit={handleSubmit}>
-         <label>
-           Uživatelské jméno:
-           <input type="text" />
-         </label>
-         <button type="submit">Registrovat</button>
-       </form>
-     );
-   };
-   ```
-
-1. Na políčko přidejte událost `onChange`. V reakci na událost do konzole vypište obsah políčka pomocí vlastnosti `target.value`. Vyzkoušejte, že když do políčka píšete, v konzoli vidíte každou změnu jeho hodnoty.
-1. Uvnitř komponenty `App` vytvořte stav `userName` s výchozí hodnotou prázdný řetězec. Vytvořte obousměrný (two-way) data binding mezi textovým políčkem a stavem `userName`.
+1. V komponentě `HomePage` vytvořte jednoduchý formulář pro registraci uživatele. Formulář bude obsahovat jedno textové políčko pro zadání uživatelského jména a tlačítko pro odeslání formuláře s textem _Registrovat_.
+1. Uvnitř `HomePage` vytvořte stav `userName` s výchozí hodnotou prázdný řetězec. Vytvořte obousměrný (two-way) data binding mezi textovým políčkem a stavem `userName`.
 1. V reakci na událost `onSubmit` pomocí funkce `alert` vypište jméno uživatele uložené ve stavu `userName`.
 1. Na stránku vložte `div` se zprávou
    ```text

daweb/react/formulare-efekty/cvlekce/vyber-zeme/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Výběr země
+lead: Přidejte do formuláře rozbalovací nabídku pro výběr země.
 demand: 2
+solutionAccess: lock
 ---
 
 ::fig[ukázka řešení]{src=assets/ukazka-reseni.gif}

daweb/react/formulare-efekty/cvlekce/vyber-zony/exercise.md

@@ -1,5 +1,6 @@
 ---
 title: Výběr zóny
+lead: Vytvořte aplikaci, která zobrazuje aktuální čas ve zvolené časové zóně.
 demand: 2
 ---
 

daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Zasílání newsletteru
+lead: Přidejte do formuláře zaškrtávací políčko pro zasílání novinek.
 demand: 3
+solutionAccess: lock
 ---
 
 ::fig[ukázka řešení]{src=assets/ukazka-reseni.gif}

daweb/react/formulare-efekty/efekty-api.md

@@ -1,17 +1,21 @@
 ## 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`. Tuto funkci je nejlepší zavolat právě ve chvíli, kdy se naše komponenta poprvé objeví na stránce.
+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žale můžeme ji pojmenovat jakkoliv.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.
 
 ```js
-const App = () => {
+const HomePage = () => {
   const [name, setName] = useState('');
 
   useEffect(() => {
-    fetch('https://svatky.adresa.info/json')
-      .then((response) => response.json())
-      .then((data) => setName(data[0].name));
+    const fetchName = async () => {
+      const response = await fetch('https://nameday.abalin.net/api/V1/today');
+      const data = await response.json();
+      setName(data.nameday.cz);
+    };
+
+    fetchName();
   }, []);
 
   return (
@@ -23,4 +27,14 @@ const App = () => {
 };
 ```
 
-Výsledný kód si můžete prohlédnout v [Codesandboxu zde](https://codesandbox.io/s/da-web-svatky-ndwfg2?file=/src/App.jsx).
+Povšimněte si funkce `fetchName`, kterou jsme si vytvořili přimo uvnitř efektu k tomu, aby získala jméno z API a nastavila jej do stavu. Funkci `fetchName` jsme museli vytvořit, neboť efekt sám o sobě nemůže být asynchronní. V Reactu Nemůžeme udělat toto:
+
+```js
+useEffect(async () => {
+  const response = await fetch('https://nameday.abalin.net/api/V1/today');
+  const data = await response.json();
+  setName(data.nameday.cz);
+}, []);
+```
+
+Z tohoto důvodu si vždy pro fetchování dat vytvoříme pomocnou funkci, kterou pak v efektu ihned zavoláme. V našem případě jsme funkci nazvali `fetchName`, protože stahuje jméno z API.

daweb/react/formulare-efekty/efekty-zavislosti.md

@@ -0,0 +1,54 @@
+## Efekty se závislostmi
+
+Zatím jsme viděli efekty, které se spouštějí pouze jednou, tedy ve chvíli, kdy se komponenta poprvé objeví na stránce. Občas však potřebujeme efekt, který se spustí pokaždé, když se změní nějaká stavová proměnná nebo _prop_. Takový efekt vyrobíme tak, že do hranatých závorek napíšeme stavovou proměnnou nebo _prop_, na kterou má efekt reagovat, nebo-li na které spuštění efektu záviset.
+
+```js
+const Komponenta = () => {
+  const [datum, setDatum] = useState('2022-05-14');
+
+  useEffect(() => {
+    console.log(`Hodnota stavové proměnné datum je ${datum}.`);
+  }, [datum]);
+
+  // …
+};
+```
+
+Tato technika se nám hodí nejčastějí 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.
+
+```jsx
+export const HomePage = () => {
+  const [name, setName] = useState('');
+  const [datum, setDatum] = useState('2022-11-11');
+
+  useEffect(() => {
+    const fetchName = async () => {
+      const [rok, mesic, den] = datum.split("-");
+      const response = await fetch(
+        `https://nameday.abalin.net/api/V1/getdate?day=${den}&month=${mesic}`
+      );
+      const data = await response.json();
+      setName(data.namedays.cz);
+    };
+
+    fetchName();
+  }, [datum]);
+
+  return (
+    <>
+      <div className="container">
+        <h1>Svátky</h1>
+        <label>
+          Vyberte datum:{" "}
+          <input
+            type="date"
+            value={datum}
+            onChange={(event) => setDatum(event.target.value)};
+          />
+        </label>
+        <div className="nameday">V tento den má svátek {name}</div>
+      </div>
+    </>
+  );
+};
+```

daweb/react/formulare-efekty/efekty.md

@@ -2,10 +2,10 @@
 
 V mírně komplikovanějších React aplikacích brzy narazíme na potřebu zareagovat na určité situace, které nastávají během vykreslování (renderování) komponenty. Budeme chtít například spustit nějaký kód ve chvíli, kdy se komponenta poprvé objeví na stránce. Čas od času také budeme chtít v komponentě provést něco ve chvíli, kdy se změní hodnota v props nebo ve stavu. K tomuto nám v Reactu slouží takzvané :term{cs="efekty" en="effects"}.
 
-Efekty jsou v podstatě velmi podobné událostem. Ve chvíli, kdy uvnitř komponenty něco nastane, budeme chtít zavolat naši funkci. Jako příklad si vyrobíme jednoduchou aplikaci, která řiká, kdo má zrovna svátek.
+Efekty jsou v podstatě velmi podobné událostem. Ve chvíli, kdy uvnitř komponenty něco nastane, budeme chtít zavolat námi definovanou funkci. Jako příklad si vyrobíme jednoduchou aplikaci, která řiká, kdo má zrovna svátek.
 
 ```js
-const App = () => {
+const HomePage = () => {
   return (
     <>
       <h1>Svátky</h1>
@@ -15,10 +15,10 @@ const App = () => {
 };
 ```
 
-Pokud bychom chtěli spustit kousek kódu ve chvíli, kdy se naše komponenta `App` objeví na stránce, použijeme funkci `useEffect` a té předáme námi vytvořenou funkci.
+Pokud bychom chtěli spustit kousek kódu ve chvíli, kdy se naše komponenta `HomePage` objeví na stránce, použijeme funkci `useEffect` a té předáme námi vytvořenou funkci.
 
 ```js
-const App = () => {
+const HomePage = () => {
   useEffect(() => {
     console.log('jsem tady');
   }, []);

daweb/react/formulare-efekty/entry.yml

@@ -1,10 +1,11 @@
 title: Formulářové prvky, efekty
-lead: 'Zapojíme do našich React aplikací formulářové prvky a ukážeme si, jak pomocí efektů volat API.'
-access: 'claim'
+lead: Zapojíme do našich React aplikací formulářové prvky a ukážeme si, jak pomocí efektů volat API.
+access: claim
 sections:
   - formularove-prvky
   - cv-formularove-prvky
   - efekty
   - efekty-api
-  - specializovane-efekty
+  - efekty-zavislosti
   - cv-efekty-api
+  - shrnuti

daweb/react/formulare-efekty/formularove-prvky.md

@@ -1,7 +1,7 @@
-Díky tomu, že jsme se v minulé lekci naučili pracovat se stavem, otvírají se nám v Reactu mnohé nové možnosti.
-
 ## Formulářové prvky
 
+Díky tomu, že jsme se v minulé lekci naučili pracovat se stavem, otvírají se nám v Reactu mnohé nové možnosti.
+
 Formulářové prvky jako textová políčka, zaškrtávací tlačítka apod. jsou jedním z hlavních způsobů, jak získat vstup od uživatele. V čistém JavaScritpu jsme zvyklí získávat hodnoty z těchto prvků tak, že je vybereme pomocí `querySelector` a použijeme například vlastnost `value`.
 
 ```html
@@ -16,7 +16,7 @@ const ageInput = document.querySelector('#age-input');
 console.log(ageInput.value);
 ```
 
-V Reactu však k DOM elementům na stránce přístup nemáme. Hodnotu uvnitř textového políčka si tak musíme uložit do stavu.
+V Reactu však k DOM elementům na stránce přístup nemáme. Hodnotu uvnitř textového políčka si tak musíme uložit do stavu, abychom se k ní mohli dostat, když ji budeme potřebovat.
 
 Představme si jednoduchou komponentu, kde uživatel zadá svůj věk podobně jako v příkladu výše.
 
@@ -45,10 +45,9 @@ const AgeField = () => {
 
 Tímto postupem se snažíme provázat obsah políčka s hodnotou ve stavu. Kdykoliv uživatel obsah políčka změní, my na to zareagujeme změnou stavu `age`. Tomuto principu se anglicky říká <em>data binding</em>.
 
-Pozor však, že náš data binding zatím funguje pouze jedním směrem, tedy _změna políčka_ ⟶
-_změna stavu_. Pokud se z nějakého důvodu změní hodnota ve stavu `age`, obsah políčka se zatím neaktualizuje.
+Pozor však, že náš data binding zatím funguje pouze jedním směrem, tedy _změna políčka_ ⟶ _změna stavu_. Pokud se z nějakého důvodu změní hodnota ve stavu `age`, obsah políčka se zatím neaktualizuje.
 
-### Obousměrný data binding
+## Obousměrný data binding
 
 V praxi téměř vždy budeme chtít takzvaný two-way (obousměrný) data binding. To zařídíme jednoduše tak, že hodnotu ve stavu vždy nastavíme jako hodnotu políčka.
 
@@ -65,4 +64,4 @@ const AgeField = () => {
 };
 ```
 
-Takto zajistíme provázanost i druhým směrem, tedy _změna stavu_ ⟶ _změna políčka_. Nyní, když změníme obsah políčka, změní se nám stav. A když naopak změníme stav, změní se nám obsah políčka.
+Takto zajistíme provázanost i druhým směrem, tedy _změna stavu_ ⟶ _změna políčka_. Nyní, když změníme obsah políčka, změní se náš stav. A když naopak změníme stav, změní se obsah políčka.

daweb/react/formulare-efekty/shrnuti.md

@@ -0,0 +1,7 @@
+## Shrnutí
+
+Po této lekci byste měli vědět a znát
+
+- co to je obousměrný data binding a jak propojit stav s obsahem políčka ve formuláři,
+- jak v Reactu vytvořit jednoduchý efekt a načíst pomocí něj data z API,
+- jak používat pokročilejší efekty se závislostmi.