Învățarea unei noi tehnologii precum React poate fi confuză fără experiență practică. În calitate de dezvoltator, construirea de proiecte în lumea reală este una dintre cele mai eficiente moduri de a înțelege concepte și caracteristici.

Urmați procesul de creare a unei liste simple de activități cu React și îmbunătățiți-vă înțelegerea elementelor fundamentale ale React.

Cerințe preliminare pentru crearea unei liste de activități

Înainte de a începe acest proiect, există mai multe cerințe. Trebuie să aveți o înțelegere de bază a următoarelor, HTML, CSS, JavaScript, ES6, și React. Trebuie să aveți Node.js și npm, managerul de pachete JavaScript. De asemenea, aveți nevoie de un editor de cod, cum ar fi Visual Studio Code.

Iată CSS-ul pe care îl va folosi acest proiect:

/* styles.css */
.Aplicația {
familie de fonturi: sans-serif;
afişa: contracta;
justifica-conținut: centru;
alinierea elementelor: centru;
înălţime: 100





instagram viewer

vh;
}
.A face {
culoare de fundal: grâu;
aliniere text: centru;
lăţime: 50%;
căptușeală: 20px;
cutie-umbră: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marginea: auto;
}
ul {
tip-list-stil: nici unul;
căptușeală: 10px;
marginea: 0;
}
buton {
lăţime: 70px;
înălţime: 35px;
culoare de fundal: brun nisip;
frontieră: nici unul;
marimea fontului: 15px;
grosimea fontului: 800;
hotar-raza: 4px;
cutie-umbră: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.intrare {
frontieră: nici unul;
lăţime: 340px;
înălţime: 35px;
hotar-raza: 9px;
aliniere text: centru;
cutie-umbră: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Top {
afişa: contracta;
justifica-conținut: centru;
decalaj: 12px;
}
li {
afişa: contracta;
justifica-conținut: spațiu-uniform;
alinierea elementelor: centru;
căptușeală: 10px;
}
li:inainte de {
conţinut: "*";
margine-dreapta: 5px;
}

1. Configurați mediul de proiect

Această etapă include toate comenzile și fișierele necesare pentru a configura proiectul. Pentru a începe, creați un nou proiect React. Deschideți un terminal și rulați această comandă:

Lista de activități npx create-react-app

Acest lucru durează câteva minute pentru a instala toate fișierele și pachetele necesare. Acesta creează o nouă aplicație React numită todo-list. Odată ce vezi așa ceva, ești pe drumul cel bun:

Navigați la directorul proiectului nou creat folosind această comandă:

lista de toate cd

Rulați proiectul local cu această comandă:

npm start

Și apoi vizualizați proiectul în browser la http://localhost: 3000/.

În folderul src al proiectului dumneavoastră, există câteva fișiere de care nu aveți nevoie. Ștergeți aceste fișiere: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Asigurați-vă că căutați instrucțiuni de import în fișierele disponibile și eliminați orice referință la fișierele șterse.

2. Creați o componentă TodoList

Aceasta este componenta pe care vom implementa toate codurile necesare pentru lista de sarcini. Creați un fișier numit „TodoList.js” în folderul dvs. src. Apoi, pentru a testa că totul funcționează așa cum ar trebui, adăugați următorul cod:

import Reacţiona din'reacţiona';
const TodoList = () => {
întoarcere (



Bună lume </h2>
 </div>
 );
};
exportMod implicit TodoList; 

Deschideți fișierul App.js, importați componenta TodoList și redați-o în componenta App. Va arata cam asa:

import Reacţiona din'reacţiona';
import„./styles.css”
import TodoList din„./TodoList”;
const Aplicație = () => {
întoarcere (




 </div>
 );
};
exportMod implicit Aplicație;

Accesați browserul local care rulează localhost: 3000 și verificați pentru a vedea „Hello World” scris cu îndrăzneală. Toate bune? La pasul următor.

3. Gestionați intrarea și modificarea intrării

Acest pas vă permite să declanșați un eveniment atunci când introduceți o sarcină în caseta de introducere. Importați cârligul useState din pachetul dvs. React. useState este un cârlig React care vă permite să gestionați starea în mod eficient.

import Reacționează, { useState } din'reacţiona';

Utilizați cârligul useState pentru a crea o variabilă de stare numită „inputTask” cu o valoare inițială a unui șir gol. În plus, atribuiți funcția „setInputTask” pentru a actualiza valoarea „inputTask” în funcție de intrarea utilizatorului.

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

Creați o funcție numită „handleInputChange”, luând în considerare un parametru de eveniment. Ar trebui să actualizeze starea inputTask folosind funcția setInputTask. Accesați valoarea țintei evenimentului cu event.target.value. Acesta va rula ori de câte ori valoarea câmpului de intrare se schimbă.

const handleInputChange = (eveniment) => {
 setInputTask (event.target.value);
}; 

Returnează câteva elemente JSX. Primul este titlul care scrie „Lista mea de activități”, puteți decide orice titlu doriți. Includeți câteva atribute elementelor dvs. de intrare. tip="text": Aceasta specifică tipul de intrare ca text, valoare={inputTask}: Aceasta leagă valoarea câmpului de intrare la variabila de stare inputTask, asigurându-se că reflectă valoarea curentă.onChange={handleInputChange}: Aceasta apelează funcția handleInputChange când valoarea câmpului de intrare se modifică, actualizând starea inputTask.

"A face">
Lista mea de sarcini</h1>
"Top">
"intrare" tip="text" valoare={inputTask}
 onChange={handleInputChange} substituent=„Introduceți o sarcină” />

Mergând mai departe, creați un buton care va adăuga sarcina introdusă la listă.

"btn">ADAUGA</button>
 </div>
</div>

În această etapă, așa va arăta rezultatul browserului dvs.

4. Adăugați funcționalitate la butonul „ADD”.

Folosește useState hook pentru a crea o variabilă de stare numită „listă” cu o valoare inițială a unei matrice goale. Variabila „setList” stochează matricea de sarcini pe baza intrării utilizatorului.

const [listă, setList] = useState([]);

Creați o funcție handleAddTodo care va rula atunci când utilizatorul face clic pe butonul „ADAD” pentru a adăuga o nouă sarcină. Ia parametrul todo, care reprezintă noua sarcină introdusă de utilizator. Apoi, creați un obiect newTask cu un id unic generat folosind Math.random() și proprietatea todo care deține textul de intrare.

Continuând, actualizați starea listei utilizând operatorul de răspândire […list] pentru a crea o nouă matrice cu sarcinile existente în listă. Adăugați noua sarcină la sfârșitul matricei. Acest lucru asigură că nu modificăm matricea de stare originală. În cele din urmă, resetați starea inputTask la un șir gol, ștergând câmpul de introducere atunci când utilizatorul face clic pe butonul.

const handleAddTodo = (a face) => {
const sarcină nouă = {
 id: Matematică.Aleatoriu(),
 tot: tot
 };
 setList([...list, newTask]);
 setInputTask('');
}; 

Includeți onClick atribuiți elementului buton cu textul „ADD”. Când se dă clic, declanșează handleAddTodo funcție, care adaugă o nouă sarcină la starea listei

 handleAddTodo (inputTask)}>ADD</button> 

În această etapă, rezultatul browserului dvs. va arăta la fel, dar dacă faceți clic pe butonul „ADĂUGAȚI” după ce ați introdus o sarcină, câmpul de introducere se va goli. Dacă funcționează bine, treci la pasul următor.

5. Adăugați un buton de ștergere

Acesta este pasul final pentru a permite utilizatorilor să-și ștergă sarcina dacă au făcut o greșeală sau au finalizat sarcina. Creați o funcție handleDeleteTodo care acționează ca un handler de evenimente atunci când utilizatorul face clic pe butonul „Șterge” pentru o anumită sarcină. Ia id-ul sarcinii ca parametru.

În interiorul funcției, utilizați metoda de filtrare din tabloul list pentru a crea o nouă matrice newList care exclude sarcina cu id-ul potrivit. Metoda de filtru iterează prin fiecare element din tabloul listă și returnează o nouă matrice care conține numai elementele care îndeplinesc condiția dată. În acest caz, verificați dacă ID-ul fiecărei sarcini este egal cu ID-ul transmis ca parametru. Actualizați starea listei apelând setList (newList), care setează starea la noua matrice filtrată, eliminând efectiv sarcina cu id-ul potrivit din listă.

const handleDeleteTodo = (id) => {
const newList = list.filter((a face) =>
 todo.id !== id
 );
 setList (newList); 
};

Utilizați metoda hărții pentru a itera fiecare element din matricea listei și a returna o nouă matrice. Apoi, creați un

Accesați proprietatea todo a fiecărui obiect todo. în cele din urmă, creați un buton care, atunci când faceți clic, declanșează funcția handleDeleteTodo cu id-ul sarcinii corespunzătoare ca parametru, permițându-ne să ștergem sarcina din listă.

<ul>
{ list.map((a face) => (
<linumele clasei="sarcină"cheie={todo.id}>
 {todo.todo}
<butononClick={() => handleDeleteTodo (todo.id)}>Deletebuton>
li>
))}
ul>

Iată cum ar trebui să arate codul final:

import Reacționează, { useState } din'reacţiona';
const TodoList = () => {
const [inputTask, setInputTask] = useState('');
const [listă, setList] = useState([]);
const handleAddTodo = () => {
const sarcină nouă = {
 id: Matematică.Aleatoriu(),
 tot: inputTask
 };
 setList([...listă, sarcina noua]);
 setInputTask('');
 };
const handleDeleteTodo = (id) => {
const newList = list.filter((a face) => todo.id !== id);
 setList (newList);
 };
const handleInputChange = (eveniment) => {
setInputTask(eveniment.ţintă.valoare);
 };
întoarcere (
<divnumele clasei="A face">

A mea pentru-DoListă

<divnumele clasei="Top">
<intrarenumele clasei="intrare"tip="text"valoare={inputTask}
 onChange={handleInputChange} substituent=„Introduceți o sarcină” />
<butonnumele clasei="btn"onClick={handleAddTodo}>ADĂUGAbuton>
div>
<ul>
 { list.map((a face) => (
<linumele clasei="sarcină"cheie={todo.id}>
 {todo.todo}
<butononClick={() => handleDeleteTodo (todo.id)}>
Șterge
buton>
li>
 ))}
ul>
div>
 );
};
exportMod implicit TodoList; 

Acesta este modul în care va fi rezultatul final, atât butoanele de adăugare, cât și cele de ștergere funcționând conform așteptărilor.

Felicitări, ați creat o listă de activități care adaugă și șterge sarcini. Puteți merge mai departe adăugând stil și mai multe funcționalități.

Utilizați proiecte din lumea reală pentru a învăța React

Practica poate fi o modalitate eficientă de învățare. Vă permite să aplicați conceptele și cele mai bune practici React într-o manieră practică, întărindu-vă înțelegerea cadrului. Există o mulțime de proiecte acolo, ar trebui să trebuiască să le găsiți pe cele potrivite.