diff --git a/daweb/react/stribrava-1/mentor.md b/daweb/react/stribrava-1/mentor.md index d9130dc3..2c8d5c86 100644 --- a/daweb/react/stribrava-1/mentor.md +++ b/daweb/react/stribrava-1/mentor.md @@ -16,7 +16,8 @@ Projekt si rozdělíme do několika částí: ## Hlavní stránka 1. Pomocí `apidroid` si vytvořte API s kolekcí pro jednotlivé pokoje. Naplňte tuto kolekci daty a v prohlížeči si ověřte, že API endpoint funguje. Později budeme ještě potřebovat kolekci pro jednotlivé poptávky. Tu si nechte až na později. -1. Pomocí diagramu komponent si rozvhněte, jaké komponenty budete potřebovat pro hlavní stránku, jaké tyto komponenty budou mít stavy, props a datové toky. V diagramu běžte do takových detailů, jak je vám samotným pohodlené. +1. `apidroid` umí poskytovat i soubory (např. obrázky). To se bude hodit pro fotky pokojů – abyste je mohli mít hned u API a ne ve vaší frontendové aplikaci. Přidání nového pokoje pak bude znamenat jen úpravu na straně API, v reactové aplikace nebude potřeba nic měnit. Vytvořte si v kořenové složce projektu (na stejné úrovni, kde je složka `api`) složku pojmenovanou `assets`. Do ní můžete nahrávat soubory (např. obrázky). Pokud tam nahrajete třeba soubor pojmenovaný `pokoj01.jpg`, bude pak dostupný na stejné adrese jako API na cestě `http://localhost:4000/assets/pokoj01.jpg` (tj. v adrese je `assets` místo `api`). +1. Pomocí diagramu komponent si rozvhrněte, jaké komponenty budete potřebovat pro hlavní stránku, jaké tyto komponenty budou mít stavy, props a datové toky. V diagramu běžte do takových detailů, jak je vám samotným pohodlené. 1. Než se pustíte do vlastního programování, zkonzultujte váš návrh komponent s některým z koučů. Pokuste se mu/jí co nejsrozumitelněji vysvětlit, jak bude vaše stránka fungovat, jak budou komponenty mezi sebou komunikovat. Nechte si poradit, co by se na vašem návrhu dalo zlepšit. 1. Naprogramoujte hlavní stránku tak, aby uživatel viděl seznam pokojů, mohl si rozkliknout detail pokoje vyplnit formulář s poptávkou. Formulář zatím nebude odosílat žádná data, pouze se po stisknutí tlačítka zobrazí potvrzení o úspěšném odeslání. Počítání celkové ceny poptávky vyřešíme v dalším kroku. 1. Dokončete celou hlavní stránku. Až na odesílání formuláře by měla být hotová.