Vadite svoje spretnosti React s to klasično, lahko razumljivo vzorčno aplikacijo.

Učenje nove tehnologije, kot je React, je lahko zmedeno brez praktičnih izkušenj. Kot razvijalec je izgradnja projektov v resničnem svetu eden najučinkovitejših načinov za razumevanje konceptov in funkcij.

Sledite postopku ustvarjanja preprostega seznama opravil z Reactom in izboljšajte svoje razumevanje osnov Reacta.

Predpogoji za ustvarjanje seznama opravil

Preden začnete s tem projektom, morate izpolniti več zahtev. Morate imeti osnovno razumevanje naslednjega, HTML, CSS, JavaScript, ES6in React. Imeti morate Node.js in npm, upravitelj paketov JavaScript. Potrebujete tudi urejevalnik kode, kot je Visual Studio Code.

Tukaj je CSS, ki ga bo ta projekt uporabljal:

/* styles.css */
.App {
družina pisav: sans-serif;
zaslon: flex;
justify-content: center;
align-items: center;
višina: 100vh;
}
.Narediti {
Barva ozadja: pšenica;
poravnava besedila: center;
premer: 50%;
oblazinjenje: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marža: avto;
}







instagram viewer



ul {
list-style-type: nobeden;
oblazinjenje: 10px;
marža: 0;
}


gumb {
premer: 70px;
višina: 35px;
Barva ozadja: peščeno rjava;
meja: nobeden;
velikost pisave: 15px;
teža pisave: 800;
mejni polmer: 4px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.vnos {
meja: nobeden;
premer: 340px;
višina: 35px;
mejni polmer: 9px;
poravnava besedila: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.Top {
zaslon: flex;
justify-content: center;
vrzel: 12px;
}


li {
zaslon: flex;
justify-content: prostorsko enakomerno;
align-items: center;
oblazinjenje: 10px;
}
li:prej {
vsebino: "*";
margin-desno: 5px;
}

1. Nastavite projektno okolje

Ta stopnja vključuje vse ukaze in datoteke, potrebne za nastavitev projekta. Za začetek ustvarite nov projekt React. Odprite terminal in zaženite ta ukaz:

npx create-react-app seznam opravil

To traja nekaj minut, da namestite vse potrebne datoteke in tudi pakete. Ustvari novo aplikacijo React z imenom seznam opravil. Ko vidite nekaj takega, ste na pravi poti:

Pomaknite se do imenika vašega novo ustvarjenega projekta s tem ukazom:

cd seznam opravil

Zaženite projekt lokalno s tem ukazom:

npm začetek

Nato si oglejte projekt v brskalniku na http://localhost: 3000/.

V mapi src vašega projekta je nekaj datotek, ki jih ne potrebujete. Izbrišite te datoteke: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Prepričajte se, da v razpoložljivih datotekah poiščete izjave o uvozu in odstranite vse sklice na izbrisane datoteke.

2. Ustvarite komponento TodoList

To je komponenta, v katero bomo implementirali vse kode, potrebne za seznam opravil. V mapi src ustvarite datoteko z imenom »TodoList.js«. Če želite nato preveriti, ali vse deluje, kot bi moralo, dodajte naslednjo kodo:

uvoz Reagiraj od'reagirati';
konst TodoList = () => {
vrnitev (




Pozdravljen svet </h2>
 </div>
 );
};


izvozprivzeto Seznam opravil;

Odprite datoteko App.js, uvozite komponento TodoList in jo upodobite znotraj komponente App. Videti bo nekako takole:

uvoz Reagiraj od'reagirati';
uvoz'./styles.css'
uvoz Seznam opravil od'./Seznam opravil';
konst Aplikacija = () => {
vrnitev (





 </div>
 );
};
izvozprivzeto aplikacija;

Pojdite v lokalni brskalnik, v katerem deluje localhost: 3000, in preverite, ali je »Hello World« pogumno napisano. Vse v redu? Na naslednji korak.

3. Obravnava vnosa in spremembe vnosa

Ta korak vam omogoča, da sprožite dogodek, ko v polje za vnos vnesete nalogo. Uvozite kavelj useState iz vašega paketa React. useState je kavelj React, ki vam omogoča učinkovito upravljanje stanja.

uvoz Odziv, {useState} od'reagirati';

Uporabite kavelj useState, da ustvarite spremenljivko stanja z imenom »inputTask« z začetno vrednostjo praznega niza. Poleg tega dodelite funkcijo »setInputTask« za posodobitev vrednosti »inputTask« glede na vnos uporabnika.

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

Ustvarite funkcijo z imenom "handleInputChange", pri čemer prevzamete parameter dogodka. Moral bi posodobiti stanje inputTask s funkcijo setInputTask. Dostopajte do vrednosti cilja dogodka z event.target.value. To se bo zagnalo vsakič, ko se spremeni vrednost vnosnega polja.

konst handleInputChange = (dogodek) => {
 setInputTask (event.target.value);
};

Vrnite nekaj elementov JSX. Prvi je naslov, ki se glasi "Moj seznam opravil", lahko se odločite za poljuben naslov. V svoje vhodne elemente vključite nekaj atributov. type=“text”: To določa vašo vrsto vnosa kot besedilo, vrednost={inputTask}: To poveže vrednost vnosnega polja s spremenljivko stanja inputTask in zagotovi, da odraža trenutno vrednost.onChange={handleInputChange}: To pokliče funkcijo handleInputChange, ko se spremeni vrednost vnosnega polja, in posodobi stanje inputTask.

"Narediti">
Moj seznam opravil</h1>
"vrh">
"vnos" vrsta="besedilo" vrednost={inputTask}
 onChange={handleInputChange} placeholder="Vnesite nalogo" />

Če nadaljujemo, ustvarite gumb, ki bo dodal vneseno nalogo na seznam.

Na tej stopnji bo tako izgledal rezultat vašega brskalnika.

4. Dodajte funkcionalnost gumbu "DODAJ".

Uporabi useState hook za ustvarjanje spremenljivke stanja z imenom 'list' z začetno vrednostjo prazne matrike. Spremenljivka 'setList' shrani niz nalog na podlagi uporabniškega vnosa.

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

Ustvarite funkcijo handleAddTodo, ki se bo zagnala, ko uporabnik klikne gumb »ADD« za dodajanje nove naloge. Vzame parameter opravila, ki predstavlja novo nalogo, ki jo vnese uporabnik. Nato ustvarite objekt newTask z edinstvenim ID-jem, ustvarjenim z Math.random(), in lastnostjo opravila, ki vsebuje vhodno besedilo.

Če nadaljujemo, posodobite stanje seznama z uporabo operatorja razširjanja […list], da ustvarite novo matriko z obstoječimi opravili na seznamu. Dodajte novo opravilo na konec matrike. To zagotavlja, da ne spremenimo prvotne matrike stanja. Končno ponastavite stanje inputTask na prazen niz in počistite vnosno polje, ko uporabnik klikne gumb.

konst handleAddTodo = (narediti) => {
konst nova naloga = {
 id: matematika.naključen(),
 opravilo: opravilo
 };
 setList([...seznam, novaOpravila]);
 setInputTask('');
};

Vključite onClick elementu gumba z besedilom "DODAJ". Ob kliku sproži handleAddTodo funkcija, ki doda novo nalogo v stanje seznama

Na tej stopnji bo rezultat vašega brskalnika videti enak, če pa po vnosu opravila kliknete gumb »DODAJ«, se polje za vnos izprazni. Če to deluje v redu, pojdite na naslednji korak.

5. Dodajte gumb za brisanje

To je zadnji korak, ki uporabnikom omogoča, da izbrišejo svoje opravilo, če so naredili napako ali so opravilo opravili. Ustvarite funkcijo handleDeleteTodo, ki deluje kot obravnavalec dogodkov, ko uporabnik klikne gumb »Izbriši« za določeno nalogo. Kot parameter vzame ID opravila.

Znotraj funkcije uporabite metodo filtra na matriki seznama, da ustvarite novo matriko newList, ki izključuje opravilo z ujemajočim se ID-jem. Metoda filtra se ponovi skozi vsak element v matriki seznama in vrne novo matriko, ki vsebuje samo elemente, ki izpolnjujejo dani pogoj. V tem primeru preverite, ali je ID vsake naloge enak ID-ju, posredovanemu kot parameter. Posodobite stanje seznama tako, da pokličete setList (newList), ki nastavi stanje na novo filtrirano matriko, s čimer učinkovito odstranite opravilo z ujemajočim se ID-jem s seznama.

konst handleDeleteTodo = (id) => {
konst newList = list.filter((narediti) =>
 todo.id !== id
 );
 setList (nov seznam); 
};

Uporabite metodo zemljevida za ponavljanje vsakega elementa v matriki seznama in vrnitev nove matrike. Nato ustvarite

  • element, ki predstavlja nalogo za vsak objekt opravila v matriki seznama. Pri upodabljanju seznama elementov v Reactu obvezno dodajte atribut ključ. Pomaga Reactu edinstveno prepoznati vsak element seznama in učinkovito posodobiti uporabniški vmesnik, ko se spremeni. V tem primeru nastavite ključ na ID vsakega predmeta opravila, da zagotovite edinstvenost.

    • Dostop do lastnosti opravila vsakega predmeta opravila. nazadnje ustvarite gumb, ki ob kliku sproži funkcijo handleDeleteTodo z ID-jem ustreznega opravila kot parametrom, kar nam omogoča, da opravilo izbrišemo s seznama.

    <ul>
    { list.map((narediti) => (
    <liclassName="naloga"ključ={todo.id}>
     {todo.todo}
    <gumbonClick={() => handleDeleteTodo (todo.id)}>Deletegumb>
    li>
    ))}
    ul>

    Tako bi morala izgledati vaša končna koda:

    uvoz Odziv, {useState} od'reagirati';
    konst TodoList = () => {
    konst [inputTask, setInputTask] = useState('');
    konst [seznam, setList] = useState([]);
    

    konst handleAddTodo = () => {
    konst nova naloga = {
     id: matematika.naključen(),
     todo: inputTask
     };
    

     setList([...seznam, nova naloga]);
     setInputTask('');
     };
    

    konst handleDeleteTodo = (id) => {
    konst newList = list.filter((narediti) => todo.id !== id);
     setList (nov seznam);
     };
    

    konst handleInputChange = (dogodek) => {
    setInputTask(dogodek.tarča.vrednost);
     };
    

    vrnitev (
    <divclassName="Narediti">
    

    Moj Za-narediSeznam

    

    <divclassName="vrh">
    <vnosclassName="vnos"vrsta="besedilo"vrednost={inputTask}
     onChange={handleInputChange} placeholder="Vnesite nalogo" />
    

    <gumbclassName="btn"onClick={handleAddTodo}>DODAJgumb>
    div>
    

    <ul>
     { list.map((narediti) => (
    <liclassName="naloga"ključ={todo.id}>
     {todo.todo}
    <gumbonClick={() => handleDeleteTodo (todo.id)}>
    Izbriši
    gumb>
    li>
     ))}
    ul>
    div>
     );
    };
    izvozprivzeto Seznam opravil;

    Tako bo vaš končni rezultat, pri čemer bosta gumba za dodajanje in brisanje delovala po pričakovanjih.

    Čestitamo, ustvarili ste seznam opravil, ki dodaja in briše naloge. Lahko greste še dlje z dodajanjem sloga in več funkcionalnosti.

    Uporabite projekte iz resničnega sveta, da se naučite reagirati

    Praksa je lahko učinkovit način učenja. Omogoča vam uporabo konceptov in najboljših praks React na praktičen način, s čimer okrepite svoje razumevanje ogrodja. Obstaja ogromno projektov, morali bi najti prave.