Jaunas tehnoloģijas, piemēram, React, apguve var būt mulsinoša bez praktiskas pieredzes. Kā izstrādātājam reālu projektu veidošana ir viens no efektīvākajiem veidiem, kā izprast koncepcijas un funkcijas.

Izpildiet vienkāršu uzdevumu saraksta izveides procesu, izmantojot React, un uzlabojiet savu izpratni par React pamatprincipiem.

Priekšnoteikumi uzdevumu saraksta izveidei

Pirms sākat šo projektu, ir vairākas prasības. Jums ir jābūt pamatzināšanām par tālāk norādītajām HTML, CSS, JavaScript, ES6un Reaģēt. Jums ir jābūt Node.js un npm, JavaScript pakotņu pārvaldnieks. Jums ir nepieciešams arī koda redaktors, piemēram, Visual Studio Code.

Šis ir CSS, ko izmantos šis projekts:

/* styles.css */
.Lietotne {
fontu ģimene: sans serif;
displejs: flex;
attaisnot-saturs: centrs;
izlīdzināt vienumus: centrs;
augstums: 100vh;
}
.Darīt {
fona krāsa: kvieši;
teksta līdzināšana: centrs;
platums: 50%;
polsterējums: 20px;
kaste-ēna: rgba(0, 0, 0, 0.24) 0px 3px 8px;
starpība: auto;
}





instagram viewer

ul {
saraksta stila veids: neviens;
polsterējums: 10px;
starpība: 0;
}
pogu {
platums: 70px;
augstums: 35px;
fona krāsa: smilšbrūns;
robeža: neviens;
fonta izmērs: 15px;
fonta svars: 800;
robeža-rādiuss: 4px;
kaste-ēna: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.ievade {
robeža: neviens;
platums: 340px;
augstums: 35px;
robeža-rādiuss: 9px;
teksta līdzināšana: centrs;
kaste-ēna: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Tops {
displejs: flex;
attaisnot-saturs: centrs;
plaisa: 12px;
}
li {
displejs: flex;
attaisnot-saturs: telpa-vienmērīgi;
izlīdzināt vienumus: centrs;
polsterējums: 10px;
}
li: iepriekš {
saturu: "*";
mala-labais: 5px;
}

1. Iestatiet projekta vidi

Šajā posmā ir visas komandas un faili, kas nepieciešami projekta iestatīšanai. Lai sāktu, izveidojiet jaunu React projektu. Atveriet termināli un palaidiet šo komandu:

npx izveidot-reaģēt-lietotnes uzdevumu saraksts

Tas aizņem dažas minūtes, lai instalētu visus nepieciešamos failus un arī pakotnes. Tas izveido jaunu React lietojumprogrammu ar nosaukumu uzdevumu saraksts. Kad redzat kaut ko līdzīgu, jūs esat uz pareizā ceļa:

Pārejiet uz jaunizveidotā projekta direktoriju, izmantojot šo komandu:

cd uzdevumu saraksts

Palaidiet savu projektu lokāli ar šo komandu:

npm sākums

Un pēc tam skatiet projektu savā pārlūkprogrammā vietnē http://localhost: 3000/.

Jūsu projekta src mapē ir daži faili, kas jums nav nepieciešami. Dzēst šos failus: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Noteikti meklējiet importēšanas paziņojumus pieejamajos failos un noņemiet visas atsauces uz izdzēstajiem failiem.

2. Izveidojiet TodoList komponentu

Šis ir komponents, ko mēs ieviesīsim visus uzdevumu sarakstam nepieciešamos kodus. Savā src mapē izveidojiet failu ar nosaukumu “TodoList.js”. Pēc tam, lai pārbaudītu, vai viss darbojas, kā vajadzētu, pievienojiet šādu kodu:

imports Reaģēt no'reaģēt';
konst TodoList = () => {
atgriezties (



Sveika pasaule </h2>
 </div>
 );
};
eksportētnoklusējuma Darāmo lietu saraksts; 

Atveriet savu App.js failu, importējiet komponentu TodoList un atveidojiet to App komponentā. Tas izskatīsies apmēram šādi:

imports Reaģēt no'reaģēt';
imports'./styles.css'
imports Darāmo lietu saraksts no'./Darāmo lietu saraksts';
konst Lietotne = () => {
atgriezties (




 </div>
 );
};
eksportētnoklusējuma Lietotne;

Dodieties uz vietējo pārlūkprogrammu, kurā darbojas vietējais resursdators: 3000, un pārbaudiet, vai ir drosmīgi rakstīts “Hello World”. Viss labi? Uz nākamo soli.

3. Rīkojieties ar ievadi un ievades maiņu

Šī darbība ļauj aktivizēt notikumu, kad ievades lodziņā ierakstāt uzdevumu. Importējiet useState āķi no savas React pakotnes. useState ir React āķis, kas ļauj efektīvi pārvaldīt stāvokli.

imports Reaģēt, { useState } no'reaģēt';

Izmantojiet āķi useState, lai izveidotu stāvokļa mainīgo ar nosaukumu “inputTask” ar tukšas virknes sākotnējo vērtību. Turklāt piešķiriet funkciju “setInputTask”, lai atjauninātu “inputTask” vērtību, pamatojoties uz lietotāja ievadi.

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

Izveidojiet funkciju ar nosaukumu “handleInputChange”, uzņemot notikuma parametru. Tam vajadzētu atjaunināt inputTask stāvokli, izmantojot funkciju setInputTask. Piekļūstiet notikuma mērķa vērtībai, izmantojot notikumu.target.value. Tas darbosies ikreiz, kad mainīsies ievades lauka vērtība.

konst handInputChange = (notikumu) => {
 setInputTask (event.target.value);
}; 

Atgrieziet pāris JSX elementus. Pirmais ir virsraksts, kas skan “Mans uzdevumu saraksts”, jūs varat izvēlēties jebkuru virsrakstu, kas jums patīk. Ievades elementos iekļaujiet dažus atribūtus. tips = "teksts": tas norāda jūsu ievades veidu kā tekstu, value={inputTask}: tas saista ievades lauka vērtību ar inputTask stāvokļa mainīgo, nodrošinot, ka tas atspoguļo pašreizējo vērtību.onChange={handleInputChange}: Tas izsauc HandInputChange funkciju, kad mainās ievades lauka vērtība, atjauninot inputTask stāvokli.

"Darīt">
Mans uzdevumu saraksts</h1>
"Tops">
"ievade" tips="teksts" value={inputTask}
 onChange={handleInputChange} vietturis="Ievadiet uzdevumu" />

Turpinot, izveidojiet pogu, kas sarakstam pievienos ievadīto uzdevumu.

"btn">PIEVIENOT</button>
 </div>
</div>

Šajā posmā pārlūkprogrammas izvade izskatīsies šādi.

4. Pievienojiet funkcionalitāti pogai "PIEVIENOT".

Izmantojiet useState āķis, lai izveidotu stāvokļa mainīgo ar nosaukumu “saraksts” ar tukša masīva sākotnējo vērtību. Mainīgais “setList” saglabā uzdevumu masīvu, pamatojoties uz lietotāja ievadi.

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

Izveidojiet funkciju handleAddTodo, kas darbosies, kad lietotājs noklikšķinās uz pogas “PIEVIENOT”, lai pievienotu jaunu uzdevumu. Tas aizņem parametru todo, kas apzīmē jauno lietotāja ievadīto uzdevumu. Pēc tam izveidojiet objektu newTask ar unikālu ID, kas ģenerēts, izmantojot Math.random(), un todo rekvizītu, kurā ir ievades teksts.

Turpinot, atjauniniet saraksta stāvokli, izmantojot izkliedes operatoru […saraksts], lai izveidotu jaunu masīvu ar sarakstā esošajiem uzdevumiem. Pievienojiet newTask masīva beigām. Tas nodrošina, ka mēs nematē sākotnējo stāvokļa masīvu. Visbeidzot, atiestatiet inputTask stāvokli uz tukšu virkni, notīrot ievades lauku, kad lietotājs noklikšķina uz pogas.

konst handleAddTodo = (darīt) => {
konst newTask = {
 id: Matemātika.random(),
 todo: darīt
 };
 setList([...saraksts, newTask]);
 setInputTask('');
}; 

Iekļauts onClick atribūts pogas elementam ar tekstu "PIEVIENOT". Noklikšķinot, tas aktivizē rokturis AddTodo funkcija, kas saraksta stāvoklim pievieno jaunu uzdevumu

 handleAddTodo (inputTask)}>PIEVIENOT</button> 

Šajā posmā jūsu pārlūkprogrammas izvade izskatīsies tāpat, bet, ja pēc uzdevuma ievadīšanas noklikšķināsiet uz pogas "PIEVIENOT", ievades lauks tiks tukšs. Ja tas darbojas pareizi, pārejiet pie nākamās darbības.

5. Pievienojiet pogu Dzēst

Šis ir pēdējais solis, lai lietotāji varētu dzēst savu uzdevumu, ja viņi ir pieļāvuši kļūdu vai ir pabeiguši uzdevumu. Izveidojiet handDeleteTodo funkciju, kas darbojas kā notikumu apstrādātājs, kad lietotājs konkrētam uzdevumam noklikšķina uz pogas “Dzēst”. Tas izmanto uzdevuma ID kā parametru.

Funkcijā izmantojiet filtra metodi saraksta masīvā, lai izveidotu jaunu masīvu newList, kas izslēdz uzdevumu ar atbilstošo ID. Filtra metode atkārto katru saraksta masīva vienumu un atgriež jaunu masīvu, kurā ir tikai tie vienumi, kas atbilst norādītajam nosacījumam. Šādā gadījumā pārbaudiet, vai katra uzdevuma ID ir vienāds ar ID, kas nodots kā parametrs. Atjauniniet saraksta stāvokli, izsaucot setList (newList), kas iestata stāvokli uz jauno filtrēto masīvu, efektīvi noņemot uzdevumu ar atbilstošu ID no saraksta.

konst handDeleteTodo = (id) => {
konst newList = list.filter((darīt) =>
 todo.id !== id
 );
 setList (newList); 
};

Izmantojiet kartes metodi, lai atkārtotu katru saraksta masīva vienumu un atgrieztu jaunu masīvu. Pēc tam izveidojiet an

Piekļūstiet katra uzdevuma objekta rekvizītam todo. visbeidzot, izveidojiet pogu, uz kuras noklikšķinot, tiek aktivizēta funkcija handleDeleteTodo ar atbilstošā uzdevuma ID kā parametru, ļaujot mums izdzēst uzdevumu no saraksta.

<ul>
{ list.map((darīt) => (
<liklasesNosaukums="uzdevums"taustiņu={todo.id}>
 {todo.todo}
<poguonClick={() => handDeleteTodo (todo.id)}> Dzēstpogu>
li>
))}
ul>

Jūsu gala kodam vajadzētu izskatīties šādi:

imports Reaģēt, { useState } no'reaģēt';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [sarakstu, setList] = useState([]);
konst handleAddTodo = () => {
konst newTask = {
 id: Matemātika.random(),
 todo: inputTask
 };
 setList([...sarakstu, newTask]);
 setInputTask('');
 };
konst handDeleteTodo = (id) => {
konst newList = list.filter((darīt) => todo.id !== id);
 setList (newList);
 };
konst handInputChange = (notikumu) => {
setInputTask(notikumu.target.vērtība);
 };
atgriezties (
<divklasesNosaukums="Darīt">

Mans uz-DarietSaraksts

<divklasesNosaukums="Tops">
<ievadeklasesNosaukums="ievade"veids="teksts"vērtību={inputTask}
 onChange={handleInputChange} vietturis="Ievadiet uzdevumu" />
<poguklasesNosaukums="btn"onClick={handleAddTodo}>PIEVIENOTpogu>
div>
<ul>
 { list.map((darīt) => (
<liklasesNosaukums="uzdevums"taustiņu={todo.id}>
 {todo.todo}
<poguonClick={() => handDeleteTodo (todo.id)}>
Dzēst
pogu>
li>
 ))}
ul>
div>
 );
};
eksportētnoklusējuma Darāmo lietu saraksts; 

Tāda būs jūsu galīgā izvade, gan pievienošanas, gan dzēšanas pogai darbojoties, kā paredzēts.

Apsveicam, esat izveidojis uzdevumu sarakstu, kurā tiek pievienoti un dzēsti uzdevumi. Varat iet tālāk, pievienojot stilu un citas funkcijas.

Izmantojiet reālās pasaules projektus, lai iemācītos reaģēt

Prakse var būt efektīvs mācīšanās veids. Tas ļauj praktiski pielietot React koncepcijas un labāko praksi, uzlabojot izpratni par sistēmu. Ir daudz projektu, jums vajadzētu atrast pareizos.