Šiandien žengsite pirmąjį žingsnį kurdami savo " React" užduočių programėlę. Po ankstesnių pratybų atėjo laikas pritaikyti įgytas žinias ir sukurti praktinį projektą. Šioje pamokoje susipažinsite ne tik su to-do programėlės struktūra, bet ir su tuo, kokių komponentų reikia funkcionalumui realizuoti. Taigi pasinerkime tiesiai į reikalą!
Svarbiausios įžvalgos
- Sužinosite, kaip sukurti pagrindinę to-do programėlės struktūrą.
- Programėlę sudaro du pagrindiniai komponentai: ToDoInput, skirtas naujoms užduotims įvesti, ir ToDoList, skirtas užduotims rodyti.
- Sąrašui valdyti naudojamos "React" būsenos.
Žingsnis po žingsnio instrukcijos
1 žingsnis: nustatykite projektą
Norėdami pradėti, sukurkite naują komponentų masyvą ir pašalinkite visas nereikalingas dalis iš app.jsx. Ištrinkite visas ankstesnes šių failų realizacijas.
2 žingsnis: suplanuokite komponentus
Suplanuokite to-do programėlės struktūrą. Nustatykite du pagrindinius komponentus: ToDoInput, kuriame įvedamos naujos užduotys, ir ToDoList, kuriame rodomos užduotys.
3 žingsnis: sukurkite komponentus
Sukurkite komponentą ToDoInput. Galite pradėti kurti pagrindinę įvesties komponento struktūrą. Jame turėtų būti įvesties laukas, skirtas to-do tekstui įrašyti, ir mygtukas jam pridėti.
4 žingsnis: pridėkite komponentą ToDoList
Dabar metas sukurti antrąjį komponentą: ToDoList. Šie komponentai vis dar turi likti tušti, nes vėliau juos užpildysime turiniu.
5 žingsnis: Importuokite komponentus į app.jsx
Importuokite du naujus komponentus į app.jsx. Įsitikinkite, kad naudojate teisingus pavadinimus. Tada pridėkite šiuos du komponentus prie atvaizdavimo metodo.
6 veiksmas: suprojektuokite ToDoInput elementus
Suprojektuokite ToDoInput, pridėdami pavadinimą "New To Do:" ir įvesties lauką. Nustatykite įvesties lauko tipą į tekstinį, kad naudotojai galėtų įvesti tekstą.
7 veiksmas: įvertinkite būsenos valdymą
Sukurkite būseną, skirtą to-do tekstui. Įvesties vertei valdyti naudokite funkciją useState ir nustatykite pradinę reikšmę - tuščią eilutę. Taip pat pridėkite įvykį onChange, kad atnaujintumėte būseną kiekvienoje įvestyje.
8 veiksmas: paruoškite programos komponentą, skirtą darbų sąrašui
Pagalvokite, kaip app.jsx taip pat gali saugoti užduočių sąrašą. Jums reikės sukurti to-do elementų būseną, kad vėliau galėtumėte juos valdyti.
9 žingsnis: Inicializuokite to-dos
Inicializuokite savo to-do masyvą programos komponente su bent vienu to-do objektu, kuriame yra tekstas ir būsena (pvz., false - nebaigtas).
10 veiksmas: užpildykite ToDoList rekvizitais
Perkelkite to-do masyvą kaip rekvizitus į komponentą ToDoList. Įsitikinkite, kad teisingai apibrėžėte rekvizitų struktūrą, kad "ToDoList" galėtų pasiekti masyvą.
11 veiksmas: rodykite "To-do
Naudokite žemėlapio funkciją, kad rodytumėte "ToDoList" užduočių sąrašą. Kiekvienam to-do elementui sukurkite
12 žingsnis: užbaigimas ir testavimas
Paleiskite savo programą, kad įsitikintumėte, jog pagrindinė struktūra veikia teisingai. Patikrinkite, ar teisingai rodomi įvesties laukai ir sąrašas ir ar veikia duomenų perdavimas tarp komponentų.
Apibendrinimas
Šiame vadove sukūrėte pagrindinę to-do programėlės struktūrą "React" programoje. Sužinojote, kaip svarbu suplanuoti komponentus ir naudoti būseną, kad galėtumėte valdyti "to-do". Dabar jūsų programėlė turi galimybę fiksuoti ir rodyti to-dos!
Dažniausiai užduodami klausimai
Kaip programėlėje sukurti naujus to-dos? Jums dar reikia įgyvendinti to-dos pridėjimo funkciją. Norėdami tai padaryti, naudokite būseną to-dos išsaugoti.
Ką daryti, jei darbų sąrašas nerodomas? Patikrinkite, ar teisingai importavote darbų sąrašą į app.jsx ir užpildėte jį atitinkamais rekvizitais.
Ar galiu pakeisti to-do programėlės dizainą? Taip, galite naudoti CSS, kad pakeistumėte programėlės dizainą pagal savo pageidavimus.
