At lære en ny teknologi som React kan være forvirrende uden praktisk erfaring. Som udvikler er opbygning af projekter i den virkelige verden en af ​​de mest effektive måder at forstå koncepter og funktioner på.

Følg processen med at oprette en simpel huskeliste med React, og øg din forståelse af Reacts grundlæggende principper.

Forudsætninger for at oprette en opgaveliste

Før du begynder dette projekt, er der flere krav. Du skal have en grundlæggende forståelse af følgende, HTML, CSS, JavaScript, ES6, og Reager. Du skal have Node.js og npm, JavaScript-pakkemanageren. Du har også brug for en kodeeditor, som Visual Studio Code.

Her er den CSS, som dette projekt vil bruge:

/* styles.css */
.App {
skrifttype-familie: sans serif;
Skærm: bøje;
retfærdiggøre-indhold: centrum;
align-elementer: centrum;
højde: 100vh;
}
.At gøre {
baggrundsfarve: hvede;
tekstjustering: centrum;
bredde: 50%;
polstring: 20px;
kasse-skygge: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margen: auto;
}





instagram viewer

ul {
liste-stil-type: ingen;
polstring: 10px;
margen: 0;
}
knap {
bredde: 70px;
højde: 35px;
baggrundsfarve: sandbrun;
grænse: ingen;
skriftstørrelse: 15px;
skrifttype-vægt: 800;
grænse-radius: 4px;
kasse-skygge: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.input {
grænse: ingen;
bredde: 340px;
højde: 35px;
grænse-radius: 9px;
tekstjustering: centrum;
kasse-skygge: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Top {
Skærm: bøje;
retfærdiggøre-indhold: centrum;
hul: 12px;
}
li {
Skærm: bøje;
retfærdiggøre-indhold: plads-jævnt;
align-elementer: centrum;
polstring: 10px;
}
li:Før {
indhold: "*";
margin-højre: 5px;
}

1. Opsæt projektmiljø

Denne fase inkluderer alle de kommandoer og filer, der er nødvendige for at opsætte projektet. For at begynde skal du oprette et nyt React-projekt. Åbn en terminal og kør denne kommando:

npx create-react-app todo-liste

Dette tager et par minutter at installere alle de nødvendige filer og pakker også. Det opretter en ny React-applikation med navnet todo-list. Når du ser noget som dette, er du på rette vej:

Naviger til biblioteket for dit nyoprettede projekt ved hjælp af denne kommando:

cd todo-liste

Kør dit projekt lokalt med denne kommando:

npm start

Og se derefter projektet i din browser på http://localhost: 3000/.

I src-mappen i dit projekt er der et par filer, som du ikke har brug for. Slet disse filer: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Sørg for at kigge efter importudsagn i de tilgængelige filer, og fjern eventuelle referencer til de slettede filer.

2. Opret en TodoList-komponent

Dette er den komponent, vi implementerer alle de nødvendige koder til opgavelisten. Opret en fil med navnet "TodoList.js" i din src-mappe. For at teste, at alt fungerer, som det skal, skal du tilføje følgende kode:

importere Reagere fra'reagere';
konst TodoList = () => {
Vend tilbage (



Hej verden </h2>
 </div>
 );
};
eksportStandard TodoList; 

Åbn din App.js-fil, importer TodoList-komponenten, og gengiv den inde i App-komponenten. Det kommer til at se sådan ud:

importere Reagere fra'reagere';
importere'./styles.css'
importere TodoList fra'./TodoList';
konst App = () => {
Vend tilbage (




 </div>
 );
};
eksportStandard App;

Gå til din lokale browser, der har localhost: 3000 kørende, og tjek for at se "Hello World" dristigt skrevet. Alt godt? Til næste trin.

3. Håndter input og inputændring

Dette trin giver dig mulighed for at udløse en hændelse, når du skriver en opgave i inputfeltet. Importer useState-krogen fra din React-pakke. useState er en React-hook, der lader dig administrere tilstanden effektivt.

importere Reager, { useState } fra'reagere';

Brug useState-krogen til at oprette en tilstandsvariabel ved navn "inputTask" med en startværdi af en tom streng. Tildel desuden "setInputTask"-funktionen for at opdatere værdien af ​​"inputTask" baseret på brugerinput.

konst [inputTask, setInputTask] = useState("");

Opret en funktion kaldet "handleInputChange", der tager en hændelsesparameter ind. Det bør opdatere inputTask-tilstanden ved hjælp af setInputTask-funktionen. Få adgang til værdien af ​​begivenhedens mål med event.target.value. Dette vil køre, når værdien af ​​inputfeltet ændres.

konst handleInputChange = (begivenhed) => {
 setInputTask (event.target.value);
}; 

Returner et par JSX-elementer. Den første er overskriften, der lyder "My Todo-List", du kan vælge hvilken som helst overskrift, du kan lide. Inkluder et par attributter til dine inputelementer. type=“tekst”: Dette angiver din inputtype som tekst, værdi={inputTask}: Dette binder værdien af ​​inputfeltet til inputTask-tilstandsvariablen, hvilket sikrer, at den afspejler den aktuelle værdi.onChange={handleInputChange}: Dette kalder handleInputChange-funktionen, når værdien af ​​inputfeltet ændres, og opdaterer inputTask-tilstanden.

"At gøre">
Min opgaveliste</h1>
"Top">
"input" type="tekst" værdi={inputTask}
 onChange={handleInputChange} pladsholder="Indtast en opgave" />

Gå videre, opret en knap, der tilføjer den indtastede opgave til listen.

"btn">TILFØJ</button>
 </div>
</div>

På dette stadium er det sådan, dit browseroutput vil se ud.

4. Tilføj funktionalitet til "ADD"-knappen

Brug useState hook for at oprette en tilstandsvariabel ved navn 'liste' med en startværdi af et tomt array. Variablen 'setList' gemmer rækken af ​​opgaver baseret på brugerinput.

konst [liste, sætListe] = brugState([]);

Opret en funktion handleAddTodo, der kører, når brugeren klikker på knappen "ADD" for at tilføje en ny opgave. Det tager todo-parameteren, som repræsenterer den nye opgave, som brugeren har indtastet. Opret derefter et objekt newTask med et unikt id genereret ved hjælp af Math.random(), og todo-egenskaben, der indeholder inputteksten.

Gå videre, opdater listetilstanden ved at bruge spread-operatoren […liste] til at oprette en ny matrix med de eksisterende opgaver på listen. Tilføj den nye opgave til slutningen af ​​arrayet. Dette sikrer, at vi ikke muterer det oprindelige tilstandsarray. Til sidst skal du nulstille inputTask-tilstanden til en tom streng, og rydde inputfeltet, når brugeren klikker på knappen.

konst handleAddTodo = (at gøre) => {
konst nyopgave = {
 id: Matematik.tilfældig(),
 todo: todo
 };
 setList([...liste, nyOpgave]);
 setInputTask('');
}; 

Inkluder påKlik attribut til knapelementet med teksten "ADD". Når der klikkes, udløser den handleAddTodo funktion, som tilføjer en ny opgave til listetilstanden

 handleAddTodo (inputTask)}>ADD</button> 

På dette trin vil dit browseroutput se det samme ud, men hvis du klikker på knappen "TILFØJ" efter at have indtastet en opgave, vil inputfeltet tømmes. Hvis det virker okay, så videre til næste trin.

5. Tilføj en Slet-knap

Dette er det sidste trin for at gøre det muligt for brugerne at slette deres opgave, hvis de har lavet en fejl eller har fuldført opgaven. Opret en handleDeleteTodo-funktion, der fungerer som en hændelseshandler, når brugeren klikker på knappen "Slet" for en bestemt opgave. Den tager opgavens id som en parameter.

Inde i funktionen skal du bruge filtermetoden på listearrayet til at oprette et nyt array newList, der udelukker opgaven med det matchende id. Filtermetoden itererer gennem hvert element i listearrayet og returnerer et nyt array, der kun indeholder de elementer, der opfylder den givne betingelse. I dette tilfælde skal du kontrollere, om ID'et for hver opgave er lig med det ID, der er sendt som parameter. Opdater listetilstanden ved at kalde setList (newList), som indstiller tilstanden til det nye filtrerede array, hvilket effektivt fjerner opgaven med det matchende id fra listen.

konst handleDeleteTodo = (id) => {
konst newList = liste.filter((at gøre) =>
 todo.id !== id
 );
 setList (nyList); 
};

Brug kortmetoden til at iterere over hvert element i listearrayet og returnere et nyt array. Opret derefter en

Få adgang til todo-egenskaben for hvert todo-objekt. til sidst skal du oprette en knap, der, når der klikkes på den, udløser handleDeleteTodo-funktionen med id'et for den tilsvarende opgave som parameter, hvilket giver os mulighed for at slette opgaven fra listen.

<ul>
{ liste.kort((at gøre) => (
<liklassenavn="opgave"nøgle={todo.id}>
 {todo.todo}
<knappåKlik={() => handleDeleteTodo (todo.id)}>Sletknap>
li>
))}
ul>

Sådan skal din endelige kode se ud:

importere Reager, { useState } fra'reagere';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [liste, setList] = useState([]);
konst handleAddTodo = () => {
konst nyopgave = {
 id: Matematik.tilfældig(),
 opgave: inputTask
 };
 sætliste([...liste, ny opgave]);
 setInputTask('');
 };
konst handleDeleteTodo = (id) => {
konst newList = liste.filter((at gøre) => todo.id !== id);
 setList (nyList);
 };
konst handleInputChange = (begivenhed) => {
setInputTask(begivenhed.mål.værdi);
 };
Vend tilbage (
<divklassenavn="At gøre">

Mit til-GørListe

<divklassenavn="Top">
<inputklassenavn="input"type="tekst"værdi={inputTask}
 onChange={handleInputChange} pladsholder="Indtast en opgave" />
<knapklassenavn="btn"påKlik={handleAddTodo}>TILFØJEknap>
div>
<ul>
 { liste.kort((at gøre) => (
<liklassenavn="opgave"nøgle={todo.id}>
 {todo.todo}
<knappåKlik={() => handleDeleteTodo (todo.id)}>
Slet
knap>
li>
 ))}
ul>
div>
 );
};
eksportStandard TodoList; 

Sådan bliver dit endelige output, med både tilføjelses- og sletknapperne, der fungerer som forventet.

Tillykke, du har oprettet en opgaveliste, der tilføjer og sletter opgaver. Du kan gå længere ved at tilføje styling og flere funktioner.

Brug Real World Projects til at lære React

Øvelse kan være en effektiv måde at lære på. Det giver dig mulighed for at anvende React-koncepter og bedste praksis på en praktisk måde, hvilket styrker din forståelse af rammerne. Der er tonsvis af projekter derude, du burde være nødt til at finde de rigtige.