I dag tager du det første skridt i oprettelsen af din egen opgave-app med React. Efter de tidligere øvelser er det nu tid til at anvende den erhvervede viden og oprette et praktisk projekt. I denne vejledning vil du ikke kun lære strukturen af opgave-appen at kende, men også hvilke komponenter der er nødvendige for at realisere funktionaliteten. Lad os dykke direkte ned i emnet!
Vigtigste erkendelser
- Du vil lære, hvordan man opretter den grundlæggende struktur af en opgave-app.
- Appen består af to væsentlige komponenter: ToDoInput for at indtaste nye opgaver og ToDoList for at vise opgaverne.
- React States bliver brugt til at administrere listen over opgaver.
Trin-for-trin vejledning
Trin 1: Opsætning af projektet
For at komme i gang opretter du en ny række komponenter og fjerner alle unødvendige dele fra app.jsx. Slet alle tidligere implementeringer i disse filer.
Trin 2: Planlægning af komponenterne
Planlæg strukturen for opgave-appen. Identificer de to hovedkomponenter: ToDoInput, hvor nye opgaver indtastes, og ToDoList, hvor opgaverne vises.
Trin 3: Oprettelse af komponenter
Opret komponenten ToDoInput. Du kan begynde at opbygge grundstrukturen af inputkomponenten. Denne bør indeholde en input til opgaveteksten og en knap til tilføjelse.
Trin 4: Tilføjelse af komponenten ToDoList
Nu er det tid til at oprette den anden komponent: ToDoList. Disse komponenter der skal vises skal stadig være tomme, da vi senere vil fylde dem med indhold.
Trin 5: Import af komponenter i app.jsx
I app.jsx importerer du de to nye komponenter. Sørg for at bruge de korrekte navne. Tilføj derefter de to komponenter i rendermetoden.
Trin 6: Design af elementer i ToDoInput
Design ToDoInput ved at tilføje en til titlen "Ny opgave:" og et inputfelt. Sæt typen af inputfeltet til tekst, så brugerne kan indtaste tekst.
Trin 7: Håndtering af state management
Opret en state for teksten af opgaven. Brug useState til at administrere inputværdien og sæt initialværdien til en tom streng. Tilføj også en onChange-hændelse for at opdatere tilstanden ved hver indtastning.
Trin 8: Forberedelse af app-komponent til opgaveliste
Tænk over, hvordan app.jsx også kan gemme listen over opgaver. Du bliver nødt til at oprette en state for opgaveelementer for at kunne administrere dem senere.
Trin 9: Initialisering af opgaver
Initialisér din opgave-array i app-komponenten med mindst ét opgaveobjekt, der indeholder tekst og en status (f.eks. falsk for ufuldført).
Trin 10: Fyldning af ToDoList med props
Overfør opgavearrayet som props til ToDoList-komponenten. Sørg for at definere strukturen af props korrekt for at sikre, at ToDoList kan få adgang til arrayet.
Trin 11: Visning af opgaver
Brug map-funktionen til at vise opgaverne i ToDoList. Opret et
Trin 12: Færdiggørelse og test
Kør din applikation for at sikre, at grundstrukturen fungerer korrekt. Tjek, om inputfelterne og listen vises korrekt, og om dataoverførslen mellem komponenterne fungerer.
Resume
I denne vejledning har du oprettet den grundlæggende struktur af opgave-appen i React. Du har lært, hvor vigtigt det er at planlægge komponenter og bruge state til at administrere opgaverne. Din app har nu evnen til at registrere og vise opgaver!
Ofte stillede spørgsmål
Hvordan opretter jeg nye opgaver i appen?Du skal stadig implementere funktionen til at tilføje opgaver. Brug staten til at gemme opgaverne.
Hvad gør jeg, hvis opgavelisten ikke vises?Tjek, om du har importeret ToDoList korrekt i app.jsx og udfyldt den med de relevante props.
Kan jeg ændre designet af opgaveappen?Ja, du kan bruge CSS til at ændre appens design efter dine ønsker.
