Učenje nove tehnologije kao što je React može biti zbunjujuće bez praktičnog iskustva. Kao programeru, izgradnja projekata iz stvarnog svijeta jedan je od najučinkovitijih načina za razumijevanje koncepata i značajki.

Slijedite postupak stvaranja jednostavnog popisa obaveza s Reactom i poboljšajte svoje razumijevanje osnova Reacta.

Preduvjeti za izradu popisa obaveza

Prije nego započnete ovaj projekt, postoji nekoliko zahtjeva. Morate imati osnovno razumijevanje sljedećeg, HTML, CSS, JavaScript, ES6, i Reagiraj. Morate imati Node.js i npm, JavaScript upravitelj paketa. Također vam je potreban uređivač koda, poput Visual Studio Code.

Evo CSS-a koji će ovaj projekt koristiti:

/* styles.css */
.App {
obitelj-fontova: sans-serif;
prikaz: savijati;
opravdati-sadržaj: centar;
align-items: centar;
visina: 100vh;
}
.Napraviti {
boja pozadine: pšenica;
poravnanje teksta: centar;
širina: 50%;
podstava: 20px;
kutija-sjena: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margina: auto;
}





instagram viewer

ul {
lista-stil-tip: nikakav;
podstava: 10px;
margina: 0;
}
dugme {
širina: 70px;
visina: 35px;
boja pozadine: pješčanosmeđa;
granica: nikakav;
veličina fonta: 15px;
težina fonta: 800;
granični radijus: 4px;
kutija-sjena: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.ulazni {
granica: nikakav;
širina: 340px;
visina: 35px;
granični radijus: 9px;
poravnanje teksta: centar;
kutija-sjena: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Vrh {
prikaz: savijati;
opravdati-sadržaj: centar;
praznina: 12px;
}
li {
prikaz: savijati;
opravdati-sadržaj: prostorno ravnomjerno;
align-items: centar;
podstava: 10px;
}
li:prije {
sadržaj: "*";
margin-desno: 5px;
}

1. Postavite projektno okruženje

Ova faza uključuje sve naredbe i datoteke potrebne za postavljanje projekta. Za početak izradite novi React projekt. Otvorite terminal i pokrenite ovu naredbu:

npx create-react-app popis zadataka

Potrebno je nekoliko minuta da se instaliraju sve potrebne datoteke i paketi. Stvara novu React aplikaciju pod nazivom todo-list. Kad jednom vidite ovako nešto, na pravom ste putu:

Dođite do direktorija svog novostvorenog projekta pomoću ove naredbe:

cd popis obaveza

Pokrenite svoj projekt lokalno ovom naredbom:

npm početak

Zatim pogledajte projekt u svom pregledniku na http://localhost: 3000/.

U mapi src vašeg projekta postoji nekoliko datoteka koje vam ne trebaju. Izbriši ove datoteke: App.css, App.test.js, logotip.svg, reportWebVitals.js, setupTests.js.

Obavezno potražite izjave o uvozu u dostupnim datotekama i uklonite sve reference na izbrisane datoteke.

2. Napravite komponentu TodoList

Ovo je komponenta u koju ćemo implementirati sve kodove potrebne za popis obaveza. Napravite datoteku pod nazivom “TodoList.js” u svojoj mapi src. Zatim da provjerite radi li sve kako treba, dodajte sljedeći kod:

uvoz Reagirati iz'reagirati';
konst Popis zadataka = () => {
povratak (



Pozdrav svijete </h2>
 </div>
 );
};
izvozzadano TodoList; 

Otvorite svoju datoteku App.js, uvezite komponentu TodoList i renderirajte je unutar komponente aplikacije. Izgledat će otprilike ovako:

uvoz Reagirati iz'reagirati';
uvoz'./styles.css'
uvoz TodoList iz'./DodoList';
konst Aplikacija = () => {
povratak (




 </div>
 );
};
izvozzadano aplikacija;

Idite na svoj lokalni preglednik koji ima pokrenut localhost: 3000 i provjerite je li "Hello World" podebljano napisano. Sve dobro? Na sljedeći korak.

3. Rukovanje unosom i promjenom unosa

Ovaj korak vam omogućuje da pokrenete događaj kada upišete zadatak u okvir za unos. Uvezite useState kuku iz vašeg React paketa. useState je React kuka koja vam omogućuje učinkovito upravljanje stanjem.

uvoz Reagiraj, {useState} iz'reagirati';

Koristite kuku useState za stvaranje varijable stanja pod nazivom "inputTask" s početnom vrijednošću praznog niza. Osim toga, dodijelite funkciju "setInputTask" za ažuriranje vrijednosti "inputTask" na temelju korisničkog unosa.

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

Napravite funkciju pod nazivom "handleInputChange", uzimajući parametar događaja. Trebao bi ažurirati stanje inputTask pomoću funkcije setInputTask. Pristupite vrijednosti cilja događaja pomoću event.target.value. Ovo će se pokrenuti kad god se promijeni vrijednost polja za unos.

konst handleInputChange = (događaj) => {
 setInputTask (event.target.value);
}; 

Vrati nekoliko JSX elemenata. Prvi je naslov koji glasi "Moj popis obaveza", možete odabrati bilo koji naslov koji želite. Uključite nekoliko atributa u svoje ulazne elemente. tip=“tekst”: Ovo određuje vašu vrstu unosa kao tekst, vrijednost={inputTask}: Ovo povezuje vrijednost polja za unos s varijablom stanja inputTask, osiguravajući da ona odražava trenutnu vrijednost.onChange={handleInputChange}: Ovo poziva funkciju handleInputChange kada se promijeni vrijednost polja za unos, ažurirajući stanje inputTask.

"Napraviti">
Moj popis obaveza</h1>
"Vrh">
"ulazni" vrsta="tekst" vrijednost={inputTask}
 onChange={handleInputChange} placeholder="Unesite zadatak" />

Idemo dalje, stvorite gumb koji će dodati uneseni zadatak na popis.

"btn">DODAJ</button>
 </div>
</div>

U ovoj fazi, ovako će izgledati ispis vašeg preglednika.

4. Dodajte funkcionalnost gumbu "DODAJ".

Koristiti useState hook za stvaranje varijable stanja pod nazivom 'list' s početnom vrijednošću praznog niza. Varijabla 'setList' pohranjuje niz zadataka na temelju korisničkog unosa.

konst [popis, setList] = useState([]);

Napravite funkciju handleAddTodo koja će se pokrenuti kada korisnik klikne gumb "ADD" za dodavanje novog zadatka. Uzima parametar todo, koji predstavlja novi zadatak koji je unio korisnik. Zatim stvorite objekt newTask s jedinstvenim ID-om generiranim pomoću Math.random() i svojstvom todo koje sadrži ulazni tekst.

Idemo dalje, ažurirajte stanje popisa pomoću operatora širenja […list] za stvaranje novog polja s postojećim zadacima na popisu. Dodajte newTask na kraj niza. Ovo osigurava da ne mijenjamo izvorno polje stanja. Na kraju, resetirajte stanje inputTask na prazan niz, brišući polje za unos kada korisnik klikne gumb.

konst handleAddTodo = (napraviti) => {
konst novizadatak = {
 iskaznica: matematika.random(),
 učiniti: učiniti
 };
 setList([...list, newTask]);
 setInputTask('');
}; 

Uključite na klik atribut elementu gumba s tekstom "DODAJ". Kada se klikne, pokreće se handleAddTodo funkcija koja dodaje novi zadatak u stanje popisa

 handleAddTodo (inputTask)}>ADD</button> 

U ovoj fazi, izlaz vašeg preglednika izgledat će isto, ali ako kliknete na gumb "DODAJ" nakon unosa zadatka, polje za unos će se isprazniti. Ako to radi kako treba, prijeđite na sljedeći korak.

5. Dodajte gumb za brisanje

Ovo je posljednji korak koji omogućuje korisnicima da izbrišu svoj zadatak ako su pogriješili ili su izvršili zadatak. Napravite funkciju handleDeleteTodo koja djeluje kao rukovatelj događajem kada korisnik klikne gumb "Izbriši" za određeni zadatak. Uzima ID zadatka kao parametar.

Unutar funkcije upotrijebite metodu filtra na nizu popisa da biste stvorili novi niz newList koji isključuje zadatak s odgovarajućim ID-om. Metoda filtra ponavlja svaku stavku u polju popisa i vraća novo polje koje sadrži samo stavke koje zadovoljavaju zadani uvjet. U tom slučaju provjerite je li ID svakog zadatka jednak ID-u proslijeđenom kao parametar. Ažurirajte stanje popisa pozivom setList (newList), koji postavlja stanje na novi filtrirani niz, učinkovito uklanjajući zadatak s odgovarajućim ID-om s popisa.

konst handleDeleteTodo = (iskaznica) => {
konst noviList = list.filter((napraviti) =>
 todo.id !== id
 );
 postaviList (noviList); 
};

Upotrijebite metodu karte za ponavljanje svake stavke u polju popisa i vraćanje novog polja. Zatim izradite

Pristup todo svojstvu svakog todo objekta. na kraju, stvorite gumb koji kada se klikne, pokreće funkciju handleDeleteTodo s ID-om odgovarajućeg zadatka kao parametrom, što nam omogućuje brisanje zadatka s popisa.

<ul>
{ list.map((napraviti) => (
<linaziv klase="zadatak"ključ={todo.id}>
 {todo.todo}
<dugmena klik={() => handleDeleteTodo (todo.id)}>Deletedugme>
li>
))}
ul>

Ovako bi trebao izgledati vaš konačni kod:

uvoz Reagiraj, {useState} iz'reagirati';
konst Popis zadataka = () => {
konst [inputTask, setInputTask] = useState('');
konst [popis, setList] = useState([]);
konst handleAddTodo = () => {
konst novizadatak = {
 iskaznica: matematika.random(),
 todo: inputTask
 };
 setList([...popis, novi zadatak]);
 setInputTask('');
 };
konst handleDeleteTodo = (iskaznica) => {
konst noviList = list.filter((napraviti) => todo.id !== id);
 postaviList (noviList);
 };
konst handleInputChange = (događaj) => {
setInputTask(događaj.cilj.vrijednost);
 };
povratak (
<divnaziv klase="Napraviti">

Moj Za-ČiniPopis

<divnaziv klase="Vrh">
<ulazninaziv klase="ulazni"tip="tekst"vrijednost={inputTask}
 onChange={handleInputChange} placeholder="Unesite zadatak" />
<dugmenaziv klase="btn"na klik={handleAddTodo}>DODATIdugme>
div>
<ul>
 { list.map((napraviti) => (
<linaziv klase="zadatak"ključ={todo.id}>
 {todo.todo}
<dugmena klik={() => handleDeleteTodo (todo.id)}>
Izbrisati
dugme>
li>
 ))}
ul>
div>
 );
};
izvozzadano TodoList; 

Ovako će biti vaš konačni rezultat, s gumbom za dodavanje i brisanje koji funkcioniraju kako se očekuje.

Čestitamo, stvorili ste popis obaveza koji dodaje i briše zadatke. Možete ići dalje dodavanjem stila i više funkcionalnosti.

Koristite projekte iz stvarnog svijeta da naučite reagirati

Praksa može biti učinkovit način učenja. Omogućuje vam praktičnu primjenu koncepata i najboljih praksi Reacta, učvršćujući vaše razumijevanje okvira. Postoji gomila projekata, trebali biste pronaći one prave.