diff --git a/daweb/js2/podminene-zobrazeni/cvdoma/rezervace-pokoje.md b/daweb/js2/podminene-zobrazeni/cvdoma/rezervace-pokoje.md index aa1562c5..f5e60e97 100644 --- a/daweb/js2/podminene-zobrazeni/cvdoma/rezervace-pokoje.md +++ b/daweb/js2/podminene-zobrazeni/cvdoma/rezervace-pokoje.md @@ -75,10 +75,10 @@ Rozdělte již naprogramovanou větší komponentu na vícero menších komponen ); }; ``` -1. Zobrazte komponentu na stránce. Lehce ji nastylujte, aby se zobrazovala hezky. Můžete požádat aby to za vás udělal ChatGPT, abyste se nemuseli příliš trápit. -1. Rozhodněte, jak rozdělit komponentu na více menších komponente. Navrhujeme vytvořit alespoň 4 různé komponenty, ze kterých pak poskládáte výslednou komponentu `BookingSummary`. Dejte komponentám smysluplná jména a vymyslete, jaké mají mít `props`. +1. Zobrazte komponentu na stránce. Lehce ji nastylujte, aby se zobrazovala hezky. Můžete požádat, aby to za vás udělal ChatGPT, abyste se nemuseli příliš trápit. +1. Rozhodněte, jak rozdělit komponentu na více menších komponent. Navrhujeme vytvořit alespoň 4 různé komponenty, ze kterých pak poskládáte výslednou komponentu `BookingSummary`. Dejte komponentám smysluplná jména a vymyslete, jaké mají mít `props`. ### Bonus 1. Zkuste vymyslet strukturu JavaScriptového objektu, který bude obsahovat data pro komponentu `BookingSummary` a zařiďte, aby komponenta zobrazovala tato data. -1. Jelikož ještě neumíme vytvořit vlastní API, zatím si pouze představuje, že tato data stahujete z nějakého serveru. Můžete této představe pomoct tak, že data vytvoříte na tom místě, kde byste jinak volali funkci `fetch`. +1. Jelikož ještě neumíme vytvořit vlastní API, zatím si pouze představujte, že tato data stahujete z nějakého serveru. Můžete této představě pomoct tak, že data vytvoříte na tom místě, kde byste jinak volali funkci `fetch`. diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/destrukturovani.md b/daweb/js2/podminene-zobrazeni/cvlekce/destrukturovani.md index 0f37d64b..ef0461cc 100644 --- a/daweb/js2/podminene-zobrazeni/cvlekce/destrukturovani.md +++ b/daweb/js2/podminene-zobrazeni/cvlekce/destrukturovani.md @@ -44,6 +44,6 @@ const recipe = { }; ``` -1. Pomocí destrukturování si vytvořte proměnnou `name`, do které uložte hodnota klíče `name` z objektu `recipe`. +1. Pomocí destrukturování si vytvořte proměnnou `name`, do které uložte hodnotu klíče `name` z objektu `recipe`. 2. Podobným způsobem si vytvořte proměnné `cuisine`, `ingredients` a `instructions`. 3. Z objektu `ingredients` si pomocí destrukturování vytvořte proměnné `chicken`, `vegetables`, `seasonings` a `others`. diff --git a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md b/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md index 92665ddb..0857b549 100644 --- a/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md +++ b/daweb/js2/podminene-zobrazeni/cvlekce/mejlik-hlavicka/exercise.md @@ -21,7 +21,7 @@ Navážeme na předchozí cvičení a vytvoříme komponentu pro hlavičku naš
``` - zobrazí se hlavičku s přihlášeným uživatelem. Pokud je naopak použita takto + zobrazí se hlavička s přihlášeným uživatelem. Pokud je naopak použita takto ```js
diff --git a/daweb/js2/podminene-zobrazeni/destrukturovani.md b/daweb/js2/podminene-zobrazeni/destrukturovani.md index c5b20d36..1222021d 100644 --- a/daweb/js2/podminene-zobrazeni/destrukturovani.md +++ b/daweb/js2/podminene-zobrazeni/destrukturovani.md @@ -1,6 +1,6 @@ ## Destrukturování objektů -Než se pustíme do podmíněného zobrazování, ukážeme si jednu užitěčnou techniku, která se nám bude hodit jak při fetchování dat ze serveru tak při práci s komponentami. Jedná se o takzvané :term{cs="destrukturování objektů" en="object destructuring"}. +Než se pustíme do podmíněného zobrazování, ukážeme si jednu užitečnou techniku, která se nám bude hodit jak při fetchování dat ze serveru, tak při práci s komponentami. Jedná se o takzvané :term{cs="destrukturování objektů" en="object destructuring"}. Při stahování dat ze serveru ale i v mnoha jiných situacích se nám bude často stávat, že chceme z objektu rychle získat vícero hodnot a uložit je do různých proměnných, například takto: @@ -62,7 +62,7 @@ const { password, length } = await response.json(); ## Destrukturování props -Destrukturování se také často použije při práci s komponentami. Mejmě pro příklad komponentu zobrazující čas. +Destrukturování se také často použije při práci s komponentami. Mějme pro příklad komponentu zobrazující čas. ```jsx const Time = (props) => { diff --git a/daweb/js2/podminene-zobrazeni/podminene-zobrazeni.md b/daweb/js2/podminene-zobrazeni/podminene-zobrazeni.md index b91521b6..1e35b669 100644 --- a/daweb/js2/podminene-zobrazeni/podminene-zobrazeni.md +++ b/daweb/js2/podminene-zobrazeni/podminene-zobrazeni.md @@ -69,7 +69,7 @@ const Product = (props) => { }; ``` -Občas se nám stane, že v jednom z případů podmínky nechcem zobrazit nic. Dejme tomu, že nechceme uživateli zobrazovat zprávu o nedostupnosti, ale chceme pouze vynechat objednávací tlačítko. V takovém případě můžeme vrátit hodnotu `null`, která pro React znamená, že nemá zobrazit nic. +Občas se nám stane, že v jednom z případů podmínky nechceme zobrazit nic. Dejme tomu, že nechceme uživateli zobrazovat zprávu o nedostupnosti, ale chceme pouze vynechat objednávací tlačítko. V takovém případě můžeme vrátit hodnotu `null`, která pro React znamená, že nemá zobrazit nic. ```js const Product = (props) => { diff --git a/daweb/js2/podminene-zobrazeni/predavani-hodnot.md b/daweb/js2/podminene-zobrazeni/predavani-hodnot.md index 68c682c5..2629eb85 100644 --- a/daweb/js2/podminene-zobrazeni/predavani-hodnot.md +++ b/daweb/js2/podminene-zobrazeni/predavani-hodnot.md @@ -12,7 +12,7 @@ Někoho by mohlo lákat předat hodnotu `true` takto ``` -ve vlastnosti `props.bought` uvnitř komponenty bychom pak ale měli řetězec `'true'`, nikoliv pravdivostní hodnotu `true`. Pokud totiž předáváme hodnoty do props pomocí uvozovek jak jsme zvyklí z HTML, uvnitř komponenty vždy obdržíme tyto hodnoty jako řetězce. Pokud chceme skutečnou boolean hodnotu `true` nebo `false`, musíme si pomocí složených závorek otevřít JavaScriptové okénko. Toto platí i pro ostatní hodnoty. Pokud chceme předat pomocí props číslo, nebo třeba `null`, provedeme to opět pomocí složených závorek. +ve vlastnosti `props.bought` uvnitř komponenty bychom pak ale měli řetězec `'true'`, nikoliv pravdivostní hodnotu `true`. Pokud totiž předáváme hodnoty do props pomocí uvozovek, jak jsme zvyklí z HTML, uvnitř komponenty vždy obdržíme tyto hodnoty jako řetězce. Pokud chceme skutečnou boolean hodnotu `true` nebo `false`, musíme si pomocí složených závorek otevřít JavaScriptové okénko. Toto platí i pro ostatní hodnoty. Pokud chceme předat pomocí props číslo, nebo třeba `null`, provedeme to opět pomocí složených závorek. ```js diff --git a/daweb/js2/podminene-zobrazeni/ternarni-operator.md b/daweb/js2/podminene-zobrazeni/ternarni-operator.md index dc2ae7ed..0379fbdc 100644 --- a/daweb/js2/podminene-zobrazeni/ternarni-operator.md +++ b/daweb/js2/podminene-zobrazeni/ternarni-operator.md @@ -16,7 +16,7 @@ if (age >= 18) { Tato podmínka vypadá velmi přímočaře. Má však určité nevýhody. 1. Jde o celkem dlouhý kód pro velmi jednoduchou věc. -1. Musíme požívat proměnnou `let`, čemuž se snažíme co nejvíce vyhýbat. +1. Musíme používat proměnnou `let`, čemuž se snažíme co nejvíce vyhýbat. Ternární operátor nám umožňuje tuto podmínku zapsat mnohem jednodušeji. diff --git a/daweb/js2/server-komunikace/api-js.md b/daweb/js2/server-komunikace/api-js.md index 091dfc5c..a4b4c528 100644 --- a/daweb/js2/server-komunikace/api-js.md +++ b/daweb/js2/server-komunikace/api-js.md @@ -1,6 +1,6 @@ ## Volání API z JavaScriptu -Většina API funguje velmi přímočaře. Odešlete správně zformulovaný požadavek na nějakou adresu a server vám pošle odpověď s kýženými daty nejčastěji ve formátu JSON. +Většina API funguje velmi přímočaře. Odešlete správně zformulovaný požadavek na nějakou adresu a server vám pošle odpověď s kýženými daty, nejčastěji ve formátu JSON. Pokud chceme tento proces provést v JavaScriptu, máme k dispozici velmi šikovnou metodu `fetch`. Můžeme si tedy založit nový program a rovnou zkusit napsat toto. @@ -10,7 +10,7 @@ const response = fetch('https://api.sunrise-sunset.org/json?lat=50&lng=14.5'); Je zde však drobný zádrhel. Servery jsou různě rychlé podle toho, jak jsou vytížené nebo jak jsou od nás geograficky daleko. Dat ke stažení také může být poměrně hodně. Všechny tyto faktory přispívají k tomu, že stahování dat může trvat nějakou chvíli, a my dopředu nevíme, jak dlouhá tato chvíle bude. Dokonce se může stát, že server data nakonec nepošle vůbec, protože je přetížený požadavky jiných klientů, nebo dokonce úplně spadnul a už není dostupný. -Kdybychom tedy v našem programu na prvním řádku čekali, až funkce `fetch` skončí, mohli bychom si taky počkat notnou chvíli. Mezitím by náš program zcela zamrznul a uživatel by neměl ze stránky dobrý pocit. Aby se toto nestalo, funkce `fetch` je takzvaně :term{cs="asynchronní" en="asynchronous"}. V JavaScript pak máme speciální klíčové slovo `await`, které nám umožní počkat na výsledek takové funkce, aniž bychom tím zablokovali celý program. Správně tedy volání `fetch` vypadá takto. +Kdybychom tedy v našem programu na prvním řádku čekali, až funkce `fetch` skončí, mohli bychom si taky počkat notnou chvíli. Mezitím by náš program zcela zamrznul a uživatel by neměl ze stránky dobrý pocit. Aby se toto nestalo, funkce `fetch` je takzvaně :term{cs="asynchronní" en="asynchronous"}. V JavaScriptu pak máme speciální klíčové slovo `await`, které nám umožní počkat na výsledek takové funkce, aniž bychom tím zablokovali celý program. Správně tedy volání `fetch` vypadá takto. ```js const response = await fetch( @@ -18,7 +18,7 @@ const response = await fetch( ); ``` -V parametru `response` máme uloženu odpověd ze serveru. Pokud z této odpovědi chceme získat JSON, stačí na něm zavolat metodu `json`. Čeká nás však podraz. Tato metoda je také asynchronní. Musíme tedy znova použít `await` abychom počkali, než se JSON z odpovědi vytvoří. +V parametru `response` máme uloženou odpověd ze serveru. Pokud z této odpovědi chceme získat JSON, stačí na něm zavolat metodu `json`. Čeká nás však podraz. Tato metoda je také asynchronní. Musíme tedy znova použít `await` abychom počkali, než se JSON z odpovědi vytvoří. ```js const response = await fetch( diff --git a/daweb/js2/server-komunikace/cvdoma/realitka.md b/daweb/js2/server-komunikace/cvdoma/realitka.md index f1455e24..2eb73e57 100644 --- a/daweb/js2/server-komunikace/cvdoma/realitka.md +++ b/daweb/js2/server-komunikace/cvdoma/realitka.md @@ -11,8 +11,8 @@ Vytvoříme jednoduchý web s několika stránkami zobrazující inzeráty na ne 1. Na adrese https://apps.kodim.cz/daweb/trening-api/apis/realitka/dum01 najdete API endpoint, který vrací informace o jedné nemovitosti ke koupi. Prohlédněte si dobře strukturu dat, která API vrací. 1. V celku existují čtyři takové inzeráty, vždy končící `dum01`, `dum02`, `dum03` a `dum04`. Vyzkoušejte si, jak vypadají data pro všechny čtyři inzeráty. 1. Založte si nový Vite/JSX projekt pomocí `npm init kodim-app@latest cviceni-realitka jsx`. -1. Aplikace bude obsahovat celkem čtyři stránky – jednu pro každý inzerát, které budou sdílet stejný JavaScriptový soubor. Ve složce `pages` tedy založte čtyři soubory `dum01.html`, `dum02.html`, `dum03.html` a `dum04.html` a vložte do nich tentýž soubor `index.jsx`. Soubory budou mít všechny jeden hlavní element `div` s id `root` jak jsme zvyklí. -1. V této aplikaci nebudeme mít žádny `index.html`, takže všechny naše stránky budou na adrese `http://localhost:3000/dum01.html` atd. +1. Aplikace bude obsahovat celkem čtyři stránky – jednu pro každý inzerát, které budou sdílet stejný JavaScriptový soubor. Ve složce `pages` tedy založte čtyři soubory `dum01.html`, `dum02.html`, `dum03.html` a `dum04.html` a vložte do nich tentýž soubor `index.jsx`. Soubory budou mít všechny jeden hlavní element `div` s id `root`, jak jsme zvyklí. +1. V této aplikaci nebudeme mít žádný `index.html`, takže všechny naše stránky budou na adrese `http://localhost:3000/dum01.html` atd. 1. Ve složce `src/components` vytvořte komponentu `Header`, která bude představovat hlavičku stránky s navigací. Hlavičku nastylujte a přidejte do ní odkazy na všechny čtyři stránky. Vložte hlavičku do obsahu stránky pomocí JSX v souboru `index.jsx`. 1. V tuto chvíli si vyzkoušejte, že vše funguje a že se všechny stránky zobrazují s hlavičkou a jde mezi nimi přepínat pomocí navigace. 1. Nyní bude potřeba si v JavaScriptu stáhnout data z toho inzerátu, na jaké stránce se zrovna nacházíme. V souboru `index.jsx` si pomocí `window.location.pathname` zjistěte, na jaké stránce zrovna uživatel je. Na základě toho sestavte správnou adresu pro `fetch` a stáhněte si data inzerátu z API. Výsledek si zatím pro kontrolu vypište do konzole. diff --git a/daweb/js2/server-komunikace/cvlekce/vychod-zapad/exercise.md b/daweb/js2/server-komunikace/cvlekce/vychod-zapad/exercise.md index dfe1d649..4e01d1f9 100644 --- a/daweb/js2/server-komunikace/cvlekce/vychod-zapad/exercise.md +++ b/daweb/js2/server-komunikace/cvlekce/vychod-zapad/exercise.md @@ -15,7 +15,7 @@ Vytvořme webovou stránku, která bude zobrazovat čas, kdy dnes vyšlo a kdy z ``` 1. Otevřete si ve VS Code vytvořenou složku `cviceni-vychod-zapad`. -1. V souboru `index.js` pomocí funkce `fetch` a klíčovécho slova `await` získejte data z API na adrese +1. V souboru `index.js` pomocí funkce `fetch` a klíčového slova `await` získejte data z API na adrese ``` https://api.sunrise-sunset.org/json?lat=50&lng=14.5 ``` diff --git a/daweb/js2/server-komunikace/lokalni-api.md b/daweb/js2/server-komunikace/lokalni-api.md index 18bf3151..f37de04f 100644 --- a/daweb/js2/server-komunikace/lokalni-api.md +++ b/daweb/js2/server-komunikace/lokalni-api.md @@ -1,6 +1,6 @@ ## Lokální API server -Abychom se při vývoji různých cvičných projektů vyhnuli potížím s veřejnými API, naučíme se spustit si lokální API server na svém vlastním počítači. Je to podbné, jak když si rozbíháme lokální server pro vývoj frontendu. +Abychom se při vývoji různých cvičných projektů vyhnuli potížím s veřejnými API, naučíme se spustit si lokální API server na svém vlastním počítači. Je to podobné, jak když si rozbíháme lokální server pro vývoj frontendu. Nad lokálním API serverem máme plnou kontrolu. Můžeme jej spouštět a zastavovat jak potřebujeme, můžeme do něj vložit vlastní data, a můžeme si nastavit, jak bude API fungovat. @@ -8,19 +8,19 @@ Frontend postavený nad takovým API pak samozřejmě nepůjde zveřejnit na int ### Zdroj dat -Abychom mohli lokální server spustit, potřebujeme nejprve mít nějaká data, která nám API bude poskytovat. V pozdějších lekcích si ukážeme, jak si můžete sami vytvářet data pro svá lokální API. Do té doby si data vždy stáhneme z nějakého připrazeného git repozitáře. +Abychom mohli lokální server spustit, potřebujeme nejprve mít nějaká data, která nám API bude poskytovat. V pozdějších lekcích si ukážeme, jak si můžete sami vytvářet data pro svá lokální API. Do té doby si data vždy stáhneme z nějakého připraveného git repozitáře. -Pro následující ukázku si naklonujte [následující repozitář](https://github.com/Czechitas-podklady-WEB/ukazka-simpsons-api), který obsahuje data o několika postavách z animovaného seriálu Simpsonovi. Nakonovanou složku si otevřete ve VS Code a v terminálu spusťte následující příkaz: +Pro následující ukázku si naklonujte [následující repozitář](https://github.com/Czechitas-podklady-WEB/ukazka-simpsons-api), který obsahuje data o několika postavách z animovaného seriálu Simpsonovi. Naklonovanou složku si otevřete ve VS Code a v terminálu spusťte následující příkaz: ```shell npx apidroid@latest ``` -Balíček `apidroid` je nástroj, který nám umožní spustit lokální API. Je podobný balíčku `serve`, který jste používali k spuštění lokálního serveru pro frontend. Po spuštění příkazu se vám v terminálu zobrazí informace o tom, na jaké adrese a portu je API dostupné. Většinou to bude `http://localhost:4000`, pokud není port 4000 obsazený jiným procesem. +Balíček `apidroid` je nástroj, který nám umožní spustit lokální API. Je podobný balíčku `serve`, který jste používali ke spuštění lokálního serveru pro frontend. Po spuštění příkazu se vám v terminálu zobrazí informace o tom, na jaké adrese a portu je API dostupné. Většinou to bude `http://localhost:4000`, pokud není port 4000 obsazený jiným procesem. ### Použití lokálního API -Vždy, když budeme mít k dispozici repoziář s daty pro lokální API, dokumentace k API bude vždy v souboru `README.md` v kořenové složce repozitáře. Na GitHubu si tak vždy na hlavní stránce repozitáře můžete přečíst, jaké endpointy API nabízí a jak je můžete použít. +Vždy, když budeme mít k dispozici repozitář s daty pro lokální API, dokumentace k API bude vždy v souboru `README.md` v kořenové složce repozitáře. Na GitHubu si tak vždy na hlavní stránce repozitáře můžete přečíst, jaké endpointy API nabízí a jak je můžete použít. V případě Simpsonových z dokumentace vyčteme, že API nabízí endpointy pro získání seznamu všech postav a detaily jedné postavy podle ID. diff --git a/daweb/js2/server-komunikace/shrnuti.md b/daweb/js2/server-komunikace/shrnuti.md index fa5d145d..c74b78fe 100644 --- a/daweb/js2/server-komunikace/shrnuti.md +++ b/daweb/js2/server-komunikace/shrnuti.md @@ -2,7 +2,7 @@ Po této lekci byste měli vědět a znát -- základy posílání pořadavků mezi prohlížečem a serverem, +- základy posílání požadavků mezi prohlížečem a serverem, - jak funguje formát JSON a k čemu slouží, - jak z JavaScriptu odeslat požadavek na nějaké API, - jak pracovat s lokálním API serverem. diff --git a/daweb/js2/server-komunikace/verejna-api.md b/daweb/js2/server-komunikace/verejna-api.md index ed2eb907..be9d3df8 100644 --- a/daweb/js2/server-komunikace/verejna-api.md +++ b/daweb/js2/server-komunikace/verejna-api.md @@ -1,12 +1,12 @@ ## Veřejná API -Všechna API, která jsme do této chvíle viděli, byla volně přístupná a jejich použití bylo zcela zdarma. Může je používat kdokoliv na světě a nemusí za to nic platit. Toto je ovšem spíše výjimka. Provozování veřejného API stojí čas programátora, který musí API napsat a udržovat funkční. Zároveň musí autor API platit peníze za pronájem serveru v nějakém datovém centru. Pokud tedy někdo provozuje API zdarma, je to většiou +Všechna API, která jsme do této chvíle viděli, byla volně přístupná a jejich použití bylo zcela zdarma. Může je používat kdokoliv na světě a nemusí za to nic platit. Toto je ovšem spíše výjimka. Provozování veřejného API stojí čas programátora, který musí API napsat a udržovat funkční. Zároveň musí autor API platit peníze za pronájem serveru v nějakém datovém centru. Pokud tedy někdo provozuje API zdarma, je to většinou - nadšenec, který to má jako svůj koníček, -- firma, která provoz API sponzovujre, aby získala uživatele pro své jiné placené služby, +- firma, která provoz API sponzoruje, aby získala uživatele pro své jiné placené služby, - veřejná instituce, která je placena státem. -O všech těchto API hrozí že: +U všech těchto API hrozí že: - zničehonic přestanou fungovat nebo úplně zmizí, když například nadšenci ztratí zájem, firma zkrachuje nebo stát přestane poskytovat peníze, - jejich rozhraní se zničeho nic změní a naše aplikace přestanou fungovat, @@ -14,4 +14,4 @@ O všech těchto API hrozí že: V této lekci a v zadání některých cvičení se spoléháme na několik málo veřejných API, a vždy se modlíme, aby v dalším běhu kurzu ještě fungovala, nebo aby se nezačalo hroutit pod náporem dotazů z vašich aplikací. -Abychom se těmto stresům vyhnuli, v další sekci si ukáeme, jak rozeběhnout lokální API server na vašem počítači, který budete mít plně pod kontrolou. +Abychom se těmto stresům vyhnuli, v další sekci si ukážeme, jak rozeběhnout lokální API server na vašem počítači, který budete mít plně pod kontrolou. diff --git a/daweb/priprava/entry.yml b/daweb/priprava/entry.yml index 47fa2963..ed3a8d0d 100644 --- a/daweb/priprava/entry.yml +++ b/daweb/priprava/entry.yml @@ -1,5 +1,5 @@ title: Příprava před kurzem -lead: Nastavení vašeho vývojového protředí před začátkem akademie. +lead: Nastavení vašeho vývojového prostředí před začátkem akademie. lessons: - instalace-nastroju # Dočasně skryto kvůli neexistujícímu přihlášení: diff --git a/daweb/react/architektura/cvlekce/vyber-pocitani.md b/daweb/react/architektura/cvlekce/vyber-pocitani.md index e973b8b6..a8fd6656 100644 --- a/daweb/react/architektura/cvlekce/vyber-pocitani.md +++ b/daweb/react/architektura/cvlekce/vyber-pocitani.md @@ -13,7 +13,7 @@ Vezměte vzor _Vícenásobný výběr_ ze vzorového repozitáře a rozšiřte j 1. nainstalujte závislosti pomocí `npm install`, 1. v jednom terminálu spusťte API server pomocí `npx apidroid@latest`, 1. v druhém terminálu spusťte vývojový server pomocí `npm run dev`. -1. Rozmyslete si, jak do zobrazení seznamu přidat počitadalo položek. Dříve, než začnete programovat, rozmyslete si všechno následující: +1. Rozmyslete si, jak do zobrazení seznamu přidat počítadlo položek. Dříve, než začnete programovat, rozmyslete si všechno následující: 1. Budete potřebovat nějaké nové stavy? Pokud ano, jaké a v jakých komponentách? Zaneste je do diagramu komponent. 1. Použijete nějakou techniku, kterou jsme se učili? Například jednoduchá komunikace dítě rodič, pokročilá komunikace dítě rodič, obousměrný data binding apod.? diff --git a/daweb/react/architektura/diagram-komponent.md b/daweb/react/architektura/diagram-komponent.md index 5d1eb6a7..7ff793f4 100644 --- a/daweb/react/architektura/diagram-komponent.md +++ b/daweb/react/architektura/diagram-komponent.md @@ -1,9 +1,9 @@ ## Diagram komponent -Pokud máme zadání naprogramovat nějakou webovou aplikaci, začínáme většinou tak, že si uděláma představu o tom, jak má aplikace vypadat a jakým způsobem ji bude uživatel používat. Většinou pak uděláme nějaké skicy, wireframy, mockupy ve Figmě apod. Všechny tyto pojmy označují nějakou formu návrhu, který nám pomůže udělat si před začátkem programování představu o tom, jak má aplikace vypadat a jaké funkce má mít. +Pokud máme zadání naprogramovat nějakou webovou aplikaci, začínáme většinou tak, že si uděláme představu o tom, jak má aplikace vypadat a jakým způsobem ji bude uživatel používat. Většinou pak uděláme nějaké skicy, wireframy, mockupy ve Figmě apod. Všechny tyto pojmy označují nějakou formu návrhu, který nám pomůže udělat si před začátkem programování představu o tom, jak má aplikace vypadat a jaké funkce má mít. Jako programátoři si také potřebujeme umět dopředu rozmyslet, jak aplikaci naprogramovat. -Potřebujeme vědět jaká data bude naše aplikace potřebovat, jaké komponenty budeme vytvářet a jak budou spolu komunikovat. Ideálně bychom z tohoto proceu chtěli také nějaký výstup, který nám pomůže zaznamenat si naše myšlenky. K tomuto účelu budeme používat takzvaný _diagram komponent_. +Potřebujeme vědět jaká data bude naše aplikace potřebovat, jaké komponenty budeme vytvářet a jak budou spolu komunikovat. Ideálně bychom z tohoto procesu chtěli také nějaký výstup, který nám pomůže zaznamenat si naše myšlenky. K tomuto účelu budeme používat takzvaný _diagram komponent_. :::box{type=warning} Diagram komponent není žádný standardní nástroj používaný v praxi. Je to systém vymyšlený pro potřeby tohoto kurzu, který nám pomůže lépe si představit strukturu aplikace. Zkušenější programátoři si většinou umí strukturu komponent představit bez nějakého diagramu pouze v své hlavě. @@ -25,7 +25,7 @@ Takto si můžeme znázornit stromovou strukturu pomocí diagramu komponent: ## Stavy a props -Už základní strom komponent nám může dobře posloužit a stačit k tomu, abychom si udělali představu o struktuře aplikace. Můžeme však zajít ješte do většího detailu a pokusit se znázornit také props a stavy jednotlivých komponent. To nám pomůže lépe pochopit, jak budou jednotlivé komponenty spolu komunikovat a jaká data budou potřebovat. +Už základní strom komponent nám může dobře posloužit a stačit k tomu, abychom si udělali představu o struktuře aplikace. Můžeme však zajít ještě do většího detailu a pokusit se znázornit také props a stavy jednotlivých komponent. To nám pomůže lépe pochopit, jak budou jednotlivé komponenty spolu komunikovat a jaká data budou potřebovat. Stavy a props do komponenty zaznamenáme tímto způsobem: @@ -39,9 +39,9 @@ Stavy a props v naší aplikaci s počasím by mohly vypadat takto: ::fig{src=assets/props-state.png} -Schválně říkáme **mohly vypadat**, protože opravdu vyčerpávajícím způsobem do diagramu zaznamenat, jaké přesně props a state bude každá komponta mít, je takto od stolu téměř nemožné. U menších aplikací jako je počasí by to s jistým vypětím sil ještě nějak šlo. Pro větší aplikace si ale ani seniorní vývojáři nedokážou celou strukturu představit takto precizně a do hloubky bez toho, aby napsali jediný řádek kódu. +Schválně říkáme **mohly vypadat**, protože je téměř nemožné takto od stolu do diagramu vyčerpávajícím způsobem zaznamenat, jaké přesně props a state bude každá komponenta mít. U menších aplikací, jako je počasí, by to s jistým vypětím sil ještě nějak šlo. Pro větší aplikace si ale ani seniorní vývojáři nedokážou celou strukturu představit takto precizně a do hloubky bez toho, aby napsali jediný řádek kódu. -Diagrmay nám tedy neslouží k tomu, abychom si dokonale zaznamenali strukturu aplikace. Jejich smysl je v tom, udělat si nějakou hrubou představu co bude potřeba naprogramovat, čímž se naučíme nad strukturou aplikace přemýšlet bez programování a neztratit se ihned v detailech toho, jak přesně napsat nějakou konkrétní komponentu. +Diagramy nám tedy neslouží k tomu, abychom si dokonale zaznamenali strukturu aplikace. Jejich smysl je v tom, udělat si nějakou hrubou představu co bude potřeba naprogramovat, čímž se naučíme nad strukturou aplikace přemýšlet bez programování a neztratit se ihned v detailech toho, jak přesně napsat nějakou konkrétní komponentu. Diagramy také slouží k tomu, abychom se dokázali v týmu bavit o struktuře programů, aniž bychom museli hned vyrábět kód, který většinou řeší už zbytečné technické detaily, které nás na začátku tolik nezajímají. @@ -70,4 +70,4 @@ V případě naší aplikace by mohly datové toky vypadat například takto: ::fig{src=assets/data-flow.png} -Opět předesíláme, že tento popis nemusí být dokonale přesný. Až kdybychom aplikaci programovali, zjistili bychom, že by bylo potřeba diagram trochu upravit, některé stavy posunout do jiných komponent, někde zařídit složitější komunikací, která nám na začátku unikla, apod. +Opět předesíláme, že tento popis nemusí být dokonale přesný. Až kdybychom aplikaci programovali, zjistili bychom, že by bylo potřeba diagram trochu upravit, některé stavy posunout do jiných komponent, někde zařídit složitější komunikaci, která nám na začátku unikla, apod. diff --git a/daweb/react/architektura/entry.yml b/daweb/react/architektura/entry.yml index 2874d29f..8caa34a9 100644 --- a/daweb/react/architektura/entry.yml +++ b/daweb/react/architektura/entry.yml @@ -1,4 +1,4 @@ -title: Zaklady architektury aplikací +title: Základy architektury aplikací lead: Jak přemýšlet nad strukturou aplikace ještě dříve, než vůbec začneme programovat. access: protected sections: diff --git a/daweb/react/architektura/shrnuti.md b/daweb/react/architektura/shrnuti.md index 07b87f30..925eaf6c 100644 --- a/daweb/react/architektura/shrnuti.md +++ b/daweb/react/architektura/shrnuti.md @@ -2,7 +2,7 @@ Po této lekci byste měli vědět a znát -- jak používat digramy komponent pro návrh stromové struktury aplikace, +- jak používat diagramy komponent pro návrh stromové struktury aplikace, - jak v diagramu komponent znázornit stavy, props a datové toky, - jak fungují základní stavební vzory: - zobrazení seznamu, diff --git a/daweb/react/architektura/stavebni-vzory.md b/daweb/react/architektura/stavebni-vzory.md index cdc6b1e2..21550597 100644 --- a/daweb/react/architektura/stavebni-vzory.md +++ b/daweb/react/architektura/stavebni-vzory.md @@ -2,10 +2,10 @@ Pokud při brouzdání po internetu začnete věnovat pozornost tomu, jak jsou jednotlivé webové stránky postavené z hlediska uživatelského rozhraní, po čase si všimnete, že se na většině z nich opakují určité způsoby, jak s uživatelem komunikovat. Na tisíc a jeden způsob uvidíte prvky jako navigaci, zobrazování seznamů položek, vyplňování formulářů, vyskakovací okna a tak dále. Brzy zjistíte, že se tyto prvky v mnoha obměnách stále opakují, jen mají vždy trochu jiný vizuální styl. -Mezi úplně nejzákladnešjí stavební bloky webových stránek patří jednoduché komponenty, na které jsou všichyni uživatelé zvyklí a najdete je ve všemožných UI knihovnách. Jsou to například +Mezi úplně nejzákladněšjí stavební bloky webových stránek patří jednoduché komponenty, na které jsou všichni uživatelé zvyklí a najdete je ve všemožných UI knihovnách. Jsou to například - tlačítka, -- formulářové prvky jako textová pole, checkboxy, radio buttony, slider, rozbalovací nabídky atd., +- formulářové prvky jako textová pole, zaškrtávací políčka (checkboxy), přepínače (radio buttony), posuvníky (slidery), rozbalovací nabídky atd., - karty, - menu, - záložky, @@ -19,7 +19,7 @@ Mezi úplně nejzákladnešjí stavební bloky webových stránek patří jednod Všechny tyto komponenty uživatelé dobře znají a umí je používat. Používáme je proto, aby se nově příchozí uživatel na stránce rychle zorientoval, rovnou s ní mohl začít pracovat a cítil se na stránce jako doma. -Z těchto elementárních prvků pak skládáme složitější celky, které bychom mohli nazvat _stavební vzory_, protože to jsou určité opakující se postupy jak stavět větší kusy nějaké aplikace. Stavební vzor je v podstatě nějaká kombinace komponent a jejich vzájemná komunikace, která slouží k tomu, aby uživatel mohl na stránce provést nějako ucelenější akci. Může to být například +Z těchto elementárních prvků pak skládáme složitější celky, které bychom mohli nazvat _stavební vzory_, protože to jsou určité opakující se postupy jak stavět větší kusy nějaké aplikace. Stavební vzor je v podstatě nějaká kombinace komponent a jejich vzájemná komunikace, která slouží k tomu, aby uživatel mohl na stránce provést nějakou ucelenější akci. Může to být například - navigace mezi stránkami, - zobrazení seznamu položek, @@ -39,8 +39,8 @@ Z těchto elementárních prvků pak skládáme složitější celky, které byc Pojem _stavební vzor_ je podobně jako diagramy komponent vymyšlen pouze pro potřeby tohoto kurzu. Programátoři v praxi mají tyto vzory naučané podvědomě za mnoho let zkušeností a nemají pro ně žádné speciální názvy. ::: -Jak postupně webový vývojář získává zkušenosti, tyto vzory se mu dostanou do podvědomí, takzvaně pod kůži, a je schopen je implementovat a používat takřka automaticky. Většinou se také naučí, že již existujé vyzkoušené a osvědčené postupy, jak se tyto vzory implementují například v Reactu, a nemusí tak znova vymýšlet kolo. +Jak postupně webový vývojář získává zkušenosti, tyto vzory se mu dostanou do podvědomí, takzvaně pod kůži, a je schopen je implementovat a používat takřka automaticky. Většinou se také naučí, že již existují vyzkoušené a osvědčené postupy, jak se tyto vzory implementují například v Reactu, a nemusí tak znova vymýšlet kolo. -V Reactu pro implementaci všech těchto zvorů používáme techniky, které jsme se již naučili, tedy props, stav, efekty, komunikace mezi komponentami a tak dále. V této lekci si ukážeme, jak se tyto techniky použijí pro implementací konkrétních stavebních vzorů. Ukážeme si jen ty nejzákladnější a nejpoužívanější. Pokoušet se popsat všechny vzory by bylo pošetilé a strašlivě nazážívné. Ostatní vzory se nejlépe naučíte postupně sami, jak budete v praxi řešit různé problémy a získávat vlastní zkušenosti. +V Reactu pro implementaci všech těchto vzorů používáme techniky, které jsme se již naučili, tedy props, stav, efekty, komunikace mezi komponentami a tak dále. V této lekci si ukážeme, jak se tyto techniky použijí pro implementaci konkrétních stavebních vzorů. Ukážeme si jen ty nejzákladnější a nejpoužívanější. Pokoušet se popsat všechny vzory by bylo pošetilé a strašlivě nazážívné. Ostatní vzory se nejlépe naučíte postupně sami, jak budete v praxi řešit různé problémy a získávat vlastní zkušenosti. -Ukázky všechny následujícícj probíraných vzorů najdete v repozitáři [ukazka-vzory](https://github.com/Czechitas-podklady-WEB/ukazka-vzory). +Ukázky všech následujících probíraných vzorů najdete v repozitáři [ukazka-vzory](https://github.com/Czechitas-podklady-WEB/ukazka-vzory). diff --git a/daweb/react/architektura/vyber-polozky.md b/daweb/react/architektura/vyber-polozky.md index 312aee3c..a4de4904 100644 --- a/daweb/react/architektura/vyber-polozky.md +++ b/daweb/react/architektura/vyber-polozky.md @@ -1,10 +1,10 @@ ## Vzor: výběr položky -Pokud zobrazujeme nějaký seznam, často chceme, aby v něm uživatel mohl jednu nebo více položek ozančit jaké vybrané. Každý z těcho případů, tedy vybírání pouze jedné položky a vybírání více položek, má svá Reactová úskalí. +Pokud zobrazujeme nějaký seznam, často chceme, aby v něm uživatel mohl jednu nebo více položek označit jako vybrané. Každý z těchto případů, tedy vybírání pouze jedné položky a vybírání více položek, má svá Reactová úskalí. ### Výběr více položek -V obou výše zmíněných případech budeme mít komponenty `List` a `ListItem` pro zobrazení seznamu a jednotlivých položek. Nejjednodušší případ nastává, když chceme umožni výběr několik položek a komponenta `List` nepotřebuje znát stav výběru. V tomto případě může mít každá komponenta `ListItem` vlastní stav, který bude obsahovat informaci o tom, zda je položka vybraná nebo ne. +V obou výše zmíněných případech budeme mít komponenty `List` a `ListItem` pro zobrazení seznamu a jednotlivých položek. Nejjednodušší případ nastává, když chceme umožnit výběr několik položek a komponenta `List` nepotřebuje znát stav výběru. V tomto případě může mít každá komponenta `ListItem` vlastní stav, který bude obsahovat informaci o tom, zda je položka vybraná nebo ne. Diagram komponent pro tento případ vypadá takto: @@ -35,7 +35,7 @@ Komponenta `List` může zůstat stejná jako při zobrazení seznamu bez výbě ### Výběr jedné položky -Výběr jedné položky je kupodivu složitější. V tomto případě musí komponenta `List` znát stav výběru, aby zajistila, že lze vybrat pouze jednu položku. To zařídíme tak, že komponenta `List` bude mít stav `selectedId`, kde si bude pamatovat `id` vybrané položky. Musíme pak zajistit komunikaci od položky smeřem k rodiči, aby se komponenta `List` dozvěděla o změně výběru. Také musí komponenta `List` říct každé položce, zda je vybraná nebo ne. +Výběr jedné položky je kupodivu složitější. V tomto případě musí komponenta `List` znát stav výběru, aby zajistila, že lze vybrat pouze jednu položku. To zařídíme tak, že komponenta `List` bude mít stav `selectedId`, kde si bude pamatovat `id` vybrané položky. Musíme pak zajistit komunikaci od položky smerem k rodiči, aby se komponenta `List` dozvěděla o změně výběru. Také musí komponenta `List` říct každé položce, zda je vybraná nebo ne. Nejdříve se podívejme na diagram komponent: diff --git a/daweb/react/architektura/zobrazeni-seznamu.md b/daweb/react/architektura/zobrazeni-seznamu.md index 26f36dc7..a00c1a05 100644 --- a/daweb/react/architektura/zobrazeni-seznamu.md +++ b/daweb/react/architektura/zobrazeni-seznamu.md @@ -1,6 +1,6 @@ ## Vzor: zobrazení seznamu -Nejzákladnější stavební vzor je zobrazení seznamu položek. Tuto techniku už jste v tomtu kurzu sami viděli nejméně stokrát. Ukažme si obecný přístup pro zobrazení seznamu v Reactu. +Nejzákladnější stavební vzor je zobrazení seznamu položek. Tuto techniku už jste v tomto kurzu sami viděli nejméně stokrát. Ukažme si obecný přístup pro zobrazení seznamu v Reactu. Na zobrazení seznamu potřebujeme tyto ingredience: diff --git a/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md b/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md index 95c5f2ba..c2d8a5bc 100644 --- a/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md +++ b/daweb/react/formulare-efekty/cvlekce/zasilani-newsletteru/exercise.md @@ -18,7 +18,7 @@ Pokračujte v předchozím cvičení. 1. Vytvořte si stav `newsletterAccepted`, ve kterém budete mít uloženo, zda si uživatel přeje či nepřeje dostávat e-mailové novinky – tedy stav zaškrtávacího políčka. -1. Přes dvoucestný (two-way) binding propojte stav `newsletterAccepted` a zaškrtávací políčko. Použijete k otmu událost `onChange` a atribut `value`, jako u textových políček. Jako hodnota se bude předávat `true` nebo `false`. +1. Přes dvoucestný (two-way) binding propojte stav `newsletterAccepted` a zaškrtávací políčko. Použijte k tomu událost `onChange` a atribut `value`, jako u textových políček. Jako hodnota se bude předávat `true` nebo `false`. 1. Do výpisu ve funkci `alert` přidejte informaci o tom, jestli uživatel chce dostávat novinky. diff --git a/daweb/react/formulare-efekty/efekty-api.md b/daweb/react/formulare-efekty/efekty-api.md index d048a155..96e5a083 100644 --- a/daweb/react/formulare-efekty/efekty-api.md +++ b/daweb/react/formulare-efekty/efekty-api.md @@ -27,7 +27,7 @@ const HomePage = () => { }; ``` -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: +Povšimněte si funkce `fetchName`, kterou jsme si vytvořili přímo 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 () => { diff --git a/daweb/react/formulare-efekty/efekty.md b/daweb/react/formulare-efekty/efekty.md index 85f1c67a..a506ccfe 100644 --- a/daweb/react/formulare-efekty/efekty.md +++ b/daweb/react/formulare-efekty/efekty.md @@ -2,7 +2,7 @@ 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 námi definovanou 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á říká, kdo má zrovna svátek. ```js const HomePage = () => { diff --git a/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni-2/exercise.md b/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni-2/exercise.md index 4b87ec3a..c6e98707 100644 --- a/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni-2/exercise.md +++ b/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni-2/exercise.md @@ -10,7 +10,7 @@ Navážeme na úložku s hodnocením a zařídíme, aby se při kliknutí na hv ::fig{src="assets/rating.gif" size=40} -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. +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čovská komponenta `Rating` pomocí stavu a props. 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. @@ -18,7 +18,7 @@ Logiku fungování zařídíme tak, že tentokrát hvězdičky nebudou mít vlas = 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ž 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. +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ězdičky. :::solution Řešení je v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-hodnoceni/tree/reseni). diff --git a/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni.md b/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni.md index e14982ef..e4681663 100644 --- a/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni.md +++ b/daweb/react/komunikace-dite-rodic/cvdoma/hodnoceni.md @@ -12,7 +12,7 @@ V tomto cvičení vdechneme život komponentě, která umožňuje hodnocení pom 1. Pomocí `npm install` nainstalujte závislosti a spusťte vývojový server příkazem `npm run dev`. 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 zobrazilo 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. 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. Zajímavé 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. diff --git a/daweb/react/komunikace-dite-rodic/cvlekce/kurzovni-listek-zaklad.md b/daweb/react/komunikace-dite-rodic/cvlekce/kurzovni-listek-zaklad.md index 09f4d21a..a55137c9 100644 --- a/daweb/react/komunikace-dite-rodic/cvlekce/kurzovni-listek-zaklad.md +++ b/daweb/react/komunikace-dite-rodic/cvlekce/kurzovni-listek-zaklad.md @@ -6,13 +6,13 @@ context: lekce solutionAccess: protected --- -Rozhodně není od věci procvičit si také komunikaci směrem od rodiče k dítěti. To si vyzkoušíme na aplikaci, která převádí různé světové měny na české koruny. Vzhledem k tomu, že tento typ komunikace se odehrává prostě předáváním _props_, bude toto cvičení spíš opakování toho, co už znáte z minulách lekcí. +Rozhodně není od věci procvičit si také komunikaci směrem od rodiče k dítěti. To si vyzkoušíme na aplikaci, která převádí různé světové měny na české koruny. Vzhledem k tomu, že tento typ komunikace se odehrává prostě předáváním _props_, bude toto cvičení spíš opakování toho, co už znáte z minulých lekcí. 1. Vytvořte si repozitář ze šablony [cviceni-currencies](https://github.com/Czechitas-podklady-WEB/cviceni-currencies) obsahující React stránku s jednoduchým formulářem pro kurzy měn. 1. Pomocí `npm install` nainstalujte závislosti a spusťte vývojový server příkazem `npm run dev`. -1. Prohlédněte si připravený kód a strukturu projektu. Všimněte si komponmenty `Rate`, která zobrazuje kurz. +1. Prohlédněte si připravený kód a strukturu projektu. Všimněte si komponenty `Rate`, která zobrazuje kurz. 1. Do komponenty `Rate` přidejte prop `from`, která bude obsahovat kód měny, ze které chceme konvertovat na české koruny. Zařiďte, aby komponenta zobrazila kód měny, který uživatel vybere z nabídky. Toto bude komunikace od rodiče (komponenta `HomePage`) směrem k dítěti (komponenta `Rate`). -1. Upravate komponentu `Rate` tak, aby zobrazila správný kurz podle připravných dat v objektu `currencies`. Výsledná kurz zobrazte v elementu `.rate__value`. +1. Upravte komponentu `Rate` tak, aby zobrazila správný kurz podle připravených dat v objektu `currencies`. Výsledný kurz zobrazte v elementu `.rate__value`. :::solution Řešení je spolu s řešeném následujícího cvičení v repository cvičení v branchi [reseni](https://github.com/Czechitas-podklady-WEB/cviceni-currencies/tree/reseni). diff --git a/daweb/react/komunikace-dite-rodic/cvlekce/potisk-tricek.md b/daweb/react/komunikace-dite-rodic/cvlekce/potisk-tricek.md index 44c0e45b..6fb0f499 100644 --- a/daweb/react/komunikace-dite-rodic/cvlekce/potisk-tricek.md +++ b/daweb/react/komunikace-dite-rodic/cvlekce/potisk-tricek.md @@ -10,14 +10,14 @@ Pomocí Reactu, stavu a komunikace mezi komponentami rozchodíme aplikaci, kde s 1. Vytvořte si repozitář ze šablony [cviceni-tricka](https://github.com/Czechitas-podklady-WEB/cviceni-tricka), repozitář si poté naklonujte. 1. Pomocí `npm install` nainstalujte závislosti a spusťte vývojový server příkazem `npm run dev`. -1. Dobře si aplikaci prohlédněte. Vykoušejte si, jaké _props_ můžete zadat do komponenty `TShirt`, kromě barvy a textu potisku můžete také zvolit typ trička: +1. Dobře si aplikaci prohlédněte. Vyzkoušejte si, jaké _props_ můžete zadat do komponenty `TShirt`, kromě barvy a textu potisku můžete také zvolit typ trička: - `normalShortSleeve` - `normalLongSleeve` - `tallLongSleeve` - `normalNoSleeve` - `tallNoSleeve` Zkuste si zadat různé _props_ a vyzkoušejte, co komponenta zobrazí. -1. Vaším úkolem bude zprovozni komunikaci od komponenty `TShirtSetup` ke komponentě `HomePage`, tedy komunikace od dítěte k rodiči. V `HomePage` budou potřeba tři stavy: jeden pro typ trička, jeden pro barvu a jeden pro potisk. Vytvořte tyto stavy a napojte je na komponentu `TShirt`, aby zobrazovala to, co je ve stavech. +1. Vaším úkolem bude zprovoznit komunikaci od komponenty `TShirtSetup` ke komponentě `HomePage`, tedy komunikace od dítěte k rodiči. V `HomePage` budou potřeba tři stavy: jeden pro typ trička, jeden pro barvu a jeden pro potisk. Vytvořte tyto stavy a napojte je na komponentu `TShirt`, aby zobrazovala to, co je ve stavech. 1. V komponentě `TShirtSetup` vytvořte prop `onTypeChange`. Pomocí této funkce budeme měnit stav v rodiči. Použijte tuto prop k tomu, abyste do stavu pro typ trička poslali to, co uživatel vybere ve formuláři uvnitř `TShirtSetup`. Vyzkoušejte, že se stav opravdu mění a políčko pro výběr funguje. 1. Podobně propojte i další dva stavy. V komponentě `TShirtSetup` vytvořte prop `onColorChange` a `onPrintChange`. Použijte tyto props k tomu, abyste do stavu pro barvu a potisk poslali to, co uživatel vybere ve formuláři uvnitř `TShirtSetup`. Vyzkoušejte, že se stavy opravdu mění a políčka pro výběr fungují. diff --git a/daweb/react/komunikace-dite-rodic/dite-rodic.md b/daweb/react/komunikace-dite-rodic/dite-rodic.md index 71964a5a..bbbc4c8e 100644 --- a/daweb/react/komunikace-dite-rodic/dite-rodic.md +++ b/daweb/react/komunikace-dite-rodic/dite-rodic.md @@ -1,6 +1,6 @@ ## Komunikace dítě → rodič -Nyní bychom chtěli zařídit, aby se uživatelem vybraný kandidát zobrazil vedle obrázku hradu. Jakmile tedy uživatel vybere nějakého kandidáta v některé instanci komponenty `Candidate`, potřebujeme jeho jméno poslat „nahoru“ rodičovské komponentě `HomePage`, aby si jej tato mohla uložit do stavu `president`. +Nyní bychom chtěli zařídit, aby se uživatelem vybraný kandidát zobrazil vedle obrázku hradu. Jakmile tedy uživatel vybere nějakého kandidáta v některé instanci komponenty `Candidate`, potřebujeme jeho jméno poslat „nahoru“ rodičovské komponentě `HomePage`, aby si jej mohla uložit do stavu `president`. Zde však narážíme na zásadní problém. Komponenta `Candidate` nemá nejmenší tušení, kdo je její rodič. Zevnitř této komponenty tato informace není nijak dostupná. Musíme si tedy pomoct malým trikem. @@ -8,7 +8,7 @@ Zde však narážíme na zásadní problém. Komponenta `Candidate` nemá nejmen Náš trik bude spočívat v tom, že komponentě `Candidate` skrze _props_ předáme takzvaný _callback_. Tímto pojmem se v JavaScriptu často označuje funkce, kterou někomu předáváme proto, aby ji tento někdy později zavolal. Anglický název tohoto pojmu vzniká právě ze slovního spojení „zavolat zpátky“, tedy „call back“. -S callbacky už jsme se ve skutečnosti setkali dávno, jen jsme jim tehdy říkali posluchače událostí. Každý posluchač události je ve skutečnosti callback. Tlačítku `button` například předáváme funkci, která se má zavolat (call back) ve chvíli, kdy na tlačítko klikneme. V minulé lekci jste viděli, že v Reactu se takové věc zařídí poměrně jednoduše. +S callbacky už jsme se ve skutečnosti setkali dávno, jen jsme jim tehdy říkali posluchače událostí. Každý posluchač události je ve skutečnosti callback. Tlačítku `button` například předáváme funkci, která se má zavolat (call back) ve chvíli, kdy na tlačítko klikneme. V minulé lekci jste viděli, že v Reactu se taková věc zařídí poměrně jednoduše. ```js const SensitiveButton = (props) => { @@ -49,7 +49,7 @@ const Candidate = ({ name, avatar, onVote }) => ( ); ``` -Na straně komponenty `Candidate` máme hotovo. Nyní potřebujeme vyřešit komponentu `HomePage`. V té potřebujeme poslat do _prop_ `onVote` nějakou funkci. My chceme při zavolání toho callbacku nastavit náš stav, pošelem proto komponentě funkci `setPresident`: +Na straně komponenty `Candidate` máme hotovo. Nyní potřebujeme vyřešit komponentu `HomePage`. V té potřebujeme poslat do _prop_ `onVote` nějakou funkci. My chceme při zavolání tohoto callbacku nastavit náš stav, pošleme proto komponentě funkci `setPresident`: ```js export const HomePage = () => { @@ -101,9 +101,9 @@ V tuto chvíli už naše aplikace bude správně fungovat. Komunikace pomocí callbacků může ze začátku působit děsivě složitě a nepřístupně. Je tedy zapotřebí si v hlavě udělat jasný obrázek o tom, jak tento mechanizmus funguje. Pojďme shrnout, co přesně se děje ve výše uvedeném příkladu. -Rodičovská komponenta `App` vytváří funkci `handleVote` a tu posílá skrze prop `onVote` komponentě `Candidate`. Dceřinná komponenta `Candidate` obdrží v prop `onVote` funkci, kterou zavolá se jménem vybraného kandidáta. Vzhledem k tomu, že v prop `onVote` je funkce `handleVote` vytvořená rodičem, komponenta `Candidate` tak _propašuje_ do rodiče název zvoleného kandidáta. +Rodičovská komponenta `App` vytváří funkci `handleVote` a tu posílá skrze prop `onVote` komponentě `Candidate`. Dceřiná komponenta `Candidate` obdrží v prop `onVote` funkci, kterou zavolá se jménem vybraného kandidáta. Vzhledem k tomu, že v prop `onVote` je funkce `handleVote` vytvořená rodičem, komponenta `Candidate` tak _propašuje_ do rodiče název zvoleného kandidáta. -Situaci můžene znázornit následujícím diagramem. +Situaci můžeme znázornit následujícím diagramem. ::fig{src=assets/dite-rodic.png} diff --git a/daweb/react/komunikace-dite-rodic/rodic-dite.md b/daweb/react/komunikace-dite-rodic/rodic-dite.md index 78109b52..cb8dda0d 100644 --- a/daweb/react/komunikace-dite-rodic/rodic-dite.md +++ b/daweb/react/komunikace-dite-rodic/rodic-dite.md @@ -2,9 +2,9 @@ V předchozích lekcích už jsme se naučili téměř všechno, co v Reactu potřebujeme k vývoji opravdových webových aplikací. Dostáváme se tedy do bodu, kdy postupně začneme stavět rozsáhlejší aplikace se stále větším množstvím komponent. Brzy tak narazíme na situaci, kdy si budeme potřebovat předávat informace mezi různými komponentami. -Komponenty v Reactu často vkládáme do sebe. Vnořená komponenta může obsahovat zase další vnořené komponenty, a takto nám vzniká celý strom komponent. Kořenem (někdy se také říká vrcholem – jak víte, programátoři si představují stromy kmenem vzhůru) tohoto stromu je komponenta na nejvyšší úrovni, která obvykle tvoří celou stránku – v našich cvičných projektech je to často komponenta `HomePage`. Podle toho, jak se do sebe jednotlivé komponenty zanořují, pak vzniká strom koponent. +Komponenty v Reactu často vkládáme do sebe. Vnořená komponenta může obsahovat zase další vnořené komponenty, a takto nám vzniká celý strom komponent. Kořenem (někdy se také říká vrcholem – jak víte, programátoři si představují stromy kmenem vzhůru) tohoto stromu je komponenta na nejvyšší úrovni, která obvykle tvoří celou stránku – v našich cvičných projektech je to často komponenta `HomePage`. Podle toho, jak se do sebe jednotlivé komponenty zanořují, pak vzniká strom komponent. -Jak víte už z prnví lekce kurzu, metafora stromu se při programování používá docela často – znáte adresářový strom, DOM elementy v prohlížeči také tvoří strom a teď máme strom komponent. Abychom dokázali snadno popsat, jak spolu jednotlivé prvky ve stromu souvisí, používají se termíny :term{cs="rodič" en="parent"} a :term{cs="dítě" en="child"}. _Rodič_ je vnější komponenta, _dítě_ je komponenta, která je obsažena v rodiči. Dceřiná komponenta pak může být sama rodičovskou komponentou pro další vnořené komponenty. Komponenty, které mají stejného rodiče, někdy nazýváme :term{cs="sourozenci" en="siblings"}. +Jak už víte z první lekce kurzu, metafora stromu se při programování používá docela často – znáte adresářový strom, DOM elementy v prohlížeči také tvoří strom a teď máme strom komponent. Abychom dokázali snadno popsat, jak spolu jednotlivé prvky ve stromu souvisí, používají se termíny :term{cs="rodič" en="parent"} a :term{cs="dítě" en="child"}. _Rodič_ je vnější komponenta, _dítě_ je komponenta, která je obsažena v rodiči. Dceřiná komponenta pak může být sama rodičovskou komponentou pro další vnořené komponenty. Komponenty, které mají stejného rodiče, někdy nazýváme :term{cs="sourozenci" en="siblings"}. _(Češtinářská perlička – sice komponentám říkáme „rodič“ a „dítě“, ale když chceme označit komponentu, neříkáme jí „dětská komponenta“ nýbrž „dceřiná komponenta“.)_ diff --git a/daweb/react/leviexpress-1/cvlekce/podrobnosti-cesty/exercise.md b/daweb/react/leviexpress-1/cvlekce/podrobnosti-cesty/exercise.md index 566e6647..563831b6 100644 --- a/daweb/react/leviexpress-1/cvlekce/podrobnosti-cesty/exercise.md +++ b/daweb/react/leviexpress-1/cvlekce/podrobnosti-cesty/exercise.md @@ -10,8 +10,8 @@ V tomto cvičení vytvoříte komponentu pro zobrazení detailu cesty a komponen ::fig[náhled]{src=assets/nahled.png} -1. Ve svém projektu vytvořte komponentu s názvem `JourneyDetail`. Do této komponenty zatím zkopírujte HTML kód ze zadání – celý element `div` s třídami `journey-detail` a `container` i s jeho obsahem. Vytvoře v komponentě také soubor `style.css`, do kterého zkopírujte ze zadání styly pro třídy `stops` a `journey-detail`. Naimportujte soubor se styly do komponenty. -1. Použijete komponentu `JourneyDetail` v komponentě `HomePage` na místě, kde se nyní vypisuje id nalezeného spoje. Komponenta se bude zobrazovat jenom tehdy, když ve stavu `journey` v komponentě `HomePage` je něco jiného než `null`. Ověřte, že se po vyhledání spojení na stránce zobrazí podrobnosti cesty s městy 1 až 4 (komponenta `JourneyDetail` zatím není napojená na reálná data). +1. Ve svém projektu vytvořte komponentu s názvem `JourneyDetail`. Do této komponenty zatím zkopírujte HTML kód ze zadání – celý element `div` s třídami `journey-detail` a `container` i s jeho obsahem. Vytvořte v komponentě také soubor `style.css`, do kterého zkopírujte ze zadání styly pro třídy `stops` a `journey-detail`. Naimportujte soubor se styly do komponenty. +1. Použijte komponentu `JourneyDetail` v komponentě `HomePage` na místě, kde se nyní vypisuje id nalezeného spoje. Komponenta se bude zobrazovat jenom tehdy, když ve stavu `journey` v komponentě `HomePage` je něco jiného než `null`. Ověřte, že se po vyhledání spojení na stránce zobrazí podrobnosti cesty s městy 1 až 4 (komponenta `JourneyDetail` zatím není napojená na reálná data). 1. V samostatné složce vytvořte komponentu s názvem `BusStop`. V komponentě vytvořte také soubor se styly, do kterého ze zadání zkopírujete všechny styly pro třídy začínající `bus-stop`. 1. Do komponenty `BusStop` vložte ze zadání celý element `div`, který má třídu `bus-stop`. Je to jeden prvek ze seznamu zastávek. 1. V komponentě `JourneyDetail` smažte HTML kód se seznamem zastávek. Zbyde tam jen kontejner, v něm `h3` s textem „Podrobnosti cesty“ a pod ním `div` s třídou `stops`. Do tohoto divu vložte komponentu `BusStop`. Zkontrolujte v prohlížeči, že se zobrazí jedna zastávka. diff --git a/daweb/react/leviexpress-1/cvlekce/potvrzeni-rezervace/exercise.md b/daweb/react/leviexpress-1/cvlekce/potvrzeni-rezervace/exercise.md index 127b7a70..c71a2d24 100644 --- a/daweb/react/leviexpress-1/cvlekce/potvrzeni-rezervace/exercise.md +++ b/daweb/react/leviexpress-1/cvlekce/potvrzeni-rezervace/exercise.md @@ -36,7 +36,7 @@ Nyn již máme ve stavu `journey` uložené všechny potřebné informace k tomu ```js navigate(`/reservation/${reservationId}`); ``` -1. Zkontrolujte, že po kliknutí na tlačíko „Rezervovat" se stránka přesměruje například na adresu +1. Zkontrolujte, že po kliknutí na tlačítko „Rezervovat" se stránka přesměruje například na adresu > http://localhost:5173/reservation/HAQBAQASf7M diff --git a/daweb/react/leviexpress-1/cvlekce/vyber-datumu.md b/daweb/react/leviexpress-1/cvlekce/vyber-datumu.md index 9625b91f..a4723fc6 100644 --- a/daweb/react/leviexpress-1/cvlekce/vyber-datumu.md +++ b/daweb/react/leviexpress-1/cvlekce/vyber-datumu.md @@ -1,6 +1,6 @@ --- title: Výběr data cesty -lead: Zprovizníme výběr data cesty. +lead: Zprovozníme výběr data cesty. demand: 2 context: lekce solutionAccess: protected diff --git a/daweb/react/leviexpress-1/cvlekce/vyhledat-spoj.md b/daweb/react/leviexpress-1/cvlekce/vyhledat-spoj.md index 14a13e45..ad8c4db9 100644 --- a/daweb/react/leviexpress-1/cvlekce/vyhledat-spoj.md +++ b/daweb/react/leviexpress-1/cvlekce/vyhledat-spoj.md @@ -19,7 +19,7 @@ V tomto cvičení dokončíte komponentu pro vyhledání spojení. V komponentě 1. Nalezená spojení budeme potřebovat zobrazit v další komponentě na stránce. Potřebujeme je tedy poslat z komponenty `JourneyPicker` jejímu rodiči – to uděláme v následujících krocích. 1. V komponentě `HomePage` si připravte funkci `handleJourneyChange`. Funkce `handleJourneyChange` bude očekávat jeden parametr – objekt s údaji o nalezeném spojení. Nazvěte jej třeba `journeyData`. Ve funkci zatím vypište tento parametr do konzole. Volání funkce zařídíme v následujícím kroku. 1. V komponentě `HomePage` používáte komponentu `JourneyPicker`. Této komponentě předejte property jménem `onJourneyChange`, jako hodnotu jí předejte funkci (callback) `handleJourneyChange`. -1. V komponentě `JourneyPicker` bude property `onJourneyChange`, do které rodič (`HomePage`) vkládá funkci, která se zavolá s údaji nalezeném spoji. Všimněte si, že v hlavičce komponenty `JourneyPicker` už je property `onJourneyChange` připravená. +1. V komponentě `JourneyPicker` bude property `onJourneyChange`, do které rodič (`HomePage`) vkládá funkci, která se zavolá s údaji o nalezeném spoji. Všimněte si, že v hlavičce komponenty `JourneyPicker` už je property `onJourneyChange` připravená. 1. Ve funkci `handleSubmit` v komponentě `JourneyPicker` nyní vypisujete nalezená spojení jen do konzole prohlížeče. Tento výpis nahraďte voláním funkce uložené v property `onJourneyChange`, které jako parametr předáte data získaná z volání API pod klíčem `results`. 1. Vyzkoušejte, že když nyní kliknete na „Vyhledat spoj“, vyhledá se spojení a funkce `handleJourneyChange` jej vypíše do konzole. 1. Vraťte se do komponenty `HomePage`, ze které se volá komponenta `JourneyPicker`. V komponentě `HomePage` vytvořte pomocí `useState` nový stav `journey`, výchozí hodnota bude `null`. diff --git a/daweb/react/leviexpress-1/cvlekce/zobrazeni-sedadla/exercise.md b/daweb/react/leviexpress-1/cvlekce/zobrazeni-sedadla/exercise.md index a3deb1f1..8ea8ed4b 100644 --- a/daweb/react/leviexpress-1/cvlekce/zobrazeni-sedadla/exercise.md +++ b/daweb/react/leviexpress-1/cvlekce/zobrazeni-sedadla/exercise.md @@ -13,7 +13,7 @@ V první fázi projektu bude sedadlo pro cestujícího přidělovat automaticky 1. Na vzorové stránce vidíte sekci s nadpisem „Vaše sedadlo“. Vytvořte pro tuto sekci React komponentu s názvem `SelectedSeat`. Její obsah vyplňte dle vzorové stránky. 1. Vložte (použijte) komponentu `SelectedSeat` na správné místo komponenty `HomePage`. Zatím ji ponechte zobrazenou vždy, bude se vám tak komponenta lépe ladit. 1. Všimněte si, že obrázek sedadla je vytvořen pomocí SVG. SVG je formát pro vektorové obrázky, jde ovšem o textový zápis podobný HTML. Díky tomu jej můžeme používat i přímo v JSX – a můžeme také pomocí Reactu měnit obsah SVG, neboli to, co se v obrázku zobrazuje. -1. Najděte, kde se ve struktuře SVG nastavuje číslo sedadlo. Zařiďte, aby šlo komponentě `SelectedSeat` nastavit číslo sedadla skrze prop `number`. -1. Tak, kde je komponenta `SelectedSeat` použitá, nastavte komponentě atribut `number` a ověřte, že se v prohlížeči zobrazí správné číslo sedadla. +1. Najděte, kde se ve struktuře SVG nastavuje číslo sedadla. Zařiďte, aby šlo komponentě `SelectedSeat` nastavit číslo sedadla skrze prop `number`. +1. Tam, kde je komponenta `SelectedSeat` použitá, nastavte komponentě atribut `number` a ověřte, že se v prohlížeči zobrazí správné číslo sedadla. 1. V komponentě `HomePage` máme ve stavu `journey` uložen výsledek vyhledané cesty. Stačí tedy vlastnost `autoSeat` předat komponentě `SelectedSeat` v atributu `number`. Dejte však pozor na to, že při načtení stránky je ve stavu `journey` hodnota `null`. V takovém případě komponentu `SelectedSeat` vůbec nezobrazujte. 1. Commitněte změny. diff --git a/daweb/react/leviexpress-1/zadani.md b/daweb/react/leviexpress-1/zadani.md index fbef9775..2d1e8795 100644 --- a/daweb/react/leviexpress-1/zadani.md +++ b/daweb/react/leviexpress-1/zadani.md @@ -1,8 +1,8 @@ -Pokud jste všemi předchozíme lekcemi doputovali až sem, naučili jste se toho opravdu hodně. Možná vám nově nabyté znalosti v hlavách pořád šplouchají a hledají ty správné šuplíky. Než budeme pokračovat na architektonické vzory, zkusíme v Reactu vytvořit jednu ucelenou webovou aplikaci. V ní spojíme dohromady všechny věci, které jste se v Reactu naučili. +Pokud jste všemi předchozími lekcemi doputovali až sem, naučili jste se toho opravdu hodně. Možná vám nově nabyté znalosti v hlavách pořád šplouchají a hledají ty správné šuplíky. Než budeme pokračovat na architektonické vzory, zkusíme v Reactu vytvořit jednu ucelenou webovou aplikaci. V ní spojíme dohromady všechny věci, které jste se v Reactu naučili. ## Zadání -Vašim úkolem bude vytvořit webovou stránku fiktivní dopravní společnosti s názvem _LeviExpress_. Ta každý den vypravuje dva autobusy na lince spojující východní a západní Evropu. Jeden spoj vyjíždí o půlnoci z Budapešti a po několika zastávkách končí o další půlnoci v Amsterdamu. Proti ní vždy vyráží spoj v opačném směru, tedy z Amsterdamu do Budapešti. +Vaším úkolem bude vytvořit webovou stránku fiktivní dopravní společnosti s názvem _LeviExpress_. Ta každý den vypravuje dva autobusy na lince spojující východní a západní Evropu. Jeden spoj vyjíždí o půlnoci z Budapešti a po několika zastávkách končí o další půlnoci v Amsterdamu. Proti ní vždy vyráží spoj v opačném směru, tedy z Amsterdamu do Budapešti. Výsledná webová stránka bude mít dvě podstránky. Jedna bude umožňovat rezervaci jízdenky, druhá bude zobrazovat již rezervovanou jízdenku. @@ -15,7 +15,7 @@ Aplikaci budeme vytvářet postupně ve dvou fázích. ### API -K projektu je již připravný funkční backend s API na adrese +K projektu je již připravený funkční backend s API na adrese https://apps.kodim.cz/daweb/leviexpress/api diff --git a/daweb/react/leviexpress-2/cvlekce/detail-jizdenky/exercise.md b/daweb/react/leviexpress-2/cvlekce/detail-jizdenky/exercise.md index 9e7406d6..6f0b95f6 100644 --- a/daweb/react/leviexpress-2/cvlekce/detail-jizdenky/exercise.md +++ b/daweb/react/leviexpress-2/cvlekce/detail-jizdenky/exercise.md @@ -12,7 +12,7 @@ V předešlé lekci jsme dospěli k vytvoření rezervace a získání `reservat 1. V routeru připravte již existující komponentu `ReservationPage` na správné zpracování detailu jízdenky. Upravte `path` v routeru tak, aby dynamicky zpracovávala `:id` parametr. Výsledná cesta bude vypadat takto: `path: '/reservation/:id'`. 1. Do komponenty `ReservationPage` zkopírujte příslušný HTML kód ze zadání designu. Ze souboru `reservation.html` převezměte element `div` s třídou `reservation` i s jeho obsahem. -1. Vytvoře v komponentě soubor `style.css`, do kterého zkopírujte ze zadání styly pro třídy začínající `reservation`. Naimportujte soubor se styly do komponenty. +1. Vytvořte v komponentě soubor `style.css`, do kterého zkopírujte ze zadání styly pro třídy začínající `reservation`. Naimportujte soubor se styly do komponenty. 1. Komponenta musí zjistit, na detailu které jízdenky se nachází. Naimportujte si `useParams` hook z `react-router-dom`. Uvnitř komponenty tento hook zavolejte a získejte z něj parametr `id`. Podívejte se na [příklad použití hooku useParam](https://reactrouter.com/en/main/hooks/use-params). 1. Pomocí `useState` vytvořte nový stav `reservation`, výchozí hodnota bude `null`. 1. Přidejte `useEffect` volaný při prvním zobrazení komponenty. Bude z API získávat podrobné informace o jedné jízdence. Endpoint je na adrese diff --git a/daweb/react/leviexpress-2/cvlekce/planek-sedadel.md b/daweb/react/leviexpress-2/cvlekce/planek-sedadel.md index e1ee11c2..032016e2 100644 --- a/daweb/react/leviexpress-2/cvlekce/planek-sedadel.md +++ b/daweb/react/leviexpress-2/cvlekce/planek-sedadel.md @@ -9,7 +9,7 @@ solutionAccess: protected V tomto cvičení vytvoříme komponentu zobrazující plánek sedadel v autobusu. Obsazená sedadla budou zobrazena šedě a nepůjde na ně kliknout. API vrací seznam sedadel po řadách – nemusíte tedy řešit rozmístění sedadel. Zobrazíte jednoduše každou řadu zvlášť a v ní sedadla zleva doprava v pořadí, jak přijdou. 1. Vytvořte komponentu `SeatPicker` a přidejte styly pro třídy `seat-picker` a `seats` ze zadání projektu. Do komponenty `SeatPicker` zkopírujte ze zadání celý `div` s třídami `seat-picker` a `container`. Obsah `div`u `seats` však nechte prázdný. -1. Přidejte komponentu `SeatPicker` do komponenty `HomePage` tam, místo komponenty `SelectedSeat`. Bude tak umístěna pod `JourneyDetail`. Komponentu budeme chtít do budoucna zobrazit jen v případě, kdy stav `journey` neobsahuje `null`. Pro vývoj ale komponenty bude rychlejší, když se prozatím bude zobrazovat stále. +1. Přidejte komponentu `SeatPicker` do komponenty `HomePage`, místo komponenty `SelectedSeat`. Bude tak umístěna pod `JourneyDetail`. Komponentu budeme chtít do budoucna zobrazit jen v případě, kdy stav `journey` neobsahuje `null`. Pro vývoj komponenty ale bude rychlejší, když se prozatím bude zobrazovat stále. 1. Dále v projektu vytvořte komponentu `Seat` představující jedno sedadlo v autobusu. Sedadlo je vytvořeno pomocí SVG, které najdete v zadání projektu. Do komponenty `Seat` přidejte všechny styly týkající se jednoho sedadla. 1. Komponenta `Seat` bude mít zatím jednu _prop_ s názvem `number`, ve které bude číslo sedadla. 1. Zkusmo vložte do komponenty `SeatPicker` pár sedadel s různými čísly, například 1, 17 a 33. Zatím jen tak pod sebe, abychom si vyzkoušeli, že vůbec dokážeme sedadla správně zobrazit. diff --git a/daweb/react/leviexpress-2/cvlekce/rady-sedadel/exercise.md b/daweb/react/leviexpress-2/cvlekce/rady-sedadel/exercise.md index bc29f5aa..fa1e81ff 100644 --- a/daweb/react/leviexpress-2/cvlekce/rady-sedadel/exercise.md +++ b/daweb/react/leviexpress-2/cvlekce/rady-sedadel/exercise.md @@ -11,7 +11,7 @@ Nyní zařídíme zobrazování sedadel v řadách. Plánek sedadel bude vypadat ::fig[náhled]{src=assets/nahled.png} 1. V projektu vytvořte komponentu `SeatRow`, která představuje jednu řadu sedadel. Bude vracet `div` s třídou `seat-row`, který v dalších krocích naplníme sedadly tak, jak nám přijdou z API. Zatím do komponenty natvrdo vložte pár sedadel jen pro testovací účely. Komponentu `SeatRow` pak vložte do `div`u `seats` v komponentě `SeatPicker`. -1. Komponenta `SeatRow` bode očekávat _prop_ s názvem `row`, ve které budou v poli data pro jednu čadu sedadel. Pro testovací účely si vytvořte v `SeatPicker` proměnnou `testRow`, která bude obsahovat takovéto pole: +1. Komponenta `SeatRow` bude očekávat _prop_ s názvem `row`, ve které budou v poli data pro jednu řadu sedadel. Pro testovací účely si vytvořte v `SeatPicker` proměnnou `testRow`, která bude obsahovat takovéto pole: ```js const testRow = [ { @@ -28,7 +28,7 @@ Nyní zařídíme zobrazování sedadel v řadách. Plánek sedadel bude vypadat }, ]; ``` -1. Předejte tuto proměnou komponentě `SeatRow` a uvnitř ní pomocí funkce `map` zobrazte jednotlivá sedadla. Jako `key` _prop_ u jednotlivých sedadel můžete použít samotné číslo sedadla, to je v řadě vždy unikátní. Ověřte, že se testovací řada sedadel správně zobrazuje v prohlížeči. +1. Předejte tuto proměnmou komponentě `SeatRow` a uvnitř ní pomocí funkce `map` zobrazte jednotlivá sedadla. Jako `key` _prop_ u jednotlivých sedadel můžete použít samotné číslo sedadla, to je v řadě vždy unikátní. Ověřte, že se testovací řada sedadel správně zobrazuje v prohlížeči. 1. Nyní máme vše připraveno pro zobrazení správného plánku sedadel podle dat z API. Pracovat budeme v komponentě `SeatPicker` – tam, kde máme testovací řadu sedadel. Když se podíváte, jaká odpověď chodí z API při vyhledání spojení (ta, kterou pak máte uloženou ve stavu `journey` komponenty `HomePage`), uvidíte, že máte velké štěstí. Ve vlastnosti `seats` je pole, které představuje přímo jednotlivé řady v autobusu. 1. Nyní je tedy potřeba údaje o sedadlech předat z komponenty `HomePage` do komponenty `SeatPicker`. Do komponenty `SeatPicker` tedy přidejte _prop_ `seats` (vloží se do ní `journey.seats`). 1. Ještě je potřeba upravit komponentu `HomePage` tak, aby komponenta `SeatPicker` byla vidět jedině v případě, že je stav `journey` jiný než `null` – tedy stejně, jako se zobrazuje komponenta `JourneyDetail`. Ověřte v prohlížeči, že po vyhledání spoje se zobrazí podrobnosti cesty a také komponenta pro výběr sedadel – zatím s vašimi testovacími sedadly. diff --git a/daweb/react/leviexpress-2/cvlekce/stav-sedadla.md b/daweb/react/leviexpress-2/cvlekce/stav-sedadla.md index af3b8edb..6dcef0e6 100644 --- a/daweb/react/leviexpress-2/cvlekce/stav-sedadla.md +++ b/daweb/react/leviexpress-2/cvlekce/stav-sedadla.md @@ -17,7 +17,7 @@ V předchozí verzi projektu jsme sedadlo pro rezervaci získali z hodnoty `auto 1. Obě komponenty `SeatPicker` i `SeatRow` musí mít proto _prop_ `onSeatSelected`. Komponenta `SeatRow` tuto funkci/callback předá všem svým `Seat` jako _prop_ `onSelect`. Komponenta `SeatPicker` funkci `onSeatSelected` předá dolů komponentě `SeatRow` skrze stejnojmennou _prop_. Takto můžeme z prarodiče `SeatPicker` propašovat funkci do vnuka `Seat`. 1. Nyní stačí komponentě `SeatPicker` skrze _prop_ `onSeatSelected` předat funkci `setUserSeat`, která nastaví stav v komponentě `HomePage`. Pokud se povedlo vše správně propojit, při kliknutí na sedadlo se změní stav `userSeat` v komponentě `HomePage` a plánek zobrazí vybrané sedadlo. Vyzkoušejte v prohlížeči, že vše správně funguje. 1. Pokud zkusíte kliknout na sedadlo, které už je obsazené, zjistíte, že i takové sedadlo jde vybrat. V komponentě `Seat`tedy ještě upravte zpracování události `click` tak, aby se callback `onSelect` zavolal jen v případě, že sedadlo ještě není obsazené. -1. Pokud jste došli až sem, váš projekt je téměř hotový. Stačí už je v obsluze tlačítka pro rezervaci místo `autoSeat` (funkce `handleBuy` v komponentě `HomePage`) použít stav `userSeat`. +1. Pokud jste došli až sem, váš projekt je téměř hotový. Stačí už jen v obsluze tlačítka pro rezervaci místo `autoSeat` (funkce `handleBuy` v komponentě `HomePage`) použít stav `userSeat`. 1. Pročistěte kód od všech nepotřebných výpisů, zakomentovaných částí kódu a jiných pozůstatků vývoje. 1. Pokud se vše povedlo, váš projekt LeviExpress je hotový. Umožní uživateli vybrat, odkud kam chce jet, datum cesty i sedadlo, a rezervovat si jízdenku. 1. Commitněte změny, pushněte je na GitHub, kochejte se fungující aplikací a podívejte se, jestli náhodou RegioJet neshání junior frontend vývojářky. diff --git a/daweb/react/pokrocila-komunikace/cv-pokrocile.md b/daweb/react/pokrocila-komunikace/cv-pokrocile.md index 95e2430c..d37f8e78 100644 --- a/daweb/react/pokrocila-komunikace/cv-pokrocile.md +++ b/daweb/react/pokrocila-komunikace/cv-pokrocile.md @@ -7,7 +7,7 @@ V následujících dvou cvičeních si budeme hrát s hamburger menu. ::exc[cvlekce/hamburger-menu] ::exc[cvlekce/nazev-stranky] -Komunikaci mezi sourozenci si vyzkoušíme na aplikace zborazující dotazník. +Komunikaci mezi sourozenci si vyzkoušíme na aplikaci zobrazující dotazník. ::exc[cvlekce/dotaznik] ::exc[cvlekce/dotaznik-fajfka] diff --git a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md index ae9e2bd0..7c743ed2 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/dotaznik-fajfka.md @@ -9,8 +9,8 @@ solutionAccess: protected 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. 1. Nejprve chceme u otázky reagovat na kliknutí na jednu z jejich možností. V komponentě `Option` přidejte na `div` s třídou `option` posluchač události `onClick`. Zatím jej naprogramujte tak, aby do konzole vypsal text vybrané odpovědi, tedy například "spíše souhlasím". -1. V komponentě `Question` si vytvořte stav `answered`. Tento stavu bude říkat, zda je otázka zodpovězena, či nikoliv. Výchozí hodnota tohoto stavu bude `false`. -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. V komponentě `Question` si vytvořte stav `answered`. Tento stav bude říkat, zda je otázka zodpovězena, či nikoliv. Výchozí hodnota tohoto stavu bude `false`. +1. Zařiďte následující: pokud je ve stavu `answered` hodnota `false`, chceme, aby komponenta `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. diff --git a/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md b/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md index 49d3ded2..4f9bafad 100644 --- a/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md +++ b/daweb/react/pokrocila-komunikace/cvlekce/nazev-stranky.md @@ -8,7 +8,7 @@ solutionAccess: protected Pokračujte v předchozím příkladu. Nyní si vyzkoušíme callback s parametrem a budeme chtít, aby se při kliknutí na položku menu zobrazil správný název stránky. -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. Přidejte do komponenty `HomePage` 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. diff --git a/daweb/react/pokrocila-komunikace/dite-rodic.md b/daweb/react/pokrocila-komunikace/dite-rodic.md index 69b49af7..0575063c 100644 --- a/daweb/react/pokrocila-komunikace/dite-rodic.md +++ b/daweb/react/pokrocila-komunikace/dite-rodic.md @@ -4,9 +4,9 @@ V předchozí lekci jsme se naučili jednoduchou komunikaci od dítěte k rodič > Dítě může rodiči poslat informaci tak, že nastaví jeho stav. Rodič tak musí dítěti předat funkci, která mu umožní stav měnit. -My jsme proto dítěti vždycky posílali přímo funkci `setState`, tedy například `setPresident` v naší ukázce s volbami. Snadno ovšem narazíme na situace, kdy si s tímto postupem nevystačíme. Většinou to je ve chvíli, kdy chceme rodiči od dítěte předat nějakou informaci a rodič se má sám rozhodnout, jak s touto informací naloží. Zda například změní stav, jakým zůsobem jej změní nebo třeba udělá něco úplně jiného, například odešle data na server, zavolá nějaký API endpoint apod. +My jsme proto dítěti vždycky posílali přímo funkci `setState`, tedy například `setPresident` v naší ukázce s volbami. Snadno ovšem narazíme na situace, kdy si s tímto postupem nevystačíme. Většinou to je ve chvíli, kdy chceme rodiči od dítěte předat nějakou informaci a rodič se má sám rozhodnout, jak s touto informací naloží. Zda například změní stav, jakým způsobem jej změní – nebo třeba udělá něco úplně jiného, například odešle data na server, zavolá nějaký API endpoint apod. -Pro názornou ukázku s vraťme k našemu příkladu s volbami. V minulé lekci jsme si ukázali, jak může komponenta `Candidate` poslat informaci o tom, kdo byl zvolen, svému rodiči `HomePage`. Tato komunikace proběha srkze funkci předanou skrze prop `onVote`. +Pro názornou ukázku se vraťme k našemu příkladu s volbami. V minulé lekci jsme si ukázali, jak může komponenta `Candidate` poslat informaci o tom, kdo byl zvolen, svému rodiči `HomePage`. Tato komunikace proběhne skrze funkci předanou skrze prop `onVote`. ```jsx export const Candidate = ({ name, avatar, onVote }) => { @@ -26,7 +26,7 @@ export const Candidate = ({ name, avatar, onVote }) => { }; ``` -Této komponentě pak její rodič `HomePage` předával rovnou funkci `setPresident`, která nastaví stav `president` na jméno kandidáta. +Této komponentě pak její rodič `HomePage` předává rovnou funkci `setPresident`, která nastaví stav `president` na jméno kandidáta. ```jsx
diff --git a/daweb/react/pokrocila-komunikace/potomci.md b/daweb/react/pokrocila-komunikace/potomci.md index 575b2dac..9f6ef915 100644 --- a/daweb/react/pokrocila-komunikace/potomci.md +++ b/daweb/react/pokrocila-komunikace/potomci.md @@ -4,7 +4,7 @@ Náš příklad s volbami by ještě pořád mohl být o kus složitější. V r V takové situaci musíme data předávat přes několik komponent, které tato data nepotřebují, pouze je předávají dále. Tento postup se běžně nazývá _prop drilling_, česky bychom mohli říct _vrtání_. -Pro názorný příklad si představme, že bychom v naší aplikaci s volbami měli ještě další komponentu `CandidateList`, která by zobrazovala seznam všech kandidátů. To znamená, že komponenta `Candidate` je zanořena o jednu úrovně hlouběji a musíme k ní funkci `handleVote` provrtat přes komponentu `CandidateList`. +Pro názorný příklad si představme, že bychom v naší aplikaci s volbami měli ještě další komponentu `CandidateList`, která by zobrazovala seznam všech kandidátů. To znamená, že komponenta `Candidate` je zanořena o jednu úroveň hlouběji a musíme k ní funkci `handleVote` provrtat přes komponentu `CandidateList`. ```jsx const CandidateList = ({ candidates, onVote }) => { @@ -71,7 +71,7 @@ Prop drilling nám slouží k tomu, aby spolu mohly komunikovat komponenty, kter 1. **Horší přehlednost** – čtenář kódu musí složitě navigovat kódem a držet v hlavě, kudy všude proudí data. 1. **Nepohodlnost** – psát kód s hlubokým vrtáním je pro programátory otravné a zdlouhavé. -1. **Průchozí komponenty** – máme v kódu spoustu komponent, která data ve skutečnosti nepotřebují, jen je předávají dále, čímž se komplikuje jejich kód. -1. **Horší udržitelnost** – pokud se rozhodneme změnit strukturu komponent, musíme přepisovat i průchozí komponenty, která data vlastně nepotřebují. +1. **Průchozí komponenty** – máme v kódu spoustu komponent, které data ve skutečnosti nepotřebují, jen je předávají dále, čímž se komplikuje jejich kód. +1. **Horší udržitelnost** – pokud se rozhodneme změnit strukturu komponent, musíme přepisovat i průchozí komponenty, které data vlastně nepotřebují. -V reálnách aplikacích se proto příliš agresivnímu prop drillingu snažíme vyhnout. Pokud to z hlediska struktury aplikace dává smysl, snažíme se předávání dat mezi komponentami řešit jinými způsoby, například pomocí _contextu_ nebo pomocí _state managementu_. To jsou však pro tento kurz příliš pokročilá témata. V následujících lekcích se proto omezíme na vrtání maximálně přes jednu komponentu, nebo se mu budeme vyhýbat úplně. +V reálných aplikacích se proto příliš agresivnímu prop drillingu snažíme vyhnout. Pokud to z hlediska struktury aplikace dává smysl, snažíme se předávání dat mezi komponentami řešit jinými způsoby, například pomocí _contextu_ nebo pomocí _state managementu_. To jsou však pro tento kurz příliš pokročilá témata. V následujících lekcích se proto omezíme na vrtání maximálně přes jednu komponentu, nebo se mu budeme vyhýbat úplně. diff --git a/daweb/react/pokrocila-komunikace/sourozenci.md b/daweb/react/pokrocila-komunikace/sourozenci.md index d5521b73..8f49b36b 100644 --- a/daweb/react/pokrocila-komunikace/sourozenci.md +++ b/daweb/react/pokrocila-komunikace/sourozenci.md @@ -1,6 +1,6 @@ ## Komunikace mezi sourozenci -Komunikaci mezi sourozenci je potřeba ve chvíli, kdy máme si potřebují nějaká data vyměnit komponenty, které mají společného rodiče. +Komunikace mezi sourozenci je potřeba ve chvíli, kdy si potřebují nějaká data vyměnit komponenty, které mají společného rodiče. Tuto situaci si opět ilustrujeme na našem příkladu s volbou nového prezidenta. V minulé lekci jsme skončili v situaci, kdy komponenta `Candidate` dokáže svému rodiči `HomePage` poslat jméno kandidáta pomocí callbacku `onVote`. Naše aplikace však byla napsaná stále dosti jednoduše. V realitě bychom nejspíše narazili na složitější situaci. Podívejme se na začátek komponenty `HomePage`. @@ -41,7 +41,7 @@ export const Castle = ({ president }) => { }; ``` -Naše komponenta `HomePage` pak může komponentu `Castle` použíjt jako svoje dítě. +Naše komponenta `HomePage` pak může komponentu `Castle` použít jako svoje dítě. ```jsx return ( @@ -52,7 +52,7 @@ return ( ); ``` -Všimněte si, že komponenta `Candidate` a komponenta `Castle` jsou sourozenci. Jejich společným rodičem je komponenta `HomePage`. Komponenta `Candidate` už neposílá jméno kandidáta svému rodiči jako dříve. Nyní jej posílá svému sourozenci `Castle`. Všimněte si však, že tato komunikace probíhá skrze rodiče `HomePage`. Jakmile komponenta `Candidate` zavolá callback `handleVote`, tento uloží jméno prezidenta do stavu komponenty `App`. Tímto se vyvolá překreslení komponenty `Home`, čimž se hodnota stavu `president` předá do props komponenty `Castle`. +Všimněte si, že komponenta `Candidate` a komponenta `Castle` jsou sourozenci. Jejich společným rodičem je komponenta `HomePage`. Komponenta `Candidate` už neposílá jméno kandidáta svému rodiči jako dříve. Nyní jej posílá svému sourozenci `Castle`. Všimněte si však, že tato komunikace probíhá skrze rodiče `HomePage`. Jakmile komponenta `Candidate` zavolá callback `handleVote`, tento callback uloží jméno prezidenta do stavu komponenty `App`. Tímto se vyvolá překreslení komponenty `Home`, čímž se hodnota stavu `president` předá do props komponenty `Castle`. Z této ukázky plyne pravidlo pro komunikaci mezi sourozenci: diff --git a/daweb/react/react-router/chyby.md b/daweb/react/react-router/chyby.md index d7e7d7dc..bf6ab1a6 100644 --- a/daweb/react/react-router/chyby.md +++ b/daweb/react/react-router/chyby.md @@ -2,7 +2,7 @@ Naše stránky by měly umět dobře reagovat na všechny možné situace, kdy se je někdo pokouší používat nesprávným způsobem. Jednou z hlavních takových situací je pokus o načtení URL adresy, na které nic není. -Pokud například v naší ukázkové účetní aplikaci zajdeme na adresu `/nazdar`, vyskočí nám chybová stránka, jejíž obsah dodává přímo React Router. Tato stránka nás zároveň nabádá, abychom byli k uživateli vstřícnější v vyrobili si vlastní chybovou stránku, která lépe zapadá do naší aplikace. +Pokud například v naší ukázkové účetní aplikaci zajdeme na adresu `/nazdar`, vyskočí nám chybová stránka, jejíž obsah dodává přímo React Router. Tato stránka nás zároveň nabádá, abychom byli k uživateli vstřícnější a vyrobili si vlastní chybovou stránku, která lépe zapadá do naší aplikace. Možná jste už někdy narazili na hezkou chybovou stránku například na [GitHubu](https://github.com/abrakadabra-treskyplesky). diff --git a/daweb/react/react-router/cvlekce/detsky-koutek.md b/daweb/react/react-router/cvlekce/detsky-koutek.md index 1d885339..e693dee7 100644 --- a/daweb/react/react-router/cvlekce/detsky-koutek.md +++ b/daweb/react/react-router/cvlekce/detsky-koutek.md @@ -16,10 +16,10 @@ V tomto cvičení vytvoříte jednoduchou stránku pro dětský koutek. Pomocí ```sh npm install react-router-dom ``` -1. Spusťte aplikaci příkazem `npm start` a zkontrolujte, že vám v prohlížeči správně běží. +1. Spusťte aplikaci příkazem `npm run dev` a zkontrolujte, že vám v prohlížeči správně běží. 1. Nebojte se v následujících krocích inspirovat dokumentací [React Routeru](https://reactrouter.com/en/main/start/overview)! 1. V hlavním souboru `index.jsx` založte objekt s routami. Vytvořte si v tomto souboru komponentu `App`, která zatím bude obsahovat pouze nadpis stránky. Zobrazujte ji pod cestou `/`. Nezapomeňte použít `RouterProvider` ve funkci `render`. Vyzkoušejte, že takto vaše aplikace funguje. -1. V adresáři `pages` už máte vygenerovanou komponentu `HomePage`. Ta by měla obshovat nadpis a text: +1. V adresáři `pages` už máte vygenerovanou komponentu `HomePage`. Ta by měla obsahovat nadpis a text: > Dětský koutek > diff --git a/daweb/react/react-router/cvlekce/parametry.md b/daweb/react/react-router/cvlekce/parametry.md index b44ea6c2..f8755371 100644 --- a/daweb/react/react-router/cvlekce/parametry.md +++ b/daweb/react/react-router/cvlekce/parametry.md @@ -12,8 +12,8 @@ Budeme pokračovat v projektu dětského koutku. Přidáme možnost zobrazit sez 1. Nejprve do projektu přidejte stránku, která správně ošetří přístup na neexistující stránku, tedy chybu 404. 1. Dále přidejte do navigace stránku _Pobočky_ a vytvořte pro ni samostatnou komponentu `CentersPage`. Na této stránce budeme chtít zobrazit jednotlivé pobočky našeho dětského koutku (viz další bod). 1. Rozjeďte si API server s daty. Naklonujte si k sobě repozitář [api-centers](https://github.com/Czechitas-podklady-WEB/api-centers) a spusťte v něm `npx apidroid@latest`. Prohlédněte si data na endpointu `/api/centers`. -1. V komponentě `CentersPage` si tytvořte stav `center` a do něj pomocí klasikého postupu s `useEffect` a `fetch` stáhněte pole dat z API. Pomocí mapování zobrazte seznam odkazů na jednotlivé pobočky. Odkaz bude vždy cesta `/pobocky/id-pobocky`. Zatím nezobrazujte detail pobočky, pouze její název a adresu. Tento seznam bude sloužit jako navigace mezi jednotlivými pobočkami. -1. Vytvořte komponentu `CenterDetail` pro zobrazení detailu pobočky. Tato komponenta bude sídlit pod cestou `/pobocky/:id`. Pomocí `useParams` a API endpointu `/api/centers/:id` získejte položku podle parametru `:id`. Zobrazte detail pobočky s otvíracími hodinami i popisem. +1. V komponentě `CentersPage` si vytvořte stav `center` a do něj pomocí klasikého postupu s `useEffect` a `fetch` stáhněte pole dat z API. Pomocí mapování zobrazte seznam odkazů na jednotlivé pobočky. Odkaz bude vždy cesta `/pobocky/id-pobocky`. Zatím nezobrazujte detail pobočky, pouze její název a adresu. Tento seznam bude sloužit jako navigace mezi jednotlivými pobočkami. +1. Vytvořte komponentu `CenterDetail` pro zobrazení detailu pobočky. Tato komponenta bude sídlit pod cestou `/pobocky/:id`. Pomocí `useParams` a API endpointu `/api/centers/:id` získejte položku podle parametru `:id`. Zobrazte detail pobočky s otevíracími hodinami i popisem. 1. Komponentu `CenterDetail` zobrazte jako `` uvnitř komponenty `CentersPage`. 1. Nyní by měla stránka správně fungovat. Po kliknutí na pobočku se uživatel dostane na stránku s detailem každé pobočky. Zároveň na stránce uvidí hlavní navigaci i seznam ostatních poboček. diff --git a/daweb/react/react-router/dynamicky-obsah.md b/daweb/react/react-router/dynamicky-obsah.md index 08b825a6..a7eea140 100644 --- a/daweb/react/react-router/dynamicky-obsah.md +++ b/daweb/react/react-router/dynamicky-obsah.md @@ -2,7 +2,7 @@ Jsou weby, kde si vystačíme s pár stránkami - _Domovská stránka_, _O nás_, _Kontakt_ apod. Tyto stránky si nachystáme v kódu, nastylujeme a máme hotovo. Jednou za pár let možná upravíme naši adresu nebo telefonní číslo. -Stránky jako blogy, zpravodajské weby, e-shopy a další však mívají mnohem složitější strukturu, tísíce článků, produktů, uživatelů a tak dále. Budeme tak potřebovat komponenty, které zobrazují data z databáze například na základě id. Adresy pro jednotlivé faktury za poslední měsíc pak mohou vypadat například takto: +Stránky jako blogy, zpravodajské weby, e-shopy a další však mívají mnohem složitější strukturu, tisíce článků, produktů, uživatelů a tak dále. Budeme tak potřebovat komponenty, které zobrazují data z databáze například na základě id. Adresy pro jednotlivé faktury za poslední měsíc pak mohou vypadat například takto: ``` /invoices/lastmonth/249857 diff --git a/daweb/react/react-router/router.md b/daweb/react/react-router/router.md index c35ea034..a862f986 100644 --- a/daweb/react/react-router/router.md +++ b/daweb/react/react-router/router.md @@ -1,14 +1,14 @@ ## React Router -Většina vývojářů v Reactu používá na client-side routing knihovnu, která se jmenuje přiléhavě [React Router](https://reactrouter.com/). Nainstalovat si ji můžete jako závislost přes _npm_ a následně z ní můžeme používat připravené komponenty přímo v našem kódu. +Většina vývojářů v Reactu používá na client-side routing knihovnu, která se jmenuje přiléhavě [React Router](https://reactrouter.com/). Nainstalujeme si ji jako závislost přes _npm_ a následně z ní můžeme používat připravené komponenty přímo v našem kódu. -Do existujícího projektu můžeme nainstalovat React Router knihovnu přest terminál pomocí _npm_. +Do existujícího projektu můžeme nainstalovat knihovnu React Router přes terminál pomocí _npm_. ```sh npm install react-router-dom ``` -Nyní máme v projektu k dispozici celou škálu komponent, se kterými můzeme pracovat. Stačí si je správně naimportovat a použít jako kteroukoliv jinou komponentu. +Nyní máme v projektu k dispozici celou škálu komponent, se kterými můžeme pracovat. Stačí si je správně naimportovat a použít jako kteroukoliv jinou komponentu. Vytvořme pro začátek kostru webové aplikace pro vedení účetnictví. Stránky zatím pro rychlost vložíme přímo do hlavního souboru `index.jsx`. Později je samozřejmě přesuneme do samostatných složek ve složce `src/pages`. diff --git a/daweb/react/react-router/spa.md b/daweb/react/react-router/spa.md index 76e88619..99069622 100644 --- a/daweb/react/react-router/spa.md +++ b/daweb/react/react-router/spa.md @@ -1,8 +1,8 @@ -Přestože je možné na internetu potkat weby, které mají pouze jednu stránku, je to spíš výjimka. Takové weby rozhodně mají svůj smysl například jako osobní prezentace nebo stránky pro malé podniky. My se však rozhodně na takové weby omezovat nechceme. Naučíme se se proto způsob, jak naši aplikaci rozšířit o další stránky a posunout ji na vyšší úroveň. +Přestože je možné na internetu potkat weby, které mají pouze jednu stránku, je to spíš výjimka. Takové weby rozhodně mají svůj smysl například jako osobní prezentace nebo stránky pro malé podniky. My se však rozhodně na takové weby omezovat nechceme. Naučíme se proto způsob, jak naši aplikaci rozšířit o další stránky a posunout ji na vyšší úroveň. ## Single-page application (SPA) -Mechanizmus, kterým se rozhodujeme, kterou stránku chceme zobrazit pro jakou URL adresu, se nazývá _routing_. Když jsme vyvíjeli naše první weby v čistém JavaScriptu s pomocí JSX, vždy jsme měli stránky na serveru připravné jako HTML soubory. To znamená, že odeslat tu správnou stránku bylo úkolem serveru. Dělalí jsme tedy takzvaný _server-side routing_. +Mechanizmus, kterým se rozhodujeme, kterou stránku chceme zobrazit pro jakou URL adresu, se nazývá _routing_. Když jsme vyvíjeli naše první weby v čistém JavaScriptu s pomocí JSX, vždy jsme měli stránky na serveru připravené jako HTML soubory. To znamená, že odeslat tu správnou stránku bylo úkolem serveru. Dělali jsme tedy takzvaný _server-side routing_. V Reactu máme však pouze jeden HTML soubor a každá stránka je samostatná komponenta. Rozhodování, kterou komponentu zobrazit, se děje až na klientovi, což nazýváme _client-side routing_. Jelikož z hlediska serveru máme stránku pouze jednu, často se v tomto kontextu mluví o _single page application_ (SPA). diff --git a/daweb/react/stavebni-vzory/children-prop.md b/daweb/react/stavebni-vzory/children-prop.md index 635c4594..1ecc08ab 100644 --- a/daweb/react/stavebni-vzory/children-prop.md +++ b/daweb/react/stavebni-vzory/children-prop.md @@ -1,6 +1,6 @@ ## Prop `children` -Když vytváříme znovupoužielné komponenty, často budeme chtít, aby si programátor mohl sám rozhodnout, co se v komponentě zobrazí. Mohli bychom například umožnit zobrazit uvnitř komponenty `Alert` nějaký složitější obash, než pouze textový řetězec. +Když vytváříme znovupoužitelné komponenty, často budeme chtít, aby si programátor mohl sám rozhodnout, co se v komponentě zobrazí. Mohli bychom například umožnit zobrazit uvnitř komponenty `Alert` nějaký složitější obsah, než pouze textový řetězec. Například bychom chtěli mít možnost zobrazit v komponentě `Alert` několik odstavců textu: @@ -31,6 +31,6 @@ export const Alert = ({ type, title, children }) => { }; ``` -Prop `children` budeme využívat vždy, kdy budeme potřebovat napsat komponentu, která má obsahovat další prvky nebo komponenty, ale my dopředu nevíme, jaké to budou. +Prop `children` budeme využívat vždy, když budeme potřebovat napsat komponentu, která má obsahovat další prvky nebo komponenty, ale my dopředu nevíme, jaké to budou. -Časté použití jsou například jsou znovupoužitelné komponenty jako různá dialogová okna, sidebary, nastylované boxy, ve kterých může být libovolný obsah, nebo obecné komponenty, které například řídí rozložení prvků na stránce. +Časté použití jsou například znovupoužitelné komponenty jako různá dialogová okna, sidebary, nastylované boxy, ve kterých může být libovolný obsah, nebo obecné komponenty, které například řídí rozložení prvků na stránce. diff --git a/daweb/react/stavebni-vzory/cvlekce/karty.md b/daweb/react/stavebni-vzory/cvlekce/karty.md index 27cb2576..ef6634d8 100644 --- a/daweb/react/stavebni-vzory/cvlekce/karty.md +++ b/daweb/react/stavebni-vzory/cvlekce/karty.md @@ -1,5 +1,5 @@ --- -title: Znovupoužitlné karty +title: Znovupoužitelné karty lead: Vytvořte znovupoužitelnou komponentu `Card` s nadpisem a popisem a dalšími prvky. demand: 3 context: lekce diff --git a/daweb/react/stavebni-vzory/detail-polozky.md b/daweb/react/stavebni-vzory/detail-polozky.md index 863f1638..f071bb36 100644 --- a/daweb/react/stavebni-vzory/detail-polozky.md +++ b/daweb/react/stavebni-vzory/detail-polozky.md @@ -58,7 +58,7 @@ export const Detail = ({ description, opened }) => { ### Zobrazení dat, která si komponenta stáhne sama -V tomto případě budeme data stahovat v komponentě `Detail`. Budeme tedy pobřebovat `useEffect`, který bude záviset na prop `opened`. Když se `opened` změní na `true`, stáhneme data a uložíme je do stavu. Když se `opened` změní na `false`, pouze schováme detail. +V tomto případě budeme data stahovat v komponentě `Detail`. Budeme tedy potřebovat `useEffect`, který bude záviset na prop `opened`. Když se `opened` změní na `true`, stáhneme data a uložíme je do stavu. Když se `opened` změní na `false`, pouze schováme detail. ::fig{src="assets/diagram05.png" size="60"} diff --git a/daweb/react/stavebni-vzory/znovupouzitelnost.md b/daweb/react/stavebni-vzory/znovupouzitelnost.md index 03b44714..71d99911 100644 --- a/daweb/react/stavebni-vzory/znovupouzitelnost.md +++ b/daweb/react/stavebni-vzory/znovupouzitelnost.md @@ -1,6 +1,6 @@ ## Znovupoužitelnost -Když vytváříme nějakou větší a složitější aplikaci, vždy se na maximum snažíme udržet kód přehledný a srozumitelný. Jedním z hlavních postupů, který pomáhají udržet kód aplikace v dobrém stavu je takzvaná ::term{cs=znovupoužitelnost en=reusability}. Znovupoužitelnost znamená, že kód, který napíšeme, můžeme použít na více místech v té samé aplikaci. +Když vytváříme nějakou větší a složitější aplikaci, vždy se na maximum snažíme udržet kód přehledný a srozumitelný. Jedním z hlavních postupů, které pomáhají udržet kód aplikace v dobrém stavum je takzvaná :term{cs=znovupoužitelnost en=reusability}. Znovupoužitelnost znamená, že kód, který napíšeme, můžeme použít na více místech v té samé aplikaci. Princip znovupoužitelnosti využíváme vždy, když například píšeme nějakou funkci. Funkci píšeme většinou proto, aby šla použít na více různých místech. To nám pomáhá @@ -8,7 +8,7 @@ Princip znovupoužitelnosti využíváme vždy, když například píšeme něja - zvýšit spolehlivost kódu, protože danou funkčnost máme implementovanou jen na jednom místě, kde se o ni staráme, testujeme ji a opravujeme chyby, - zvýšit přehlednost kódu, protože stavíme srozumitelné stavební bloky, které další programátoři mohou snadno pochopit a použít. -Abychom měli hezky pořádek i v Reactovém, naučíme se vytvářet takzvané znovupoužitelné komponenty. +Abychom měli hezky pořádek i v Reactovém kódu, naučíme se vytvářet takzvané znovupoužitelné komponenty. ## Upozornění diff --git a/daweb/react/uvod-do-reactu/prvni-aplikace.md b/daweb/react/uvod-do-reactu/prvni-aplikace.md index 37553f5d..6afa3863 100644 --- a/daweb/react/uvod-do-reactu/prvni-aplikace.md +++ b/daweb/react/uvod-do-reactu/prvni-aplikace.md @@ -1,8 +1,8 @@ # První React aplikace -Do této chvíle jsem naše aplikace psali v "čistém" (anglicky se též říká "vanilla") JavaScriptu obohaceném o JSX šablony. Tímto jsme získali velkou průpravu k tomu, konečně si ukázat React, který je na JSX založen. Postupy, které jsme se dosud naučili, jsou zcela legitimní samy o sobě a můžeme takto psát i větší aplikace. U aplikací, které jsou velmi interaktivní a často mění obsah stránky, však narazíme na zásadní problém: +Do této chvíle jsme naše aplikace psali v „čistém“ (anglicky se též říká „vanilla“) JavaScriptu obohaceném o JSX šablony. Tímto jsme získali velkou průpravu k tomu, konečně si ukázat React, který je na JSX založen. Postupy, které jsme se dosud naučili, jsou zcela legitimní samy o sobě a můžeme takto psát i větší aplikace. U aplikací, které jsou velmi interaktivní a často mění obsah stránky, však narazíme na zásadní problém: -Při změně obsahu stránky je třeba celou stránku znovu načíst, což je pomalé a našikovné. Hlavně u větších stránek se spoustou komponent to může být velmi pomalá operace. Ideálně bychom tedy chtěli překreslit pouze ty části stránky, které se změnily. Například překreslit pouze jednu komponentu nebo pouze její část. +Při změně obsahu stránky je třeba celou stránku znovu načíst, což je pomalé a nešikovné. Hlavně u větších stránek se spoustou komponent to může být velmi pomalá operace. Ideálně bychom tedy chtěli překreslit pouze ty části stránky, které se změnily. Například překreslit pouze jednu komponentu nebo pouze její část. Na tento problém kdysi tvrdě narazili vývojáři Facebooku, a proto vytvořili framework s názvem [React](https://reactjs.org/). Podobných reaktivních frameworků existuje vícero. Mezi nejznámější vedle Reactu patří [Angular](https://angular.io/) a [Vue](https://vuejs.org/), ale svoji popularitu si získávají i další, například [Svelte](https://svelte.dev/) nebo [Solid](https://www.solidjs.com/). V současné době je však React stále s přehledem nejpopulárnější a také nejžádanější na trhu práce. @@ -16,15 +16,15 @@ Základní Vite projekt nastavený pro práci v Reactu si můžete vygenerovat p npm init kodim-app@latest my-app react ``` -Pozor na to, že tontokrát v příkazu máme místo slova `jsx` slovo `react`. Vite/React projekt se používá stejným způsobem, jakým jsme byli zvyklí u Vite/JSX projektů. Všimněte si však, že tento projekt má malinko jinou strukturu. +Pozor na to, že tentokrát v příkazu máme místo slova `jsx` slovo `react`. Vite/React projekt se používá stejným způsobem, jakým jsme byli zvyklí u Vite/JSX projektů. Všimněte si však, že tento projekt má malinko jinou strukturu. ### Reactová aplikace a stránky -Aplikace v Reactu použivají jiný způsob stránkování než jsme byli dosud zvyklí. Do této chvíle jsme používaly takzvaý "multi-page" nebo "server-side" přístup, kdy každá stránka byla samostatný HTML soubor se svým vlastním JavaScriptem. Reactové aplikace však používají takzvaný "single-page" nebo-li "client-side" přístup, kdy máme pouze jeden HTML soubor a všechny stránky jsou komponenty, které se načítají pomocí JavaScriptu/Reactu. +Aplikace v Reactu používají jiný způsob stránkování než jsme byli dosud zvyklí. Do této chvíle jsme používali takzvaný „multi-page“ nebo „server-side“ přístup, kdy každá stránka byla samostatný HTML soubor se svým vlastním JavaScriptem. Reactové aplikace však používají takzvaný „single-page“ nebo-li „client-side“ přístup, kdy máme pouze jeden HTML soubor a všechny stránky jsou komponenty, které se načítají pomocí JavaScriptu/Reactu. Tento způsob stránkování si hlouběji probereme v pozdějích lekcích. Nyní nám stačí vědět, že Reactové aplikace mají pouze jeden hlavní HTML soubor `index.html` a jeden hlavní JavaScript soubor `index.jsx`. Ve složce `pages` pak máme pouze jednotlivé komponenty, které se později budou načítat na různých URL adresách. -V hlavním souboru `index.jsx` máme pouze volání funkce `render` podobně, jako jsme byli dřívě zvyklí, jen místo `render` z balíčku `@czechitas/render` používáme funkci `createRoot` z balíčku `react-dom/client`. Hlavní soubor `index.jsx` tak vypadá takto. +V hlavním souboru `index.jsx` máme pouze volání funkce `render` podobně, jako jsme byli dříve zvyklí, jen místo `render` z balíčku `@czechitas/render` používáme funkci `createRoot` z balíčku `react-dom/client`. Hlavní soubor `index.jsx` tak vypadá takto. ```js import { createRoot } from 'react-dom/client'; diff --git a/daweb/react/uvod-do-reactu/shrnuti.md b/daweb/react/uvod-do-reactu/shrnuti.md index 5e5201ae..c28bdc80 100644 --- a/daweb/react/uvod-do-reactu/shrnuti.md +++ b/daweb/react/uvod-do-reactu/shrnuti.md @@ -4,4 +4,4 @@ Po této lekci byste měli vědět a znát - jak založit nový React projekt pomocí `kodim-app`, - jak v Reactu používat události, -- jak v Reactu používat jedoduchý stav. +- jak v Reactu používat jednoduchý stav. diff --git a/daweb/react/uvod-do-reactu/stav.md b/daweb/react/uvod-do-reactu/stav.md index 4e654b18..2d44da08 100644 --- a/daweb/react/uvod-do-reactu/stav.md +++ b/daweb/react/uvod-do-reactu/stav.md @@ -24,7 +24,7 @@ Po dlouhé cestě autem se nejspíš stav nádrže změní takto: tankLevel = 'almost empty'; ``` -a pokud dlouho ignorujeme blikající kontrolku, můžeme se dostat do velmi napříjemného stavu +a pokud dlouho ignorujeme blikající kontrolku, můžeme se dostat do velmi nepříjemného stavu ```js tankLevel = 'empty'; @@ -75,4 +75,4 @@ const Auto = () => { }; ``` -Po zavolání `setTankLevel` se komponenta takzvaně _překreslí_, též se říká _přerenderuje_. To znamená, že se znovu vykreslí na stránce, tentokrát s novou hodnotu stavu. Takto můžeme zařídit, že se obnoví jen ta část stránky, která se opravdu změnila a nemusíme ji celou znovu načítat, jak jsme byli zvyklí v čistém JavaScriptu s JSX. +Po zavolání `setTankLevel` se komponenta takzvaně _překreslí_, též se říká _přerenderuje_. To znamená, že se znovu vykreslí na stránce, tentokrát s novou hodnotou stavu. Takto můžeme zařídit, že se obnoví jen ta část stránky, která se opravdu změnila a nemusíme ji celou znovu načítat, jak jsme byli zvyklí v čistém JavaScriptu s JSX. diff --git a/daweb/react/uvod-do-reactu/udalosti.md b/daweb/react/uvod-do-reactu/udalosti.md index 23d9d300..2ddf62bc 100644 --- a/daweb/react/uvod-do-reactu/udalosti.md +++ b/daweb/react/uvod-do-reactu/udalosti.md @@ -36,8 +36,8 @@ const HomePage = () => { ### Přímá manipulace s obsahem stránky -V kurzu JavaScript 1 jsme obsah stránky měnili pomocí funkce `querySelector` a nastavování vlastností jako `textContent`, `className` apod. Později, v kurzu JavaScript 2 jsme přešli na JSX a obsah stránky jsmě změnili tak, že jsem ji celou načetli znova. +V kurzu JavaScript 1 jsme obsah stránky měnili pomocí funkce `querySelector` a nastavování vlastností jako `textContent`, `className` apod. Později, v kurzu JavaScript 2, jsme přešli na JSX a obsah stránky jsme změnili tak, že jsme ji celou načetli znova. V Reactu se až na velké výjimky nepoužívá žádný ze zmíněných přístupů. K aktualizaci stránky se využije technika, kdy se aktualizuje pouze obsah komponenty, které se nějak změnila data. Všechny ostatní komponenty zůstávají nedotčené. Toto umožňuje opravdu rychlou odezvu stránky a je to hlavní a nejdůležitější myšlenka Reactu, kvůli které vlastně celý React vzniknul. -Abychom tento způsobn aktualizace mohli používat, budeme potřebovat pochopit nový pojem jménem _stav_. +Abychom tento způsob aktualizace mohli používat, budeme potřebovat pochopit nový pojem jménem _stav_.