diff --git a/daweb/react/pokrocila-komunikace/cv-pokrocile.md b/daweb/react/pokrocila-komunikace/cv-pokrocile.md new file mode 100644 index 00000000..64d7a286 --- /dev/null +++ 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 deleted file mode 100644 index d9cee56a..00000000 --- a/daweb/react/pokrocila-komunikace/cv-sourozenci.md +++ /dev/null @@ -1,5 +0,0 @@ -## Cvičení: Komunikace mezi sourozenci - -::exc[cvlekce/dotaznik] -::exc[cvlekce/dotaznik-fajfka] -::exc[cvlekce/dotaznik-odpoved] diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md index a7813025..c9efa4ff 100644 --- 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 index 94d90354..e85ee6b8 100644 --- 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 index 44a6eae9..ae784588 100644 --- 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/daweb/react/komunikace-dite-rodic/cvlekce/hamburger-menu.md b/daweb/react/pokrocila-komunikace/cvlekce/hamburger-menu.md similarity index 63% rename from daweb/react/komunikace-dite-rodic/cvlekce/hamburger-menu.md rename to daweb/react/pokrocila-komunikace/cvlekce/hamburger-menu.md index 71ed5b80..aaad4c76 100644 --- a/daweb/react/komunikace-dite-rodic/cvlekce/hamburger-menu.md +++ b/daweb/react/pokrocila-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 `` 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 `` 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 new file mode 100644 index 00000000..02bbd10a --- /dev/null +++ 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/daweb/react/komunikace-dite-rodic/cvlekce/nazev-stranky.md b/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md similarity index 100% rename from daweb/react/komunikace-dite-rodic/cvlekce/nazev-stranky.md rename to daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md diff --git a/daweb/react/pokrocila-komunikace/entry.yml b/daweb/react/pokrocila-komunikace/entry.yml index 71c6e803..1d3e0e5a 100644 --- 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