Merge pull request #665 from Czechitas-podklady-WEB/664-react-3-cviče…

…ní-na-doma

React 3: Shrnutí a úložky na doma

daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni-2/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Hodnocení 2
+lead: Dokončete komponentu pro hodnocení hvězdičkami.
 demand: 4
+solutionAccess: lock
 ---
 
 Navážeme na úložku s hodnocením a zařídíme, aby se při kliknutí na hvězdičku rozsvítily všechny hvězdičky před ní.
@@ -9,10 +11,10 @@ Navážeme na úložku s hodnocením a zařídíme, aby se při kliknutí na hv
 
 Logiku fungování zařídíme tak, že tentokrát hvězdičky nebudou mít vlastní stav. Jejich rozsvěcení a zhasínání bude řídit rodičovaská komponenta `Rating` pomocí stavu a props.
 
-1. Upravte komponentu `Star` tak, aby místo stavu `glowing` používala prop jménem `glowing`. Zatím zakomentujte funkci pro `onClick`, která nám v tuto chvíli přestane fungovat. Vyzkoušejte si však, že můžete jednotlivé hvězdičky rozsvítit nastavením prop `glowing` v kódu komponenty `Rating`.
-1. Nyní využijeme stavu `value` v komponentě `Rating`. Stačí si uvědomit, že například první hvězdička má svítit, když je hodnota `value` větší nebo rovna 1. Takže můžeme napsat takovouto podmínku.
+1. Upravte komponentu `Star` tak, aby místo stavu `glowing` používala prop jménem `glowing`. Vyzkoušejte si, že můžete jednotlivé hvězdičky rozsvítit nastavením prop `glowing` v kódu komponenty `Rating`.
+1. Nyní využijeme stavu `rating` v komponentě `Rating`. Stačí si uvědomit, že například první hvězdička má svítit, když je hodnota `rating` větší nebo rovna 1. Takže můžeme napsat takovouto podmínku.
    ```js
-   <Star glowing={value >= 1} // zbytek props....
+   <Star value={1} glowing={rating >= 1} // zbytek props....
    ```
    Upravte podmínky u všech hvězdiček tak, aby svítily ve správnou chvíli. Zkuste si nastavit výchozí stav na různé hodnoty a vyzkoušejte, že se hvězdičky rozsvítí správně.
-1. V tuto chvíli už při kliknutí na hvězdičku nepotřebujeme posílat informace o rozsvěcení a zhasínání. To se od teď dělá změnou stavu `value`. Už tedy v komponentě nepotřebujeme props `onGlow` a `onDim`. Stačí nám jedna prop `onSelect`, která se zavolá s hodnotou, kterou je potřeba nastavit do stavu `value`. Je tedy potřeba, aby každá hvězdička věděla, jakou hodnotu má poslat svému rodiči. To můžeme zařídit tak, že každé `Star` dáme prop `rating`. První hvězdička tak bude mít `rating={1}`, druhá `rating={2}` apod. V tuto chvíli už každá hvězdička může zavolat funkci `onSelect` se správnou hodnotou a předat ji rodiči. Rodič (komponenta `Rating`) pak tuto hodnotu uloží do stavu `value` a tím se nám rozsvítí příslušné hvězdíčky.
+1. V tuto chvíli už každá hvězdička volá funkci `onSelect` se správnou hodnotou a předává ji rodiči. Rodič (komponenta `Rating`) pak tuto hodnotu uloží do stavu `rating` a tím se nám rozsvítí příslušné hvězdíčky.

daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni.md

@@ -1,17 +1,17 @@
 ---
 title: Hodnocení
-demand: 3
+lead: Oživte komponentu pro hodnocení pomocí hvězdiček.
+demand: 4
+solutionAccess: lock
 ---
 
 V tomto cvičení vdechneme život komponentě, která umožňuje hodnocení pomocí hvězdiček. To znáte například z hodnocení filmů nebo třeba restaurací a hotelů.
 
 1. Vytvořte si repozitář ze šablony [cviceni-hodnoceni](https://github.com/Czechitas-podklady-WEB/cviceni-hodnoceni) obsahující React stránku s hodnocením pomocí pěti hvězdiček.
-1. Prohlédněte si, jak fungují komponenty `Rating` a `Star`. V následujicích bodech budeme chtít zařídit, aby se při rozsvícení libovolné hvězdičky zvýšilo číslo udávající hodnocení o jedna. V tomto případě nám nebude vadit, když budeme hvězdičky rozsvěcet mimo pořadí
-1. V komponentě `Star` vyrobte handler pro událost `onClick`. Zařiďte, aby se hvězdička po kliknutí rozsvítila a po opětovném kliknutí opět zhasla.
-1. Do komponenty `Star` přidejte prop `onGlow`. Toto bude funkce, která se zavolá, když se hvězdička rozsvítí.
-1. V komponentě `Rating` vytvořte funkci `handleGlow`. Tuto funkci obdrží všechny hvězdičky jako prop. Zatím do ní dejte pouze nějaký `console.log`.
-1. V komponentě `Star` zavolejte funkci `onGlow` jen v případě, že se hvězdička rozsvěcí. Vyzkoušejte, že v konzoli vidíte výpisy z funkce `handleGlow`.
-1. Nyní upravte funkci `handleGlow` tak, aby ke stavu `value` přičetla jedničku. Pokochejte se, jak to všechno krásně funguje.
-1. Nyní budeme chtít od hodnocení odečíst jedničku, když se hvězdička zhasne. Komponenta `Star` tedy bude mít druhou prop s názvem `onDim`, která se zavolá při zhasnutí hvězdičky. K tomu budeme na straně komponenty `Rating` potřebovat funkci `handleDim`. Postup je analogický jako v případě rozsvěcení, jistě jej zvládnete bez dalších instrukcí.
+1. Prohlédněte si, jak fungují komponenty `Rating` a `Star`. V následujicích bodech budeme chtít zařídit, aby se při rozsvícení libovolné hvězdičky zborazilo správné číslo udávající hodnocení.
+1. V komponentě `Star` vyrobte handler pro událost `onClick`. Zařiďte, aby se hvězdička po kliknutí rozsvítila. Zatím nepotřebujeme, aby šlo hvězdičku zhasnout.
+1. Každá hvězdička potřebuje vědět, jaké číslo se má po kliknutí na ni zobrazit. Do komponenty `Star` proto přidejte prop `value`, která bude obsahovat číslo, které se má po kliknutí zobrazit. První hvězdička tak bude mít `value={1}`, druhá `value={2}` apod. Zajimavé je, že hvězdička toto číslo nebude nijak zobrazovat, ale pouze ho později předá komponentě `Rating`, když se na hvězdičku klikne. To provedeme v následujících krocích.
+1. Do komponenty `Star` přidejte prop `onSelect`. Toto bude funkce, která se zavolá pouze v případě, když se hvězdička rozsvěcuje. Komponenta tuto funkci zavolá při kliknutí na hvězdičku a pošle jí jako parametr hodnotu `value`, kterou jsme v předchozím kroku přidali.
+1. V komponentě `Rating` předejte skrze prop `onSelect` všem instancím komponenty `Star` callback, který nastaví stav `rating` na hodnotu, kterou mu komponenta `Star` předala.
 
-Zatím si můžeme hvězdičky zhasínat a rozsvěcet, jak se nám zachce, i mimo pořadí. To napravíme v dalším cvičení.
+Nyní by mělo být možné kliknutím na hvězdičky nastavit správné hodnocení. Hvezdičky se sice nechovají úplně správně, protože bychom chtěli, aby se při kliknutí na hvězdičku rozsvítily všechny hvězdičky s nižším číslem. To si však necháme na další cvičení.

daweb/react/komunikace-dite-rodic/entry.yml

@@ -5,6 +5,6 @@ sections:
   - rodic-dite
   - dite-rodic
   - cv-komunikace
-  # - ulozky
-  # - dobrovolne
+  - shnruti
+  - ulozky
   # - cvicny-projekt

daweb/react/komunikace-dite-rodic/shrnuti.md

@@ -0,0 +1,7 @@
+## Shrnutí
+
+Po této lekci byste měli vědět a znát
+
+- základní povědomí, jak probíhá komunikace mezi komponentami,
+- jak komponenty komunikují pomocí _props_, tedy ve směru od rodiče k dítěti,
+- jak komponenty komunikují pomocí callbacků, tedy ve směru od dítěte k rodiči.

daweb/react/komunikace-dite-rodic/ulozky.md

@@ -1,3 +1,4 @@
 ## Doporučené úložky na doma
 
 ::exc[cvdoma/hodnoceni]
+::exc[cvdoma/hodnoceni-2]