Å lære en ny teknologi som React kan være forvirrende uten praktisk erfaring. Som utvikler er det å bygge virkelige prosjekter en av de mest effektive måtene å forstå konsepter og funksjoner på.

Følg prosessen med å lage en enkel gjøremålsliste med React, og forbedre forståelsen av Reacts grunnleggende.

Forutsetninger for å lage en gjøremålsliste

Før du starter dette prosjektet er det flere krav. Du må ha en grunnleggende forståelse av følgende, HTML, CSS, JavaScript, ES6, og Reager. Du må ha Node.js og npm, JavaScript-pakkebehandleren. Du trenger også en koderedigerer, som Visual Studio Code.

Her er CSS-en som dette prosjektet vil bruke:

/* styles.css */
.App {
font-familie: sans serif;
vise: bøye seg;
rettferdiggjøre-innhold: senter;
align-elementer: senter;
høyde: 100vh;
}
.Å gjøre {
bakgrunnsfarge: hvete;
tekstjustering: senter;
bredde: 50%;
polstring: 20px;
boks-skygge: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin: auto;
}
ul {
liste-stil-type: ingen;
polstring: 10px;
margin: 0;
}





instagram viewer

knapp {
bredde: 70px;
høyde: 35px;
bakgrunnsfarge: sandbrun;
grense: ingen;
skriftstørrelse: 15px;
font-vekt: 800;
grense-radius: 4px;
boks-skygge: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.inngang {
grense: ingen;
bredde: 340px;
høyde: 35px;
grense-radius: 9px;
tekstjustering: senter;
boks-skygge: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Topp {
vise: bøye seg;
rettferdiggjøre-innhold: senter;
mellomrom: 12px;
}
li {
vise: bøye seg;
rettferdiggjøre-innhold: plass-jevnt;
align-elementer: senter;
polstring: 10px;
}
li:før {
innhold: "*";
marg-høyre: 5px;
}

1. Sett opp prosjektmiljø

Dette stadiet inkluderer alle kommandoene og filene som trengs for å sette opp prosjektet. For å begynne, lag et nytt React-prosjekt. Åpne en terminal og kjør denne kommandoen:

npx create-react-app todo-list

Dette tar noen minutter å installere alle nødvendige filer og pakker også. Den oppretter en ny React-applikasjon kalt todo-list. Når du ser noe slikt, er du på rett vei:

Naviger til katalogen til det nyopprettede prosjektet ved å bruke denne kommandoen:

cd gjøremålsliste

Kjør prosjektet ditt lokalt med denne kommandoen:

npm start

Og se deretter prosjektet i nettleseren din på http://localhost: 3000/.

I src-mappen til prosjektet ditt er det et par filer du ikke trenger. Slett disse filene: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Pass på at du ser etter importsetninger i filene som er tilgjengelige, og fjern eventuelle referanser til de slettede filene.

2. Lag en TodoList-komponent

Dette er komponenten vi skal implementere alle kodene som trengs for gjøremålslisten. Lag en fil med navnet "TodoList.js" i src-mappen. For å teste at alt fungerer som det skal, legg til følgende kode:

import Reagere fra'reagere';
konst TodoList = () => {
komme tilbake (



Hei verden </h2>
 </div>
 );
};
eksportmisligholde Gjøremålsliste; 

Åpne App.js-filen, importer TodoList-komponenten og gjengi den inne i App-komponenten. Det vil se omtrent slik ut:

import Reagere fra'reagere';
import'./styles.css'
import Gjøremålsliste fra'./Gjøremålsliste';
konst App = () => {
komme tilbake (




 </div>
 );
};
eksportmisligholde App;

Gå til din lokale nettleser som har localhost: 3000 kjørende og sjekk for å se "Hello World" dristig skrevet. Helt fint? Til neste trinn.

3. Håndtere input og input change

Dette trinnet lar deg utløse en hendelse når du skriver inn en oppgave i inndataboksen. Importer useState-kroken fra React-pakken din. useState er en React-hook som lar deg administrere tilstanden effektivt.

import Reager, { useState } fra'reagere';

Bruk useState-kroken til å lage en tilstandsvariabel kalt "inputTask" med en startverdi av en tom streng. I tillegg, tilordne "setInputTask"-funksjonen for å oppdatere verdien av "inputTask" basert på brukerinndata.

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

Opprett en funksjon kalt "handleInputChange", som tar inn en hendelsesparameter. Den bør oppdatere inputTask-tilstanden ved hjelp av setInputTask-funksjonen. Få tilgang til verdien av hendelsens mål med event.target.value. Dette vil kjøre når verdien til inndatafeltet endres.

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

Returner et par JSX-elementer. Den første er overskriften som lyder "Min gjøremålsliste", du kan bestemme hvilken overskrift du vil. Inkluder et par attributter til inndataelementene dine. type=“tekst”: Dette spesifiserer inndatatypen din som tekst, verdi={inputTask}: Dette binder verdien av inndatafeltet til inputTask-tilstandsvariabelen, og sikrer at den gjenspeiler gjeldende verdi.onChange={handleInputChange}: Dette kaller handleInputChange-funksjonen når verdien til inndatafeltet endres, og oppdaterer inputTask-tilstanden.

"Å gjøre">
Min oppgaveliste</h1>
"Topp">
"inngang" type="tekst" verdi={inputTask}
 onChange={handleInputChange} plassholder="Skriv inn en oppgave" />

Gå videre, lag en knapp som vil legge den innlagte oppgaven til listen.

"btn">LEGG TIL</button>
 </div>
</div>

På dette stadiet er det slik nettleserutgangen din vil se ut.

4. Legg til funksjonalitet til "ADD"-knappen

Bruke useState krok for å lage en tilstandsvariabel kalt 'liste' med en startverdi av en tom matrise. "SetList"-variabelen lagrer utvalget av oppgaver basert på brukerinndata.

konst [liste, setList] = brukState([]);

Lag en funksjon handleAddTodo som vil kjøre når brukeren klikker på "LEGG TIL"-knappen for å legge til en ny oppgave. Den tar todo-parameteren, som representerer den nye oppgaven som er lagt inn av brukeren. Deretter oppretter du et objekt newTask med en unik id generert ved hjelp av Math.random(), og todo-egenskapen som inneholder inndatateksten.

Gå videre, oppdater listetilstanden ved å bruke spredningsoperatoren [...liste] for å lage en ny matrise med de eksisterende oppgavene i listen. Legg til den nye oppgaven på slutten av matrisen. Dette sikrer at vi ikke muterer den opprinnelige tilstandsmatrisen. Til slutt tilbakestiller du inputTask-tilstanden til en tom streng, og sletter inndatafeltet når brukeren klikker på knappen.

konst handleAddTodo = (å gjøre) => {
konst newTask = {
 id: Matte.tilfeldig(),
 gjøre: gjøre
 };
 setList([...liste, nyTask]);
 setInputTask('');
}; 

Inkluder ved trykk attributt til knappeelementet med teksten "ADD". Når den klikkes, utløser den handleAddTodo funksjon, som legger til en ny oppgave i listetilstanden

 handleAddTodo (inputTask)}>ADD</button> 

På dette stadiet vil nettleserens utdata se det samme ut, men hvis du klikker på "LEGG TIL"-knappen etter å ha skrevet inn en oppgave, vil inndatafeltet tømmes. Hvis det fungerer greit, gå videre til neste trinn.

5. Legg til en Slett-knapp

Dette er det siste trinnet for å gjøre det mulig for brukere å slette oppgaven sin hvis de har gjort en feil eller har fullført oppgaven. Lag en handleDeleteTodo-funksjon som fungerer som en hendelsesbehandler når brukeren klikker på "Slett"-knappen for en spesifikk oppgave. Den tar oppgavens ID som en parameter.

Inne i funksjonen bruker du filtermetoden på listematrisen for å lage en ny matrise newList som ekskluderer oppgaven med matchende ID. Filtermetoden itererer gjennom hvert element i listematrisen og returnerer en ny matrise som bare inneholder elementene som tilfredsstiller den gitte betingelsen. I dette tilfellet må du sjekke om IDen til hver oppgave er lik IDen som ble sendt som parameter. Oppdater listetilstanden ved å kalle setList (newList), som setter tilstanden til den nye filtrerte matrisen, og fjerner effektivt oppgaven med den matchende ID-en fra listen.

konst handleDeleteTodo = (id) => {
konst newList = liste.filter((å gjøre) =>
 todo.id !== id
 );
 setList (nyliste); 
};

Bruk kartmetoden til å iterere over hvert element i listematrisen og returnere en ny matrise. Deretter oppretter du en

Få tilgang til todo-egenskapen til hvert todo-objekt. til slutt, lag en knapp som når den klikkes, utløser handleDeleteTodo-funksjonen med ID-en til den tilsvarende oppgaven som en parameter, slik at vi kan slette oppgaven fra listen.

<ul>
{ liste.kart((å gjøre) => (
<liklassenavn="oppgave"nøkkel={todo.id}>
 {todo.todo}
<knappved trykk={() => handleDeleteTodo (todo.id)}>Slettknapp>
li>
))}
ul>

Slik skal den endelige koden se ut:

import Reager, { useState } fra'reagere';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [liste, setList] = brukState([]);
konst handleAddTodo = () => {
konst newTask = {
 id: Matte.tilfeldig(),
 gjøremål: inputTask
 };
 setList([...liste, ny oppgave]);
 setInputTask('');
 };
konst handleDeleteTodo = (id) => {
konst newList = liste.filter((å gjøre) => todo.id !== id);
 setList (nyliste);
 };
konst handleInputChange = (begivenhet) => {
setInputTask(begivenhet.mål.verdi);
 };
komme tilbake (
<divklassenavn="Å gjøre">

Min til-GjøreListe

<divklassenavn="Topp">
<inputklassenavn="inngang"type="tekst"verdi={inputTask}
 onChange={handleInputChange} plassholder="Skriv inn en oppgave" />
<knappklassenavn="btn"ved trykk={handleAddTodo}>LEGG TILknapp>
div>
<ul>
 { liste.kart((å gjøre) => (
<liklassenavn="oppgave"nøkkel={todo.id}>
 {todo.todo}
<knappved trykk={() => handleDeleteTodo (todo.id)}>
Slett
knapp>
li>
 ))}
ul>
div>
 );
};
eksportmisligholde Gjøremålsliste; 

Slik blir det endelige resultatet, med både legg til og slett-knappene som fungerer som forventet.

Gratulerer, du har laget en gjøremålsliste som legger til og sletter oppgaver. Du kan gå lenger ved å legge til styling og flere funksjoner.

Bruk Real World Projects for å lære React

Øvelse kan være en effektiv måte å lære på. Den lar deg bruke React-konsepter og beste praksis på en praktisk måte, og forsterker forståelsen av rammeverket. Det er tonnevis av prosjekter der ute, du bør måtte finne de riktige.