Mokymasis naujos technologijos, tokios kaip „React“, gali būti painu be praktinės patirties. Kaip kūrėjas, realaus pasaulio projektų kūrimas yra vienas iš efektyviausių būdų suprasti sąvokas ir funkcijas.

Sekite paprasto darbų sąrašo kūrimo procesą naudodami „React“ ir patobulinkite savo „React“ pagrindų supratimą.

Būtinos užduočių sąrašo sudarymo sąlygos

Prieš pradedant šį projektą, yra keletas reikalavimų. Turite turėti pagrindinį supratimą apie šiuos dalykus: HTML, CSS, JavaScript, ES6ir Reaguoti. Turite turėti Node.js ir npm, „JavaScript“ paketų tvarkyklė. Taip pat reikia kodo rengyklės, pvz., „Visual Studio Code“.

Štai CSS, kurį naudos šis projektas:

/* styles.css */
.Programa {
šrifto šeima: be serifo;
ekranas: lankstus;
pateisinti-turinys: centras;
išlyginti elementus: centras;
aukščio: 100vh;
}
.Daryti {
fono spalva: kvieciai;
teksto lygiavimas: centras;
plotis: 50%;
kamšalas: 20px;
dėžutė-šešėlis: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marža: automatinis;
}





instagram viewer

ul {
sąrašo stiliaus: nė vienas;
kamšalas: 10px;
marža: 0;
}
mygtuką {
plotis: 70px;
aukščio: 35px;
fono spalva: smėlio spalvos;
siena: nė vienas;
šrifto dydis: 15px;
šrifto svoris: 800;
pasienio spindulys: 4px;
dėžutė-šešėlis: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.įvestis {
siena: nė vienas;
plotis: 340px;
aukščio: 35px;
pasienio spindulys: 9px;
teksto lygiavimas: centras;
dėžutė-šešėlis: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Viršus {
ekranas: lankstus;
pateisinti-turinys: centras;
tarpas: 12px;
}
li {
ekranas: lankstus;
pateisinti-turinys: erdvė-tolygiai;
išlyginti elementus: centras;
kamšalas: 10px;
}
li: prieš {
turinys: "*";
paraštė-dešinė: 5px;
}

1. Sukurkite projekto aplinką

Šis etapas apima visas komandas ir failus, reikalingus projektui nustatyti. Norėdami pradėti, sukurkite naują „React“ projektą. Atidarykite terminalą ir paleiskite šią komandą:

npx sukurti-reaguoti-app darbų sąrašas

Tai užtruks kelias minutes, kol bus įdiegti visi reikalingi failai ir paketai. Tai sukuria naują „React“ programą, pavadintą „Todo-list“. Kai pamatysite kažką panašaus, eisite teisingu keliu:

Eikite į naujai sukurto projekto katalogą naudodami šią komandą:

cd darbų sąrašas

Vykdykite projektą vietoje naudodami šią komandą:

npm pradžia

Tada peržiūrėkite projektą savo naršyklėje adresu http://localhost: 3000/.

Jūsų projekto src aplanke yra keletas failų, kurių jums nereikia. Ištrinkite šiuos failus: App.css, App.test.js, logotipas.svg, reportWebVitals.js, setupTests.js.

Įsitikinkite, kad esamuose failuose ieškote importavimo teiginių ir pašalinkite visas nuorodas į ištrintus failus.

2. Sukurkite „TodoList“ komponentą

Tai yra komponentas, kurį įdiegsime visus užduočių sąrašui reikalingus kodus. Savo src aplanke sukurkite failą pavadinimu „TodoList.js“. Tada norėdami patikrinti, ar viskas veikia taip, kaip turėtų, pridėkite šį kodą:

importuoti Reaguoti iš'reaguoti';
konst TodoList = () => {
grąžinti (



Sveikas pasaulis </h2>
 </div>
 );
};
eksportuotinumatytas TodoList; 

Atidarykite failą App.js, importuokite TodoList komponentą ir pateikite jį programos komponente. Tai atrodys maždaug taip:

importuoti Reaguoti iš'reaguoti';
importuoti'./styles.css'
importuoti Užduočių sąrašas iš'./TodoList';
konst Programa = () => {
grąžinti (




 </div>
 );
};
eksportuotinumatytas Programėlė;

Eikite į vietinę naršyklę, kurioje veikia „localhost: 3000“, ir patikrinkite, ar drąsiai parašyta „Hello World“. Viskas gerai? Į kitą žingsnį.

3. Tvarkyti įvestį ir įvesties keitimą

Šis veiksmas leidžia suaktyvinti įvykį, kai įvedate užduotį įvesties laukelyje. Importuokite „useState“ kabliuką iš „React“ paketo. useState yra „React Hook“, leidžiantis efektyviai valdyti būseną.

importuoti Reaguoti, { useState } iš'reaguoti';

Naudokite kabliuką useState, kad sukurtumėte būsenos kintamąjį pavadinimu „inputTask“, kurio pradinė vertė yra tuščia eilutė. Be to, priskirkite funkciją „setInputTask“, kad atnaujintumėte „inputTask“ reikšmę pagal vartotojo įvestį.

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

Sukurkite funkciją, pavadintą „handleInputChange“, įtraukdami įvykio parametrą. Ji turėtų atnaujinti inputTask būseną naudodama funkciją setInputTask. Pasiekite įvykio tikslo vertę naudodami event.target.value. Tai veiks, kai pasikeis įvesties lauko reikšmė.

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

Grąžinkite keletą JSX elementų. Pirmoji yra antraštė, kuri parašyta „Mano darbų sąrašas“. Galite pasirinkti bet kurią jums patinkančią antraštę. Į įvesties elementus įtraukite keletą atributų. tipas = "tekstas": nurodomas įvesties tipas kaip tekstas, value={inputTask}: Tai susieja įvesties lauko reikšmę su inputTask būsenos kintamuoju, užtikrinant, kad jis atspindėtų dabartinę reikšmę.onChange={handleInputChange}: Pasikeitus įvesties lauko vertei, iškviečiama HandelInputChange funkcija ir atnaujinama inputTask būsena.

"Daryti">
Mano darbų sąrašas</h1>
"Viršus">
"įvestis" tipas ="tekstas" value={inputTask}
 onChange={handleInputChange} placeholder=„Įveskite užduotį“ />

Toliau sukurkite mygtuką, kuris įtrauks įvestą užduotį į sąrašą.

"btn">PRIDĖTI</button>
 </div>
</div>

Šiame etape taip atrodys jūsų naršyklės išvestis.

4. Pridėkite funkcionalumą prie mygtuko „PRIDĖTI“.

Naudoti useState kabliukas, kad sukurtumėte būsenos kintamąjį pavadinimu „list“ su pradine tuščio masyvo reikšme. Kintamasis „setList“ saugo užduočių masyvą, pagrįstą vartotojo įvestimi.

konst [sąrašas, setList] = useState([]);

Sukurkite funkciją handleAddTodo, kuri bus paleista, kai vartotojas spustelėja mygtuką „PRIDĖTI“, kad pridėtų naują užduotį. Tam reikia todo parametro, kuris parodo naują vartotojo įvestą užduotį. Tada sukurkite objektą newTask su unikaliu ID, sugeneruotu naudojant Math.random(), ir todo ypatybę, kurioje yra įvesties tekstas.

Toliau atnaujinkite sąrašo būseną naudodami sklaidos operatorių […list], kad sukurtumėte naują masyvą su sąraše esančiomis užduotimis. Prie masyvo pabaigos pridėkite naują užduotį. Tai užtikrina, kad nepakeisime pradinės būsenos masyvo. Galiausiai iš naujo nustatykite inputTask būseną į tuščią eilutę ir išvalykite įvesties lauką, kai vartotojas spustelėja mygtuką.

konst handleAddTodo = (daryti) => {
konst newTask = {
 ID: Matematika.random(),
 todo: daryti
 };
 setList([...sąrašas, newTask]);
 setInputTask('');
}; 

Įtraukti paspaudus atributas mygtuko elementui su tekstu "PRIDĖTI". Paspaudus, jis suaktyvina rankenaAddTodo funkcija, kuri prideda naują užduotį į sąrašo būseną

 handleAddTodo (inputTask)}>ADD</button> 

Šiame etape jūsų naršyklės išvestis atrodys taip pat, bet jei įvedę užduotį spustelėsite mygtuką „PRIDĖTI“, įvesties laukas bus ištuštintas. Jei viskas gerai, pereikite prie kito veiksmo.

5. Pridėkite ištrynimo mygtuką

Tai paskutinis veiksmas, leidžiantis vartotojams ištrinti savo užduotį, jei jie padarė klaidą arba atliko užduotį. Sukurkite „handleDeleteTodo“ funkciją, kuri veikia kaip įvykių tvarkytoja, kai vartotojas spustelėja mygtuką „Ištrinti“ tam tikrai užduočiai atlikti. Kaip parametras naudojamas užduoties ID.

Funkcijoje naudokite sąrašo masyve esantį filtravimo metodą, kad sukurtumėte naują masyvą newList, kuris neįtrauktų užduoties su atitinkamu ID. Filtro metodas kartojasi per kiekvieną sąrašo masyvo elementą ir grąžina naują masyvą, kuriame yra tik tie elementai, kurie atitinka nurodytą sąlygą. Tokiu atveju patikrinkite, ar kiekvienos užduoties ID yra lygus ID, perduotam kaip parametras. Atnaujinkite sąrašo būseną iškviesdami setList (newList), kuri nustato būseną į naują filtruotą masyvą, veiksmingai pašalindama užduotį su atitinkamu ID iš sąrašo.

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

Naudokite žemėlapio metodą, kad pakartotumėte kiekvieną sąrašo masyvo elementą ir grąžintumėte naują masyvą. Tada sukurkite an

Pasiekite kiekvieno todo objekto todo ypatybę. galiausiai sukurkite mygtuką, kurį spustelėjus suaktyvinama handDeleteTodo funkcija su atitinkamos užduoties ID kaip parametru, leidžianti ištrinti užduotį iš sąrašo.

<ul>
{ list.map((daryti) => (
<liklasės pavadinimas="užduotis"Raktas={todo.id}>
 {todo.todo}
<mygtukąpaspaudus={() => handleDeleteTodo (todo.id)}> Ištrintimygtuką>
li>
))}
ul>

Štai kaip turėtų atrodyti jūsų galutinis kodas:

importuoti Reaguoti, { useState } iš'reaguoti';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [sąrašą, setList] = useState([]);
konst handleAddTodo = () => {
konst newTask = {
 ID: Matematika.random(),
 todo: inputTask
 };
 paruošti sąrašą([...sąrašą, nauja užduotis]);
 setInputTask('');
 };
konst handDeleteTodo = (id) => {
konst newList = list.filter((daryti) => todo.id !== id);
 setList (newList);
 };
konst handInputChange = (renginys) => {
setInputTask(renginys.taikinys.vertė);
 };
grąžinti (
<divklasės pavadinimas="Daryti">

Mano kam-DarykSąrašas

<divklasės pavadinimas="Viršus">
<įvestisklasės pavadinimas="įvestis"tipo="tekstas"vertė={inputTask}
 onChange={handleInputChange} placeholder=„Įveskite užduotį“ />
<mygtukąklasės pavadinimas="btn"paspaudus={handleAddTodo}>PAPILDYTImygtuką>
div>
<ul>
 { list.map((daryti) => (
<liklasės pavadinimas="užduotis"Raktas={todo.id}>
 {todo.todo}
<mygtukąpaspaudus={() => handDeleteTodo (todo.id)}>
Ištrinti
mygtuką>
li>
 ))}
ul>
div>
 );
};
eksportuotinumatytas TodoList; 

Toks bus jūsų galutinis rezultatas, o mygtukai pridėti ir ištrinti veiks taip, kaip tikėtasi.

Sveikiname, sukūrėte darbų sąrašą, kuriame pridedamos ir pašalinamos užduotys. Galite eiti toliau pridėdami stiliaus ir daugiau funkcijų.

Naudokite realaus pasaulio projektus, kad išmoktumėte reaguoti

Praktika gali būti veiksmingas mokymosi būdas. Tai leidžia praktiškai pritaikyti „React“ koncepcijas ir geriausią praktiką, o tai sustiprina jūsų supratimą apie sistemą. Yra daugybė projektų, jums reikia rasti tinkamus.