diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md index 414895ac..ae9e2bd0 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md @@ -13,3 +13,7 @@ V našem dotazníku budeme chtít zařídit, že po kliknutí na jednu z 5 možn 1. Zařiďte následující: pokud je ve stavu `answered` hodnota `false`, chceme, aby componenta `QuestionBody` měla ikonku `symbolQuestion`. Pokud je stav `true`, chceme, aby typ ikonky byl `symbolTick`. 1. Nyní chceme komponentě `Option` přidat callback, pomocí kterého může informovat svého rodiče, že otázka byla zodpovězena. Přidejte tedy komponentě `Option` prop s názvem `onSelected`. V této prop očekáváme funkci. Zařiďte, aby komponenta `Option` zavolala funkci `onSelected` ve chvíli, kdy na tuto komponentu klikneme. 1. V komponentě `Question` si vytvořte funkci `handleSelect`. Všem komponentám `Option` pak skrze prop `onSelected` tuto funkci předejte. Funkce `handleSelect` nechť nastaví stav `answered` na hodnotu `true`. Takto zajístíme, že kdykoliv uživatel klikne na nějakou možnost, stav se nám nastaví na `true` a tím se změní ikonka v těle otázky na fajfku. + +:::solution +Řešení je v repository cvičení v branchi reseni v commitu [2e6c78d](https://github.com/Czechitas-podklady-WEB/cviceni-dotaznik/tree/2e6c78df178fe9a0ad960d2be1e04f2bca7e0c09). +::: diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-odpoved.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-odpoved.md index bd18dac3..35d6c73d 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-odpoved.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-odpoved.md @@ -14,3 +14,7 @@ Pokračujme v příkladu z předchozího cvičení. Nyní budeme chtít místo f 1. Funkce `handleSelect` v komponentě `Question` bude pak mít jeden parametr, který nazveme `iconType`. Jakmile se tato funkce zavolá, nastavíme náš stav `answer` na hodnotu získanou v tomto parametru. Tímto jsem zařídili, že komponenta `Option` předá svému sourozenci `QuestionBody` informaci o tom, kterou ikonku uživatel vybral. + +:::solution +Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-dotaznik/tree/reseni). +::: diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik.md index 8945b8da..e0d2fbb1 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik.md @@ -13,3 +13,7 @@ V tomto cvičení začneme vytvářet jednoduchou aplikaci na tvorbu dotazníků 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`. + +:::solution +Řešení je v repository cvičení v branchi reseni v commitu [230b48c](https://github.com/Czechitas-podklady-WEB/cviceni-dotaznik/tree/230b48c741a526741d0e7937915f532f0b07be5a). +::: diff --git a/daweb/react/pokrocila-komunikace/cvlekce/hamburger-menu.md b/daweb/react/pokrocila-komunikace/cvlekce/hamburger-menu.md index ba7fc584..d0996587 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/hamburger-menu.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/hamburger-menu.md @@ -13,3 +13,7 @@ Pomocí pokročilejší komunikace mezi komponentami zprovozníme hamburger menu 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 `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 `` 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`. + +:::solution +Řešení je v repository cvičení v branchi reseni v commitu [b51a03e](https://github.com/Czechitas-podklady-WEB/cviceni-hamburger/tree/b51a03e9b874ee00c1507b6884ca4fbcaa6c47f9). +::: diff --git a/daweb/react/pokrocila-komunikace/cvlekce/komunikace.md b/daweb/react/pokrocila-komunikace/cvlekce/komunikace.md index ee7326d6..4b27dce1 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/komunikace.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/komunikace.md @@ -8,3 +8,7 @@ solutionAccess: protected 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. + +:::solution +Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-pokrocila-komunikace/tree/reseni). +::: diff --git a/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md b/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md index 3ddbee35..49d3ded2 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md @@ -11,3 +11,7 @@ Pokračujte v předchozím příkladu. Nyní si vyzkoušíme callback s parametr 1. Přidejte do komponenty `HomaPage` stav s názvem `pageTitle`, který bude představovat název aktuální stránky. Jeho výchozí hodnotu nastavte na `Domů` a použijte tento stav uvnitř elementu `h1`. 1. Zařiďte, aby komponenta `MenuItem` při volání funkce `onSelect` zavolala tuto funkci se vstupem, který udává název stránky, který se má zobrazit. Takto předá název stránky rodičovské komponentě. 1. Do funkce `handleSelectItem` přidejte parametr `page` a nastavte stav `pageTitle` na hodnotu z tohoto parametru. + +:::solution +Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-hamburger/tree/reseni). +:::