Uuden tekniikan, kuten Reactin, oppiminen voi olla hämmentävää ilman käytännön kokemusta. Kehittäjänä tosielämän projektien rakentaminen on yksi tehokkaimmista tavoista ymmärtää käsitteitä ja ominaisuuksia.

Seuraa yksinkertaisen tehtävälistan luomisprosessia Reactin avulla ja paranna ymmärrystäsi Reactin perusteista.

Tehtäväluettelon luomisen edellytykset

Ennen kuin aloitat tämän projektin, sinulla on useita vaatimuksia. Sinulla tulee olla perustiedot seuraavista: HTML, CSS, JavaScript, ES6ja Reagoi. Sinulla on oltava Node.js ja npm, JavaScript-pakettien hallinta. Tarvitset myös koodieditorin, kuten Visual Studio Coden.

Tässä on CSS, jota tämä projekti käyttää:

/* styles.css */
.Sovellus {
font-perhe: sans-serif;
näyttö: flex;
perustele-sisältö: keskusta;
kohdista-kohteet: keskusta;
korkeus: 100vh;
}
.Tehdä {
taustaväri: vehnä;
tekstin tasaus: keskusta;
leveys: 50%;
pehmuste: 20px;
laatikko-varjo: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marginaali: auto;
}





instagram viewer

ul {
lista-tyylinen: ei mitään;
pehmuste: 10px;
marginaali: 0;
}
-painiketta {
leveys: 70px;
korkeus: 35px;
taustaväri: hiekkaruskea;
rajaa: ei mitään;
Fonttikoko: 15px;
fontin paino: 800;
raja-säde: 4px;
laatikko-varjo: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.input {
rajaa: ei mitään;
leveys: 340px;
korkeus: 35px;
raja-säde: 9px;
tekstin tasaus: keskusta;
laatikko-varjo: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Ylös {
näyttö: flex;
perustele-sisältö: keskusta;
aukko: 12px;
}
li {
näyttö: flex;
perustele-sisältö: tilaa tasaisesti;
kohdista-kohteet: keskusta;
pehmuste: 10px;
}
li:ennen {
sisältö: "*";
marginaali-oikea: 5px;
}

1. Määritä projektiympäristö

Tämä vaihe sisältää kaikki komennot ja tiedostot, joita tarvitaan projektin määrittämiseen. Aloita luomalla uusi React-projekti. Avaa pääte ja suorita tämä komento:

npx create-react-app todo-list

Kaikkien tarvittavien tiedostojen ja pakettien asentaminen kestää muutaman minuutin. Se luo uuden React-sovelluksen nimeltä todo-list. Kun näet jotain tällaista, olet oikeilla jäljillä:

Siirry juuri luomasi projektisi hakemistoon tällä komennolla:

cd-tehtävälista

Suorita projektisi paikallisesti tällä komennolla:

npm aloitus

Ja sitten tarkastella projektia selaimessasi osoitteessa http://localhost: 3000/.

Projektisi src-kansiossa on pari tiedostoa, joita et tarvitse. Poista nämä tiedostot: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Varmista, että etsit käytettävissä olevista tiedostoista tuontilausekkeita ja poista kaikki viittaukset poistettuihin tiedostoihin.

2. Luo TodoList-komponentti

Tämä on komponentti, jonka toteutamme kaikki tehtäväluetteloon tarvittavat koodit. Luo src-kansioosi tiedosto nimeltä "TodoList.js". Lisää seuraava koodi testataksesi, että kaikki toimii kuten pitääkin:

tuonti Reagoi alkaen'reagoi';
konst TodoList = () => {
palata (



Hei maailma </h2>
 </div>
 );
};
viedäoletuksena Tehtävälista; 

Avaa App.js-tiedosto, tuo TodoList-komponentti ja renderöi se App-komponentin sisällä. Se näyttää suunnilleen tältä:

tuonti Reagoi alkaen'reagoi';
tuonti'./styles.css'
tuonti Tehtävälista alkaen'./Tehtävälista';
konst Sovellus = () => {
palata (




 </div>
 );
};
viedäoletuksena Sovellus;

Siirry paikalliseen selaimeesi, jossa on localhost: 3000 käynnissä ja tarkista, että "Hello World" on kirjoitettu rohkeasti. Kaikki hyvin? Seuraavaan vaiheeseen.

3. Käsittele syöttöä ja syötteen muutosta

Tämän vaiheen avulla voit käynnistää tapahtuman, kun kirjoitat tehtävän syöttöruutuun. Tuo useState-koukku React-paketista. useState on React-koukku, jonka avulla voit hallita tilaa tehokkaasti.

tuonti Reagoi, { useState } alkaen'reagoi';

Käytä useState-koukkua luodaksesi tilamuuttujan nimeltä "inputTask", jonka alkuarvo on tyhjä merkkijono. Lisäksi määritä "setInputTask" -toiminto päivittämään "inputTask" -arvon käyttäjän syötteen perusteella.

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

Luo funktio nimeltä "handleInputChange" ja ota tapahtumaparametri. Sen pitäisi päivittää inputTask-tila käyttämällä setInputTask-toimintoa. Pääset tapahtuman kohteen arvoon käyttämällä event.target.value. Tämä suoritetaan aina, kun syöttökentän arvo muuttuu.

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

Palauta pari JSX-elementtiä. Ensimmäinen on otsikko, jossa lukee "My Todo-List". Voit valita minkä tahansa otsikon. Sisällytä syöttöelementteihin muutama attribuutti. type="teksti": Tämä määrittää syöttötyyppisi tekstiksi, value={inputTask}: Tämä sitoo syöttökentän arvon inputTask-tilamuuttujaan ja varmistaa, että se heijastaa nykyistä arvoa.onChange={handleInputChange}: Tämä kutsuu handleInputChange-funktiota, kun syöttökentän arvo muuttuu ja päivittää inputTask-tilan.

"Tehdä">
Tehtävälistani</h1>
"Huippu">
"syöttö" tyyppi="teksti" value={inputTask}
 onChange={handleInputChange} paikkamerkki="Syötä tehtävä" />

Siirry eteenpäin luomalla painike, joka lisää syötetyn tehtävän luetteloon.

"btn">LISÄÄ</button>
 </div>
</div>

Tässä vaiheessa selaintulostus näyttää tältä.

4. Lisää toimintoja "LISÄÄ"-painikkeeseen

Käytä useState koukku luodaksesi tilamuuttujan nimeltä lista, jonka alkuarvo on tyhjä. 'setList'-muuttuja tallentaa joukon tehtäviä käyttäjän syötteen perusteella.

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

Luo toiminto handleAddTodo, joka käynnistyy, kun käyttäjä lisää uuden tehtävän napsauttamalla ADD-painiketta. Se ottaa todo-parametrin, joka edustaa käyttäjän syöttämää uutta tehtävää. Luo sitten objekti newTask, jolla on yksilöllinen tunnus, joka on luotu käyttämällä Math.random()-komentoa, ja todo-ominaisuus, joka sisältää syötetyn tekstin.

Päivitä listan tila käyttämällä hajaoperaattoria […list] luodaksesi uuden taulukon luettelossa olevista tehtävistä. Liitä uusiTask taulukon loppuun. Tämä varmistaa, että emme mutatoi alkuperäistä tilataulukkoa. Lopuksi palauta inputTask-tila tyhjäksi merkkijonoksi, jolloin syöttökenttä tyhjennetään, kun käyttäjä napsauttaa painiketta.

konst handleAddTodo = (tehdä) => {
konst uusiTask = {
 id: Matematiikka.random(),
 tehdä: tehdä
 };
 setList([...luettelo, newTask]);
 setInputTask('');
}; 

Sisällytä klikkaamalla ominaisuus painikeelementille tekstillä "LISÄÄ". Kun sitä napsautetaan, se laukaisee handleAddTodo toiminto, joka lisää uuden tehtävän luettelotilaan

 handleAddTodo (inputTask)}>LISÄÄ</button> 

Tässä vaiheessa selaimesi tulos näyttää samalta, mutta jos napsautat "LISÄÄ"-painiketta tehtävän syöttämisen jälkeen, syöttökenttä tyhjenee. Jos se toimii hyvin, siirry seuraavaan vaiheeseen.

5. Lisää poistopainike

Tämä on viimeinen vaihe, jonka avulla käyttäjät voivat poistaa tehtävänsä, jos he ovat tehneet virheen tai suorittaneet tehtävän. Luo handleDeleteTodo-toiminto, joka toimii tapahtumakäsittelijänä, kun käyttäjä napsauttaa "Poista"-painiketta tietyn tehtävän kohdalla. Se ottaa tehtävän id: n parametrina.

Käytä funktion sisällä luettelotaulukon suodatusmenetelmää luodaksesi uuden taulukon newList, joka sulkee pois tehtävän, jolla on vastaava tunnus. Suodatusmenetelmä toistuu luettelotaulukon jokaisen kohteen läpi ja palauttaa uuden taulukon, joka sisältää vain ne kohteet, jotka täyttävät tietyn ehdon. Tarkista tässä tapauksessa, onko kunkin tehtävän tunnus sama kuin parametrina annettu tunnus. Päivitä luettelon tila kutsumalla setList (newList), joka asettaa tilan uudelle suodatetulle taulukolle ja poistaa tehokkaasti vastaavan tunnuksen sisältävän tehtävän luettelosta.

konst handleDeleteTodo = (id) => {
konst newList = list.filter((tehdä) =>
 todo.id !== id
 );
 setList (newList); 
};

Käytä karttamenetelmää iteroidaksesi luettelotaulukon jokaisen kohteen yli ja palauttaaksesi uuden taulukon. Luo sitten an

Käytä kunkin tehtäväobjektin todo-ominaisuutta. lopuksi luo painike, jota napsautettuna laukaisee handleDeleteTodo-toiminnon parametrina vastaavan tehtävän id, jolloin voimme poistaa tehtävän luettelosta.

<ul>
{ list.map((tehdä) => (
<liluokan nimi="tehtävä"avain={todo.id}>
 {todo.todo}
<-painikettaklikkaamalla={() => handleDeleteTodo (todo.id)}> Poista-painiketta>
li>
))}
ul>

Lopullisen koodisi pitäisi näyttää tältä:

tuonti Reagoi, { useState } alkaen'reagoi';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [lista, setList] = useState([]);
konst handleAddTodo = () => {
konst uusiTask = {
 id: Matematiikka.random(),
 tehtävä: inputTask
 };
 setList([...lista, newTask]);
 setInputTask('');
 };
konst handleDeleteTodo = (id) => {
konst newList = list.filter((tehdä) => todo.id !== id);
 setList (newList);
 };
konst handleInputChange = (tapahtuma) => {
setInputTask(tapahtuma.kohde.arvo);
 };
palata (
<divluokan nimi="Tehdä">

Minun vastaanottajani-TehdäLista

<divluokan nimi="Huippu">
<syöttöluokan nimi="syöttö"tyyppi="teksti"arvo={inputTask}
 onChange={handleInputChange} paikkamerkki="Syötä tehtävä" />
<-painikettaluokan nimi="btn"klikkaamalla={handleAddTodo}>LISÄTÄ-painiketta>
div>
<ul>
 { list.map((tehdä) => (
<liluokan nimi="tehtävä"avain={todo.id}>
 {todo.todo}
<-painikettaklikkaamalla={() => handleDeleteTodo (todo.id)}>
Poistaa
-painiketta>
li>
 ))}
ul>
div>
 );
};
viedäoletuksena Tehtävälista; 

Tämä tulee olemaan lopullinen tulos, jossa sekä lisäys- että poistopainikkeet toimivat odotetusti.

Onnittelut, olet luonut tehtäväluettelon, joka lisää ja poistaa tehtäviä. Voit mennä pidemmälle lisäämällä tyyliä ja enemmän toimintoja.

Käytä oikean maailman projekteja oppiaksesi reagoimaan

Harjoittelu voi olla tehokas tapa oppia. Sen avulla voit soveltaa React-konsepteja ja parhaita käytäntöjä käytännönläheisesti, mikä vahvistaa ymmärrystäsi viitekehyksestä. Projekteja on paljon, sinun pitäisi löytää oikeat.