Dnes urobíš prvý krok pri tvorbe svojej vlastnej To-do aplikácie s React-om. Po doterajších cvičeniach je teraz čas uplatniť nadobudnuté znalosti a vytvoriť praktický projekt. V tomto návode sa naučíš nielen štruktúru aplikácie To-do, ale aj, aké komponenty sú potrebné na realizáciu funkcionality. Poďme sa teda hneď pustiť do vecí!
Najdôležitejšie poznatky
- Naučíš sa, ako vytvoriť základnú štruktúru aplikácie To-do.
- Aplikácia sa skladá z dvoch hlavných komponentov: ToDoInput na vstup nových To-dos a ToDoList na zobrazenie To-dos.
- React stavy sú využité na správu zoznamu To-dos.
Krok za krokom sprievodca
Krok 1: Nastavenie projektu
Pre začatie vytvoríš nové pole komponentov a odstrániš všetky nepotrebné časti z app.jsx. Odstráň preto všetky predchádzajúce implementácie v týchto súboroch.
Krok 2: Plánovanie komponentov
Načrtni štruktúru aplikácie To-do. Identifikuj dva hlavné komponenty: ToDoInput, kde sa zadávajú nové To-dos, a ToDoList, kde sa To-dos zobrazujú.
Krok 3: Vytváranie komponentov
Vytvor komponentu ToDoInput. Môžeš začať budovaním základnej šablóny vstupnej komponenty. Tá by mala obsahovať pole na text To-do a tlačidlo pre pridanie.
Krok 4: Pridanie komponenty ToDoList
Teraz je čas na vytvorenie druhej komponenty: ToDoList. Tieto komponenty musia byť zobrazené, ale ešte nechajme prázdne, keďže ich budeme neskôr vyplňovať obsahom.
Krok 5: Importovanie komponentov do app.jsx
V app.jsx importuj obe nové komponenty. Dávaj pozor na správne použitie ich názvov. Potom pridaj obe komponenty do metódy na vykreslenie.
Krok 6: Nakonfigurovanie prvkov v ToDoInput
Nakonfiguruj ToDoInput tým, že pridáš pre nadpis „Nové To Do:“ a pole na vstup. Nastav typ poľa na text, aby používatelia mohli zadať text.
Krok 7: Správa stavov
Vytvor stav pre text To-do. Použi useState na správu vstupnej hodnoty a nastav počiatočnú hodnotu na prázdny reťazec. Pridaj tiež onChange udalosť na aktualizovanie stavu pri každom zadaní.
Krok 8: Príprava App komponentu pre zoznam To-dos
Premýšľaj o tom, ako app.jsx môže ukladať zoznam To-dos. Budete musieť vytvoriť stav pre položky To-do, aby sa s nimi neskôr dalo manipulovať.
Krok 9: Inicializácia To-dos
Inicializuj pole To-do v komponente App s aspoň jedným objektom To-do, ktorý obsahuje text a stav (napr. false pre nekompletné).
Krok 10: Naplnenie ToDoList Props
Prepožičaj To-do pole ako Props komponente ToDoList. Daj pozor, aby si správne definoval štruktúru Props, aby bola možná správny prístup k poľu ToDoList.
Krok 11: Zobrazenie To-dos
Použi map funkciu na zobrazenie To-dos v ToDoList. Pre každý To-do element vytvor div element, ktorý zobrazuje text To-do.
Krok 12: Dokončenie a testovanie
Spusti svoju aplikáciu, aby si sa uistil, že základná štruktúra funguje správne. Skontroluj, či sú zobrazené vstupné polia a zoznam, a či prenos dát medzi komponentami funguje.
Zhrnutie
V tomto návode si vytvoril základnú štruktúru aplikácie To-do v Reacte. Naučil si sa, aké dôležité je plánovať komponenty a využívať stav na správu To-dos. Tvoja aplikácia teraz má schopnosť zaznamenávať a zobrazovať To-dos!
Často kladené otázky
Ako vytvorím nové úlohy v aplikácii?Musíš ešte implementovať funkciu pre pridávanie úloh. Na ukladanie úloh použi stav (State).
Čo mám robiť, ak sa zoznam úloh nezobrazuje?Skontroluj, či si správne importoval ToDoList do app.jsx a že si ho naplnil príslušnými Props.
Môžem zmeniť dizajn aplikácie To-do?Áno, môžeš použiť CSS na zmenu dizajnu aplikácie podľa svojich želaní.
