Budeme vytvářet jednoduchou aplikaci pro evidenci úkolů. Klasický ToDo list, který musí každý programátor za život naprogramovat alespoň 137x.
Založení projektu
- Tentokrát už použijeme React, takže si opět založ zcela nový projekt pomocí
npm create vite@latest ukolniceka v následujících volbách vyberReacta potomTypeScript. - Z komponenty App odstraň výchozí ukázkový kód a nech si tam třeba jenom nadpis.
- Projekt spusť, ať víš, že všechno funguje. (Uvidíš jenom nadpis.)
- Vytvoř si složku
components, do které budeš později dávat nové komponenty.
Komponenta Item
- Vytvoř novou komponentu
Item. Soubory pojmenovávej s příponou.tsx. - Komponenta bude přijímat následující props:
title- název úkoludescription- popis úkoludone- boolean, zda je úkol splněný nebo ne
- Vytvoř interface
ItemPropsa nastav ho jako typ pro props komponenty. - Komponenta zobrazí div, ve kterém budou dva odstavce. V prvním odstavci bude tučným písmem název úkolu. Ve druhém odstavci bude popis úkolu.
- Vytvoř si v CSS soubor pro komponentu, naimportuj ho do komponenty a přidej do něj třídu
.donea nastav do ní přeškrtnuté písmotext-decoration: line-through;. - Pokud má prop
donehodnotutrue, přidej divu třídudone. - Naimportuj komponentu do hlavní App a zkus ji použít. Vyzkoušej si, že TypeScript hlásí chybu, když neuvedeš všechny potřebné props nebo do nich dáš hodnoty nevhodného typu.
- BONUS: Pokud chceš (a máš čas) můžeš v CSS nastavit pro div i nějakou výchozí třídu, která mu přidá hezký vzhled, např. rámeček, padding, apod.
Komponenta List
- Vytvoř komponentu
List, která bude zobrazovat seznam položek v úkolníčku. - Komponenta bude přijímat dvě props:
title- název seznamu (např. "Domácí práce", "Nákup" apod.)items- pole položek v seznamu, každá položka je typuItemData, který je nadefinovaný v předchozí komponentě, budeš ho odtamtud potřebovat naimportovat
- Vytvoř s těmito vlastnostmi interface
ListPropsa nastav ho jako typ pro props komponenty. - Zařid, aby se pomocí
mapv komponentě zobrazil seznam položek, tj. přemapuj poleitemsna seznam komponentItem. - Jako
keypři mapování použij vlastnosttitle. Není to ideální, ale nemáme nic lepšího 😀 - V komponentě
Appsi vytvoř stavtasks, který bude obsahovat pole úkolů v úkolníčku. Použít můžeš např. tato vzorová data:[ { title: 'Příprava prezentace', description: 'Vytvořit prezentaci pro páteční meeting s klientem.' }, { title: 'Kontrola e-mailů', description: 'Projít doručenou poštu a odpovědět na důležité zprávy.' }, { title: 'Plánování kampaně', description: 'Naplánovat marketingovou kampaň na příští měsíc.' }, { title: 'Testování aplikace', description: 'Otestovat nové funkce a nahlásit případné chyby.' } ]; - Nezapomeň stavu
tasksnastavit správný typ. Je to pole úkolů, jejichž tvar máš nadefinovaný v komponentěItem. - V komponentě
Apppoužij komponentuListpro seznam úkolů a předej do ní jako prop obsah stavutasks.