Merge pull request #792 from Czechitas-podklady-WEB/FJ-opravy-preklepu

Fix typos by Pavlína Krátká

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`.

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`.

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š
    <Header user="Radovan Holátko" />
    ```
 
-   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
    <Header />

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) => {

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) => {

daweb/js2/podminene-zobrazeni/predavani-hodnot.md

@@ -12,7 +12,7 @@ Někoho by mohlo lákat předat hodnotu `true` takto
 <ShopItem name="jablka" amount="1 kg" bought="true" />
 ```
 
-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
 <ShopItem name="jablka" amount={3} bought={true} />

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.
 

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,15 +10,15 @@ 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(
   'https://api.sunrise-sunset.org/json?lat=50&lng=14.5'
 );
 ```
 
-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(

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.

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
    ```

daweb/js2/server-komunikace/lokalni-api.md

@@ -1,26 +1,26 @@
 ## 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.
 
 Frontend postavený nad takovým API pak samozřejmě nepůjde zveřejnit na internetu a bude fungovat jen na našem počítači. To nám ale pro tuto chvíli bude stačit.
 
 ### 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.
 

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.

daweb/js2/server-komunikace/verejna-api.md

@@ -1,17 +1,17 @@
 ## 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,
 - stanou se placenými a my budeme muset za jejich použití platit.
 
 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.

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í:

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.?