DU-6.md

Úkol 6

Vytvořte aplikaci, která bude simulovat nějaký malý e-shop. E-shop bude mít dvě stránky, na jedné bude seznam produktů a na druhé detail jednoho produktu. Na stránce s produkty bude možné vybrat jeden produkt a přejít na jeho detail.

Toto cvičení je zadáno schválně vágněji a obecněji než jsme zvyklí, abyste měli příležitost se sami zamyslet nad strukturou aplikace.

1. Rozmyslete si, jaké produkty váš e-shop bude nabízet.
2. Založte lokální API server. Vytvořte v něm jednu kolekci dat s vašimi produkty. Sami si rozmyslete, jaké vlastnosti budou produkty mít. Nebojte se do dat vložit např. odkazy na obrázek produktu, který můžete sehnat někde na internetu. Server rozeběhněte pomocí npx apidroid a ověřte, že se vám data zobrazují v prohlížeči.
3. Založte si novou Vite/JSX aplikaci. Na úvodní stránce vytvořte hlavní komponentu HomePage, která bude zobrazovat seznam produktů. Vytvořte komponentu Product, která bude zobrazovat jeden produkt. Zapojte komponentu do stránky.
4. Každý produkt nechť zobrazuje tlačítko, které vás přesune na stránku detail.html. Stránce předejte search parametr s id produktu.
5. Vytvořte stránku detail.html s vlastním JavaScriptem detail.jsx. Vytvořte hlavní komponentu ProductPage, která zatím bude zobrazovat například pouze nadpis Detail produktu. Zapojte komponentu do stránky.
6. Na začátku souboru načtěte data produktu z API serveru pomocí fetch. K tomu bude potřeba si přečíst id produktu ze search parametru. Výsledek uložte do proměnné product.
7. V komponentě ProductPage zobrazte detail produktu podle dat ze serveru.
8. Aplikaci lehce nastylujte, aby vypadala jako e-shop.
9. Vyzkoušejte, že vaše aplikace funguje.