diff --git a/daweb/js2/posilani-dat/cvlekce/obnova-seznamu.md b/daweb/js2/posilani-dat/cvlekce/obnova-seznamu.md index d1fb0de3..32b16e42 100644 --- a/daweb/js2/posilani-dat/cvlekce/obnova-seznamu.md +++ b/daweb/js2/posilani-dat/cvlekce/obnova-seznamu.md @@ -8,7 +8,7 @@ solutionAccess: protected Naše aplikace _Nákupy_ ještě neumí mazat položky seznamu. Když nám nákupní seznam příliš naroste, zatím to vyřešíme tak, že umožníme seznam vrátit do původní podoby tak, jak vypadal při prním přihlášení. Do aplikace přidáme tlačítko, které odešle požadavek na obnovu seznamu na server pomocí POST a překreslí komponentu. -1. Vyjděte z kódu aplikace vytvořené na lekci. Použijte repozitář [ukazka-nakupy-post](https://github.com/Czechitas-podklady-WEB/ukazka-nakupy-post) jako šablonu pro vytvoření vlastního repozitáře, který si naklonujte. +1. Vyjděte z kódu aplikace vytvořené na lekci. Použijte repozitář [cviceni-nakupy-post](https://github.com/Czechitas-podklady-WEB/cviceni-nakupy-post) jako šablonu pro vytvoření vlastního repozitáře, který si naklonujte. 1. Předejte do aplikace tlačítko, které bude sloužit k obnově seznamu. Tlačítko může mít například název _Obnovit_. Vložte ho mezi formulář a seznam položek. 1. Vytořte posluchač události `handleReset` a připojte jej na tlačítko. Je to velmi podobné tomu, jak je vytvořen posluchač `handleSubmit`. Do vašeho posluchače zatím dejte například `console.log`, a vyzkoušejte, že funguje. 1. Udělejte posluchač rovnou `async`, ať jej máme připravený na volání `fetch`. diff --git a/daweb/js2/seznamy/cvdoma/podcasty.md b/daweb/js2/seznamy/cvdoma/podcasty.md index ff647006..fb085e0d 100644 --- a/daweb/js2/seznamy/cvdoma/podcasty.md +++ b/daweb/js2/seznamy/cvdoma/podcasty.md @@ -6,10 +6,10 @@ lead: Vytvořte komponentu pro zobrazení seznamu podcastových epizod. solutionAccess: protected --- -1. Nastylovanou stránku zobrazující epizody jakéhosi podcastu najdete v repozitáři [cviceni-podcasty](https://github.com/Czechitas-podklady-WEB/cviceni-podcasty). Tento repozitář **nebudeme používat jako šablonu**. Místo toho si repozitář rovnou naklonujte – příkazem `git clone https://github.com/Czechitas-podklady-WEB/cviceni-podcasty.git`. Repozitář použijeme jenom jako vzor, nebudeme v něm nic měnit. -1. Známým postupem si založte nový Vite/JSX projekt. -1. Vytvořte komponentu `Episode`, která bude zobrazovat jednu podcastovou epizodu. Její props budou `num`, `title` a `guest`. Pomocí této komponenty zobrazte stejné dvě epizody, jako vidíte na připravené stránce. Z připravené stránky vykradněte CSS styly a zařiďte, aby vaše aplikace vypadala stejně. -1. Nezapomeňte pro vaši komponentu vytvořit separátní složku s vlastním JavaScriptem a CSS styly. +1. Vytvořte si repository ze šablony [cviceni-podcasty](https://github.com/Czechitas-podklady-WEB/cviceni-podcasty) a naklonujte si repository z vašeho GitHub účtu na počítač. +1. Podívejte se na HTML/JSX kód v `src/pages/index.jsx`. Seznam epizod je v kódu napevno zadrátovaný – my z něj budeme chtít udělat slušně vychované JSX komponenty, které umí zobrazit jakýkoli seznam epizod, který dostanou na vstupu v poli. +1. Vytvořte komponentu `Episode`, která bude zobrazovat jednu podcastovou epizodu. Její props budou `num`, `title` a `guest`. Pomocí této komponenty zobrazte stejné dvě epizody, jaké byly v původním kódu napevno zadrátované. +1. Nezapomeňte pro vaši komponentu vytvořit separátní složku s vlastním JavaScriptem/JSX a CSS. 1. Místo natvrdo zadrátovaných epizod přímo v kódu použijte následujicí data a na stránce zobrazte všechny uvedené epizody. ```js @@ -25,4 +25,4 @@ solutionAccess: protected ]; ``` -1. Rozmyslete si, která vlastnost se nejlépe hodí jako klíč, a použijte ji, aby JSX přestalp v konzoli prudit, že mu chybí `key` prop. +1. Rozmyslete si, která vlastnost se nejlépe hodí jako klíč, a použijte ji, aby JSX přestal v konzoli prudit, že mu chybí `key` prop. diff --git a/daweb/js2/seznamy/cvlekce/ceska-mesta.md b/daweb/js2/seznamy/cvlekce/ceska-mesta.md index 4c784eb8..2e5b405f 100644 --- a/daweb/js2/seznamy/cvlekce/ceska-mesta.md +++ b/daweb/js2/seznamy/cvlekce/ceska-mesta.md @@ -6,7 +6,10 @@ lead: Zobrazte na stránce deset největších českých měst. solutionAccess: protected --- -1. Založte si Vite/JSX projekt podle již známého postupu. +1. Založte si Vite/JSX projekt: + ```shell + npm init kodim-app@latest cviceni-ceska-mesta jsx + ``` 1. Do souboru `index.jsx` vložte mimo komponentu pole s názvy deseti největších českých měst. ```js const cities = [ diff --git a/daweb/js2/seznamy/cvlekce/opakovani-map.md b/daweb/js2/seznamy/cvlekce/opakovani-map.md index d88188e1..21f78151 100644 --- a/daweb/js2/seznamy/cvlekce/opakovani-map.md +++ b/daweb/js2/seznamy/cvlekce/opakovani-map.md @@ -6,7 +6,12 @@ lead: Zopakujte si metodu `map` a zkracování funkcí. solutionAccess: protected --- -Založte si obyčejnou stránku s JavaScriptem, bez Vite i bez JSX. Do souboru `index.js` si zkopírujte následující pole. +Založte si obyčejnou stránku s JavaScriptem, bez Vite i bez JSX: + ```shell + npm init kodim-app@latest cviceni-opakovani-map html-css-js + ``` + +Do souboru `index.js` si zkopírujte následující pole. ```js const weekdays = [ diff --git a/daweb/js2/seznamy/cvlekce/zkracovaci-jednohubky.md b/daweb/js2/seznamy/cvlekce/zkracovaci-jednohubky.md index e4ba2744..cf5bbc98 100644 --- a/daweb/js2/seznamy/cvlekce/zkracovaci-jednohubky.md +++ b/daweb/js2/seznamy/cvlekce/zkracovaci-jednohubky.md @@ -6,7 +6,12 @@ lead: Zkracujte funkce a vysvětlete, k čemu slouží. solutionAccess: protected --- -Založte si obyčejnou stránku s JavaScriptem, bez Vite i JSX. Následující funkce přepište do zkráceného zápisu. Vlastními slovy popište, k čemu nejspíše funkce slouží. +Založte si obyčejnou stránku s JavaScriptem, bez Vite i bez JSX. Můžete použít následující kód (šablona `html-css-js` nepoužívá Vite ani JSX): + ```shell + npm init kodim-app@latest cviceni-zkracovaci-jednohubky html-css-js + ``` + +Následující funkce přepište do zkráceného zápisu. Vlastními slovy popište, k čemu nejspíše funkce slouží. 1. ```js const isEmail = (str) => {