Uvod v strukturo React To-do-App-a

Danes naredi prvi korak pri ustvarjanju lastne aplikacije za opravila z uporabo Reacta. Po dosedanjih vajah je čas, da pridobljeno znanje uporabiš in ustvariš praktičen projekt. V tem vadnici boš spoznal/a ne le strukturo aplikacije za opravila, ampak tudi katere komponente so potrebne za izvedbo funkcionalnosti. Zato se takoj lotimo dela!

KLjučne ugotovitve

• Naučil/a se boš, kako ustvariti osnovno strukturo aplikacije za opravila.
• Aplikacija sestoji iz dveh ključnih komponent: ToDoInput za vnašanje novih opravil in ToDoList za prikazovanje opravil.
• Uporabljajo se React States za upravljanje seznama opravil.

Korak za korakom navodila

Korak 1: Namestitev projekta

Začni s tem, da ustvariš novo polje komponent in odstraniš vse nepotrebne dele iz app.jsx. Zato izbriši vse prejšnje implementacije v teh datotekah.

Korak 2: Načrtovanje komponent

Načrtuj strukturo aplikacije za opravila. Identificiraj dve glavni komponenti: ToDoInput, kamor se vnesejo nova opravila, in ToDoList, kjer se prikažejo opravila.

Korak 3: Ustvarjanje komponent

Ustvari komponento ToDoInput. Začni s postavitvijo osnovnega ogrodja za vnosno komponento. Ta naj vsebuje polje za besedilo opravila in gumb za dodajanje.

Korak 4: Dodajanje komponente ToDoList

Sedaj je čas za ustvarjanje druge komponente: ToDoList. Te komponente bomo morali še pustiti prazne, saj jih bomo pozneje napolnili z vsebino.

Korak 5: Uvoz komponent v app.jsx

V datoteko app.jsx uvozi obe novi komponenti. Pazljivo uporabi pravilna imena. Nato dodaj obe komponenti v metodo Render.

Korak 6: Oblikovanje elementov v ToDoInput

Oblikuj ToDoInput, tako da dodaš za naslov "New To Do:" in polje za vnos. Tip polja za vnos nastavi na besedilo, da bodo uporabniki lahko vnesli besedilo.

Korak 7: Upravljanje stanja

Ustvari stanje za besedilo opravila. Uporabi useState za upravljanje vnosa in nastavi začetno vrednost na prazen niz. Dodaj dogodek onChange, da se stanje posodobi ob vsakem vnosu.

Korak 8: Priprava komponente App za seznam opravil

Razmisli, kako lahko datoteka app.jsx shranjuje seznam opravil. Ustvariti bo treba stanje za elemente opravil, da jih bo mogoče kasneje upravljati.

Korak 9: Poženi seznam opravil

Inicializiraj svoj seznam opravil v komponenti App z vsaj enobjektnim opravilom, ki vsebuje besedilo in status (npr. false za nepopolno).

Korak 10: Napolni ToDoList z props

Prenesi seznam opravil kot props v komponento ToDoList. Pazljivo definiraj strukturo props, da se zagotovi, da bo ToDoList dostopal do seznama.

Korak 11: Prikaz opravil

Uporabi funkcijo map za prikaz opravil v ToDoList. Za vsak element opravila ustvari element