Skip to content

Commit

Permalink
Drobné zjednodušení režie kolem vytváření projektů účastnicemi.
Browse files Browse the repository at this point in the history
  • Loading branch information
FilipJirsak committed Apr 19, 2024
1 parent 5f5c1d0 commit 6a03e4f
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 9 deletions.
2 changes: 1 addition & 1 deletion daweb/js2/posilani-dat/cvlekce/obnova-seznamu.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
10 changes: 5 additions & 5 deletions daweb/js2/seznamy/cvdoma/podcasty.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
5 changes: 4 additions & 1 deletion daweb/js2/seznamy/cvlekce/ceska-mesta.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
7 changes: 6 additions & 1 deletion daweb/js2/seznamy/cvlekce/opakovani-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
7 changes: 6 additions & 1 deletion daweb/js2/seznamy/cvlekce/zkracovaci-jednohubky.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 6a03e4f

Please sign in to comment.