Merge pull request #669 from Czechitas-podklady-WEB/668-react-4-přida…

…t-cvičení React 4: Přídání cvičení
Czechitas-podklady-WEB · Nov 6, 2023 · 58c7026 · 58c7026
2 parents fa681ff + aff3f97
commit 58c7026
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 11 deletions.
diff --git a/daweb/react/pokrocila-komunikace/cv-pokrocile.md b/daweb/react/pokrocila-komunikace/cv-pokrocile.md
@@ -0,0 +1,14 @@
+## Cvičení: Pokročilejší komunikace
+
+::exc[cvlekce/komunikace]
+
+V následujících dvou cvičeních si budeme hrát s hamburge menu.
+
+::exc[cvlekce/hamburger-menu]
+::exc[cvlekce/nazev-stranky]
+
+Komunikaci mezi sourozenci si vyzkoušíme na aplikace zborazující dotazník.
+
+::exc[cvlekce/dotaznik]
+::exc[cvlekce/dotaznik-fajfka]
+::exc[cvlekce/dotaznik-odpoved]
diff --git a/daweb/react/pokrocila-komunikace/cv-sourozenci.md b/daweb/react/pokrocila-komunikace/cv-sourozenci.md
diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md
@@ -1,6 +1,8 @@
 ---
 title: Dotazník s fajfkou
+lead: Zařiďte, aby se po kliknutí na odpověď zobrazil symbol fajfky.
 demand: 3
+solutionAccess: lock
 ---
 
 V našem dotazníku budeme chtít zařídit, že po kliknutí na jednu z 5 možných odpovědí se u otázky zobrazí ikonka fajfky. To provedeme tak, že dvě děti `Option` a `QuestionBody` spolu budou komunikovat skrze stav rodiče.

diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-odpoved.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-odpoved.md
@@ -1,6 +1,8 @@
 ---
 title: Dotazník s odpovědí
+lead: Zařiďte, aby se po kliknutí na odpověď zobrazil symbol odpovědi.
 demand: 3
+solutionAccess: lock
 ---
 
 Pokračujme v příkladu z předchozího cvičení. Nyní budeme chtít místo fajfky zobrazovat přímo uživatelem vybranou odpověd.

diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik.md
@@ -1,12 +1,14 @@
 ---
 title: Dotazník, seznámení
+lead: Začneme tvořit aplikaci na tvorbu dotazníků spokojenosti.
 demand: 2
+solutionAccess: lock
 ---
 
-V tomto cvičení budeme vytvářet jednoduchou aplikaci na tvorbu dotazníků spokojenosti.
+V tomto cvičení začneme vytvářet jednoduchou aplikaci na tvorbu dotazníků spokojenosti.
 
 1. Vytvořte si repozitář ze šablony [cviceni-dotaznik](https://github.com/Czechitas-podklady-WEB/cviceni-dotaznik).
 1. Nainstalujte závislosti a aplikaci spusťte.
-1. Prohlédněte si vzhled aplikace a také její zdrojový kód. Nejsme už žádní troškaři, aplikace se skládá hned z pěti oddělených komponent. Prohlédněte si, jak jsou navzájem propojené a seznamte se s celkovou strukturou aplikace. Komponentu `Icon` zatím nezkoumejte. Je v ní trochu nepřehledný kód pro zobrazování ikonek.
+1. Prohlédněte si vzhled aplikace a také její zdrojový kód. Nejsme už žádní troškaři, aplikace se skládá hned z pěti oddělených komponent. Prohlédněte si, jak jsou navzájem propojené a seznamte se s celkovou strukturou aplikace. Komponentu `Icon` zatím nezkoumejte. Je v ní trochu pokročilejší kód pro zobrazování ikonek.
 1. Prohlédněte si komponentu `Option`. Přepište ji tak, aby používala destrukturování props.
 1. Totéž proveďte s komponentami `Question` a `QuestionBody`.
diff --git a/...kace-dite-rodic/cvlekce/hamburger-menu.md → ...cila-komunikace/cvlekce/hamburger-menu.md b/...kace-dite-rodic/cvlekce/hamburger-menu.md → ...cila-komunikace/cvlekce/hamburger-menu.md
@@ -5,10 +5,10 @@ demand: 3
 solutionAccess: lock
 ---
 
-Nyní náš čeká složitější případ komunikace, kdy se předává informace směrem od dítěte k rodiči pomocí callbacku.
+Pomocí pokročilejší komunikace mezi komponentami zprovozníme hamburger menu, které se otevírá a zavírá při kliknutí na položku.
 
 1. Vytvořte si repozitář ze šablony [cviceni-hamburger](https://github.com/Czechitas-podklady-WEB/cviceni-hamburger) obsahující React stránku s jednoduchým hamburger menu. Prohlédněte si připravený kód.
 1. V komponentě `HomePage` vytvořte stav `menuOpened`, který bude obsahovat hodnotu `true` nebo `false` podle toho, zda má být menu otevřeno nebo zavřeno. Stav ovládejte kliknutím na tlačítko `.menu__btn`.
 1. Dle hodnoty ve stavu `menuOpened` správně sestavte třídu pro element `.menu`. K zavření menu slouží CSS třída `menu--closed`.
-1. Chceme, aby komponenta `MenuItem` přijímala prop s názvem `onChangeVisible`. Ta bude očekávat callback, který se zavolá s hodnotou `false`, když uživatel vybere danou položku, aby se menu zavřelo. Přidejte tedy na prvek `<a>` posluchač události `onClick`, který zavolá předaný callback s hodnotou `false`.
-1. V komponentě `HomePage` předejte všem instancím komponenty `MenuItem` skrze _prop_ `onChangeVisible` funkci měnící stav.
+1. Chceme, aby komponenta `MenuItem` přijímala prop s názvem `onSelect`. Ta bude očekávat callback, který se zavolá, když uživatel vybere danou položku, aby se tak menu zavřelo. Přidejte tedy na prvek `<a>` posluchač události `onClick`, který zavolá předaný callback.
+1. V komponentě `HomePage` předejte všem instancím komponenty `MenuItem` skrze _prop_ `onSelect` funkci `handleSelectItem`, která nastaví stav `menuOpened` na `false`.
diff --git a/daweb/react/pokrocila-komunikace/cvlekce/komunikace.md b/daweb/react/pokrocila-komunikace/cvlekce/komunikace.md
@@ -0,0 +1,9 @@
+---
+title: Pokročilá komunikace
+lead: Vyzkoušejte si pokročilejší komunikaci mezi komponentami.
+demand: 3
+solutionAccess: lock
+---
+
+1. Vytvořte si repozitář ze šablony [cviceni-pokrocila-komunikace](https://github.com/Czechitas-podklady-WEB/cviceni-pokrocila-komunikace).
+1. Následujte instrukce z README repozitáře.
diff --git a/...ikace-dite-rodic/cvlekce/nazev-stranky.md → ...ocila-komunikace/cvlekce/nazev-stranky.md b/...ikace-dite-rodic/cvlekce/nazev-stranky.md → ...ocila-komunikace/cvlekce/nazev-stranky.md
diff --git a/daweb/react/pokrocila-komunikace/entry.yml b/daweb/react/pokrocila-komunikace/entry.yml
@@ -5,5 +5,5 @@ sections:
   - dite-rodic
   - sourozenci
   - potomci
+  - cv-pokrocile
   - shrnuti
-# - cv-sourozenci