Uue tehnoloogia, nagu React, õppimine võib ilma praktilise kogemuseta olla segane. Arendajana on reaalmaailma projektide loomine üks tõhusamaid viise mõistete ja funktsioonide mõistmiseks.

Järgige Reactiga lihtsa ülesannete loendi loomise protsessi ja parandage oma arusaamist Reacti põhitõdedest.

Eeldused ülesandeloendi koostamiseks

Enne selle projekti alustamist on mitmeid nõudeid. Peate omama põhiteadmisi järgmistest: HTML, CSS, JavaScript, ES6ja Reageeri. Teil peab olema Node.js ja npm, JavaScripti paketihaldur. Teil on vaja ka koodiredaktorit, näiteks Visual Studio Code.

Siin on CSS, mida see projekt kasutab:

/* styles.css */
.Rakendus {
font-perekond: sans-serif;
kuva: painduv;
õigustama-sisu: Keskus;
joondada-üksused: Keskus;
kõrgus: 100vh;
}
.Tegema {
taustavärv: nisu;
teksti joondamine: Keskus;
laius: 50%;
polsterdus: 20px;
kast-vari: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marginaal: auto;
}
ul {
list-stiilis-tüüp: mitte ühtegi;
polsterdus: 10px;
marginaal: 0;
}





instagram viewer

nuppu {
laius: 70px;
kõrgus: 35px;
taustavärv: liivapruun;
piir: mitte ühtegi;
fondi suurus: 15px;
font-weight: 800;
piiriraadius: 4px;
kast-vari: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.sisend {
piir: mitte ühtegi;
laius: 340px;
kõrgus: 35px;
piiriraadius: 9px;
teksti joondamine: Keskus;
kast-vari: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Ülemine {
kuva: painduv;
õigustama-sisu: Keskus;
lõhe: 12px;
}
li {
kuva: painduv;
õigustama-sisu: ruumiliselt ühtlaselt;
joondada-üksused: Keskus;
polsterdus: 10px;
}
li: enne {
sisu: "*";
margin-parem: 5px;
}

1. Projektikeskkonna seadistamine

See etapp sisaldab kõiki projekti seadistamiseks vajalikke käske ja faile. Alustuseks looge uus Reacti projekt. Avage terminal ja käivitage see käsk:

npx loo-react-rakenduse ülesannete loend

Kõigi vajalike failide ja ka pakettide installimiseks kulub mõni minut. See loob uue Reacti rakenduse nimega ülesandeloend. Kui näete midagi sellist, olete õigel teel:

Liikuge oma vastloodud projekti kataloogi, kasutades seda käsku:

cd ülesandeloend

Käivitage oma projekt kohapeal selle käsuga:

npm start

Seejärel vaadake projekti oma brauseris aadressil http://localhost: 3000/.

Teie projekti src kaustas on paar faili, mida te ei vaja. Kustutage need failid: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Veenduge, et otsiksite saadaolevatest failidest impordiavaldusi ja eemaldage kõik viited kustutatud failidele.

2. Looge komponent TodoList

See on komponent, mille rakendame kõik ülesannete nimekirja jaoks vajalikud koodid. Looge oma src kaustas fail nimega "TodoList.js". Seejärel lisage järgmine kood, et testida, kas kõik töötab nii nagu peab:

importida Reageerige alates'reageeri';
konst TodoList = () => {
tagasi (



Tere maailm </h2>
 </div>
 );
};
eksportidavaikimisi Nimekiri; 

Avage fail App.js, importige komponent TodoList ja renderdage see rakenduse komponendis. See näeb välja umbes selline:

importida Reageerige alates'reageeri';
importida'./styles.css'
importida Nimekiri alates'./Nimekiri';
konst Rakendus = () => {
tagasi (




 </div>
 );
};
eksportidavaikimisi Rakendus;

Minge oma kohalikku brauserisse, kus töötab localhost: 3000, ja kontrollige, kas "Tere maailm" on julgelt kirjutatud. Kõik hästi? Järgmise sammu juurde.

3. Käsitsege sisendit ja sisendi muutmist

See samm võimaldab teil käivitada sündmuse, kui sisestate ülesande sisestuskasti. Importige oma Reacti paketist konks useState. useState on Reacti konks, mis võimaldab teil olekut tõhusalt hallata.

importida Reageerige, { useState } alates'reageeri';

Kasutage konksu useState, et luua olekumuutuja nimega "inputTask", mille algväärtus on tühi string. Lisaks määrake funktsioon „setInputTask”, et värskendada „inputTask” väärtust kasutaja sisendi põhjal.

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

Looge funktsioon nimega "handleInputChange", võttes sisse sündmuse parameetri. See peaks värskendama inputTaski olekut funktsiooni setInputTask abil. Juurdepääs sündmuse sihtmärgi väärtusele sündmuse.target.value abil. See käivitatakse alati, kui sisestusvälja väärtus muutub.

konst handInputChange = (sündmus) => {
 setInputTask (event.target.value);
}; 

Tagasta paar JSX elementi. Esimene on pealkiri "Minu ülesannete loend", saate valida mis tahes soovitud rubriigi. Lisage oma sisendelementidele paar atribuuti. type=“tekst”: see määrab teie sisestustüübi tekstina, väärtus={inputTask}: see seob sisendvälja väärtuse olekumuutujaga inputTask, tagades, et see kajastab praegust väärtust.onChange={handleInputChange}: Sisestusvälja väärtuse muutumisel kutsub see esile funktsiooni handleInputChange, värskendades sisendTaski olekut.

"Tegema">
Minu ülesannete nimekiri</h1>
"Top">
"sisend" tüüp="tekst" väärtus={inputTask}
 onChange={handleInputChange} kohahoidja="Sisesta ülesanne" />

Edasi liikudes looge nupp, mis lisab sisestatud ülesande loendisse.

"btn">LISA</button>
 </div>
</div>

Selles etapis näeb teie brauseri väljund välja selline.

4. Lisage funktsioonid nupule "LISA".

Kasuta useState konks, et luua olekumuutuja nimega "loend", mille algväärtus on tühi massiiv. Muutuja „setList” salvestab kasutaja sisendil põhineva ülesannete massiivi.

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

Looge funktsioon handleAddTodo, mis käivitub, kui kasutaja klõpsab uue ülesande lisamiseks nuppu "LISA". See võtab parameetri todo, mis tähistab kasutaja sisestatud uut ülesannet. Seejärel looge objekt newTask kordumatu ID-ga, mis on genereeritud kasutades Math.random(), ja sisendteksti sisaldava atribuudiga ülesanne.

Edasi liikudes värskendage loendi olekut, kasutades laialioperaatorit […list], et luua loendis olemasolevate ülesannetega uus massiiv. Lisage massiivi lõppu uus ülesanne. See tagab, et me ei muteeri algse oleku massiivi. Lõpuks lähtestage inputTask olek tühjale stringile, tühjendades sisestusvälja, kui kasutaja klõpsab nuppu.

konst handleAddTodo = (tegema) => {
konst uusülesanne = {
 id: matemaatika.random(),
 tegema: tegema
 };
 setList([...loend, newTask]);
 setInputTask('');
}; 

Kaasa onClick atribuut nupuelemendile tekstiga "LISA". Kui klõpsata, käivitab see käepide AddTodo funktsioon, mis lisab loendi olekusse uue ülesande

 handleAddTodo (inputTask)}>LISA</button> 

Selles etapis näeb teie brauseri väljund välja sama, kuid kui klõpsate pärast ülesande sisestamist nupul "LISA", siis sisestusväli tühjeneb. Kui see töötab hästi, jätkake järgmise sammuga.

5. Lisage kustutamisnupp

See on viimane samm, mis võimaldab kasutajatel oma ülesande kustutada, kui nad on teinud vea või on ülesande täitnud. Looge funktsioon handleDeleteTodo, mis toimib sündmuste käitlejana, kui kasutaja klõpsab konkreetse ülesande jaoks nuppu "Kustuta". See võtab parameetrina ülesande ID.

Funktsiooni sees kasutage loendi massiivi filtrimeetodit, et luua uus massiiv newList, mis välistab sobiva ID-ga ülesande. Filtrimeetod itereerib loendi massiivi iga üksuse ja tagastab uue massiivi, mis sisaldab ainult neid üksusi, mis vastavad antud tingimusele. Sel juhul kontrollige, kas iga ülesande ID on võrdne parameetrina edastatud ID-ga. Värskendage loendi olekut, kutsudes välja setList (newList), mis määrab olekuks uue filtreeritud massiivi, eemaldades loendist tõhusalt ülesande koos sobiva ID-ga.

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

Kasutage loendi massiivi iga üksuse kordamiseks ja uue massiivi tagastamiseks kaardimeetodit. Seejärel looge an

Juurdepääs iga ülesandeobjekti ülesandeomadusele. lõpuks loo nupp, millele klõpsamisel käivitatakse funktsioon handleDeleteTodo, mille parameetriks on vastava ülesande ID, mis võimaldab meil ülesande loendist kustutada.

<ul>
{ list.map((tegema) => (
<liklassi nimi="ülesanne"võti={todo.id}>
 {todo.todo}
<nuppuonClick={() => handleDeleteTodo (todo.id)}> Kustutanuppu>
li>
))}
ul>

Teie lõplik kood peaks välja nägema järgmine:

importida Reageerige, { useState } alates'reageeri';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [nimekirja, setList] = useState([]);
konst handleAddTodo = () => {
konst uusülesanne = {
 id: matemaatika.random(),
 todo: inputTask
 };
 setList([...nimekirja, uus ülesanne]);
 setInputTask('');
 };
konst handDeleteTodo = (id) => {
konst newList = list.filter((tegema) => todo.id !== id);
 setList (newList);
 };
konst handInputChange = (sündmus) => {
setInputTask(sündmus.sihtmärk.väärtus);
 };
tagasi (
<divklassi nimi="Tegema">

Minu To-TeeNimekiri

<divklassi nimi="Top">
<sisendklassi nimi="sisend"tüüp="tekst"väärtus={inputTask}
 onChange={handleInputChange} kohahoidja="Sisesta ülesanne" />
<nuppuklassi nimi="btn"onClick={handleAddTodo}>LISAMAnuppu>
div>
<ul>
 { list.map((tegema) => (
<liklassi nimi="ülesanne"võti={todo.id}>
 {todo.todo}
<nuppuonClick={() => handDeleteTodo (todo.id)}>
Kustuta
nuppu>
li>
 ))}
ul>
div>
 );
};
eksportidavaikimisi Nimekiri; 

Selline on teie lõplik väljund, kusjuures nii lisamise kui ka kustutamise nupud töötavad ootuspäraselt.

Õnnitleme, olete loonud ülesannete loendi, mis lisab ja kustutab ülesandeid. Saate minna kaugemale, lisades stiili ja rohkem funktsioone.

Kasutage reaalmaailma projekte, et õppida reageerima

Praktika võib olla tõhus õppimisviis. See võimaldab teil rakendada Reacti kontseptsioone ja parimaid tavasid praktilisel viisil, tugevdades teie arusaamist raamistikust. Seal on palju projekte, peaksite leidma õiged.