Drobné opravy v lekci React 3.

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

@@ -9,10 +9,11 @@ solutionAccess: protected
 V tomto cvičení vdechneme život komponentě, která umožňuje hodnocení pomocí hvězdiček. To znáte například z hodnocení filmů nebo třeba restaurací a hotelů.
 
 1. Vytvořte si repozitář ze šablony [cviceni-hodnoceni](https://github.com/Czechitas-podklady-WEB/cviceni-hodnoceni) obsahující React stránku s hodnocením pomocí pěti hvězdiček.
-1. Prohlédněte si, jak fungují komponenty `Rating` a `Star`. V následujicích bodech budeme chtít zařídit, aby se při rozsvícení libovolné hvězdičky zborazilo správné číslo udávající hodnocení.
+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. 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.
 
-Nyní by mělo být možné kliknutím na hvězdičky nastavit správné hodnocení. Hvezdičky se sice nechovají úplně správně, protože bychom chtěli, aby se při kliknutí na hvězdičku rozsvítily všechny hvězdičky s nižším číslem. To si však necháme na další cvičení.
+Nyní by mělo být možné kliknutím na hvězdičky nastavit správné hodnocení. Hvězdičky se nechovají úplně správně, protože bychom chtěli, aby se při kliknutí na hvězdičku rozsvítily všechny hvězdičky s nižším číslem. To si však necháme na další cvičení.

daweb/react/komunikace-dite-rodic/cvlekce/kurzovni-listek-zaklad.md

@@ -9,7 +9,7 @@ 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í.
 
 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 aplikaci. Zatím nic zásadního nedělá.
+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. 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`.

daweb/react/komunikace-dite-rodic/cvlekce/potisk-tricek.md

@@ -8,7 +8,8 @@ solutionAccess: protected
 
 Pomocí Reactu, stavu a komunikace mezi komponentami rozchodíme aplikaci, kde si uživatel může objednat typ trička, jeho barvu a potisk.
 
-1. Vytvořte si repozitář ze šablony [cviceni-tricka](https://github.com/Czechitas-podklady-WEB/cviceni-tricka), repozitář si poté naklonujte a rozběhněte si základ aplikace.
+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:
    - `normalShortSleeve`
    - `normalLongSleeve`

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é instance 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 tato 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.
 
@@ -24,7 +24,7 @@ const SensitiveButton = (props) => {
 
 V našem příkladu však callback nebudeme používat k poslouchání událostí. Budeme jej volat sami zevnitř komponenty `Candidate` ve chvíli, kdy chceme rodiči předat jméno zvoleného kandidáta.
 
-Nejprve tedy přidáme do komponenty `Candidate` novou _prop_ s názvem `onVote`. Abychom dali najevo, že do této prop budeme posílat funkci, volíme jméno podobně jako to známe u událostí, tedy `onClick`, `onMouseMove` apod. Jménem chceme naznačit, že tuto funkci zavoláme ve chvíli, kdy uživatel zahlasuje (anglicky :i[vote]) pro daného kandidáta.
+Nejprve tedy přidáme do komponenty `Candidate` novou _prop_ s názvem `onVote`. Abychom dali najevo, že do této prop budeme posílat funkci, volíme jméno podobně jako to známe u událostí, tedy `onClick`, `onMouseMove` apod. Jménem chceme naznačit, že tuto funkci zavoláme ve chvíli, kdy uživatel zahlasuje (anglicky _vote_) pro daného kandidáta.
 
 ```js
 const Candidate = ({ name, avatar, onVote }) => ( … )
@@ -99,12 +99,12 @@ V tuto chvíli už naše aplikace bude správně fungovat.
 
 ### Hlubší vysvětlení callbacků
 
-Komunikace pomocí callbacků může za 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.
+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ř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.
 
 Situaci můžene znázornit následujícím diagramem.
 
 ::fig{src=assets/dite-rodic.png}
 
-Z tohoto diagramu vidíme, že komunikace od rodiče k dítěti probíhá skrze props a komunikace od dítěte k rodiči probíhá skrze callbacky.
+Z tohoto diagramu vidíme, že komunikace od rodiče k dítěti probíhá skrze props a komunikace od dítěte k rodiči probíhá skrze callbacky (které se ovšem předávají také pomocí props).

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

@@ -1,20 +1,26 @@
 ## Komunikace rodič → dítě
 
-V předchozích lekcích už jsme se naučili téměř všechno, co v Reactu potřebujeme k vývojí 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. Způsob, jakým si komponenty budou předávat informace bude záviset na tom, jaký spolu mají vztah. V podstatě máme tři základní možnosti.
+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.
+
+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"}.
+
+_(Č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“.)_
+
+Způsob, jakým si komponenty budou předávat informace, pak bude záviset na tom, jaký spolu mají vztah. V podstatě máme tři základní možnosti.
 
 1. Komunikace rodič → dítě
 1. Komunikace dítě → rodič
 1. Komunikace mezi sourozenci
 
-_(Češtinářská perlička – sice v komunikaci vystupují „rodič“ a „dítě“, ale když chceme označit komponentu, neříkáme jí „dětská komponenta“ nýbrž „dceřiná komponenta“.)_
-
 V této lekci rozebereme první dvě možnosti a třetí si necháme do další lekce. K ilustraci komunikace mezi komponentami použijeme jednoduchou webovou aplikaci, ve které si budeme hrát na prezidentské volby. Pro tyto účely si vytvořte repozitář ze šablony [cviceni-volby](https://github.com/Czechitas-podklady-WEB/cviceni-volby). Repozitář si naklonujeme a prohlédneme si jeho strukturu.
 
 Naše volební aplikace zobrazuje čtyři kandidáty pomocí komponenty `Candidate`. Pole obsahující jména a podobizny kandidátů najdeme ve stavu komponenty `HomePage`. Tato data bychom normálně stáhli odněkud ze serveru. V tomto případě si život malinko ulehčíme a obsah stavu zadrátujeme přímo do kódu.
 
-Z kódu můžeme vyčíst, že komponenta `HomePage` používá komponentu `Candidate`. Budeme tedy říkat, že `HomePage` je takzvaný _rodič_ a komponenta `Candidate` je její dítě.
+Z kódu můžeme vyčíst, že komponenta `HomePage` používá komponentu `Candidate`. Budeme tedy říkat, že `HomePage` je _rodič_ a komponenta `Candidate` je její _dítě_.
 
-Předávání informací směrem od rodiče k dítěti je z našich tří situací nejjednodušší a už jsme ji dokonce mnohokrát viděli. Tato komunikace totiž probíhá předáváním hodnot skrze _props_.
+Předávání informací směrem od rodiče k dítěti je z našich tří situací nejjednodušší a už jsme je dokonce mnohokrát viděli. Tato komunikace totiž probíhá předáváním hodnot skrze _props_.
 
 V našem příkladu s volbami vidíme, že komponenta `HomePage` předává pomocí _props_ data komponentám `Candidate`. Tuto situaci můžeme znázornit následujícím diagramem.