Učenie sa novej technológie, ako je React, môže byť mätúce bez praktických skúseností. Ako vývojár je budovanie projektov v reálnom svete jedným z najefektívnejších spôsobov, ako pochopiť koncepty a funkcie.

Sledujte proces vytvárania jednoduchého zoznamu úloh s Reactom a zvýšte svoje pochopenie základov Reactu.

Predpoklady na vytvorenie zoznamu úloh

Pred začatím tohto projektu existuje niekoľko požiadaviek. Musíte mať základné znalosti o HTML, CSS, JavaScript, ES6a Reagovať. Musíte mať Node.js a npm, správca balíkov JavaScript. Potrebujete tiež editor kódu, napríklad Visual Studio Code.

Tu je CSS, ktorý bude tento projekt používať:

/* styles.css */
.App {
font-family: sans-serif;
displej: flex;
ospravedlniť-obsah: stred;
align-items: stred;
výška: 100vh;
}
.Robiť {
farba pozadia: pšenica;
zarovnanie textu: stred;
šírka: 50%;
vypchávka: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marža: auto;
}
ul {
list-style-type: žiadny;
vypchávka: 10px;
marža: 0;
}





instagram viewer

tlačidlo {
šírka: 70px;
výška: 35px;
farba pozadia: pieskovohnedá;
hranica: žiadny;
veľkosť písma: 15px;
font-weight: 800;
hraničný polomer: 4px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.vstup {
hranica: žiadny;
šírka: 340px;
výška: 35px;
hraničný polomer: 9px;
zarovnanie textu: stred;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Top {
displej: flex;
ospravedlniť-obsah: stred;
medzera: 12px;
}
li {
displej: flex;
ospravedlniť-obsah: priestor-rovnomerne;
align-items: stred;
vypchávka: 10px;
}
li:predtým {
obsahu: "*";
okraj-pravý: 5px;
}

1. Nastaviť projektové prostredie

Táto fáza obsahuje všetky príkazy a súbory potrebné na nastavenie projektu. Ak chcete začať, vytvorte nový projekt React. Otvorte terminál a spustite tento príkaz:

npx create-react-app todo-list

Inštalácia všetkých potrebných súborov a balíkov trvá niekoľko minút. Vytvorí novú aplikáciu React s názvom zoznam úloh. Keď uvidíte niečo takéto, ste na správnej ceste:

Pomocou tohto príkazu prejdite do adresára vášho novovytvoreného projektu:

cd zoznam úloh

Spustite svoj projekt lokálne pomocou tohto príkazu:

npm štart

A potom si zobrazte projekt vo svojom prehliadači na adrese http://localhost: 3000/.

V priečinku src vášho projektu je niekoľko súborov, ktoré nepotrebujete. Odstráňte tieto súbory: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Uistite sa, že v dostupných súboroch hľadáte príkazy na import a odstráňte všetky odkazy na odstránené súbory.

2. Vytvorte komponent TodoList

Toto je komponent, do ktorého implementujeme všetky kódy potrebné pre zoznam úloh. Vytvorte súbor s názvom „TodoList.js“ v priečinku src. Potom, aby ste otestovali, či všetko funguje, ako má, pridajte nasledujúci kód:

importovať Reagovať od'reagovať';
konšt TodoList = () => {
vrátiť (



Ahoj svet </h2>
 </div>
 );
};
exportpredvolená Zoznam úloh; 

Otvorte svoj súbor App.js, importujte komponent TodoList a vykreslite ho v komponente App. Bude to vyzerať asi takto:

importovať Reagovať od'reagovať';
importovať'./styles.css'
importovať Zoznam úloh od'./Zoznam úloh';
konšt Aplikácia = () => {
vrátiť (




 </div>
 );
};
exportpredvolená App;

Prejdite do miestneho prehliadača, ktorý má spustený localhost: 3000 a skontrolujte, či je tučne napísané „Hello World“. Všetko dobré? K ďalšiemu kroku.

3. Ovládanie vstupu a zmeny vstupu

Tento krok vám umožňuje spustiť udalosť, keď zadáte úlohu do vstupného poľa. Importujte háčik useState z balíka React. useState je hák React, ktorý vám umožňuje efektívne spravovať stav.

importovať Reagovať, { useState } od'reagovať';

Použite háčik useState na vytvorenie stavovej premennej s názvom „inputTask“ s počiatočnou hodnotou prázdneho reťazca. Okrem toho priraďte funkciu „setInputTask“ na aktualizáciu hodnoty „inputTask“ na základe vstupu používateľa.

konšt [inputTask, setInputTask] = useState("");

Vytvorte funkciu s názvom „handleInputChange“ s parametrom udalosti. Mala by aktualizovať stav inputTask pomocou funkcie setInputTask. Prístup k hodnote cieľa udalosti získate pomocou event.target.value. Toto sa spustí vždy, keď sa zmení hodnota vstupného poľa.

konšt handleInputChange = (udalosť) => {
 setInputTask (event.target.value);
}; 

Vráťte niekoľko prvkov JSX. Prvým je nadpis, ktorý znie „Môj zoznam úloh“, môžete si vybrať ľubovoľný nadpis, ktorý sa vám páči. Zahrňte do vstupných prvkov niekoľko atribútov. type=“text”: Toto určuje váš typ vstupu ako text, value={inputTask}: Toto spája hodnotu vstupného poľa so stavovou premennou inputTask, čím sa zabezpečí, že bude odrážať aktuálnu hodnotu.onChange={handleInputChange}: Toto zavolá funkciu handleInputChange, keď sa zmení hodnota vstupného poľa, čím sa aktualizuje stav inputTask.

"Robiť">
Môj zoznam úloh</h1>
"vrchol">
"vstup" typ="text" value={inputTask}
 onChange={handleInputChange} zástupný symbol="Zadajte úlohu" />

Pokračujte vytvorením tlačidla, ktoré pridá zadanú úlohu do zoznamu.

"btn">PRIDAŤ</button>
 </div>
</div>

V tejto fáze bude výstup vášho prehliadača vyzerať takto.

4. Pridajte funkciu k tlačidlu „PRIDAŤ“.

Použi useState háčik na vytvorenie stavovej premennej s názvom „zoznam“ s počiatočnou hodnotou prázdneho poľa. Premenná „setList“ ukladá pole úloh na základe vstupu používateľa.

konšt [zoznam, setZoznam] = useState([]);

Vytvorte funkciu handleAddTodo, ktorá sa spustí, keď používateľ klikne na tlačidlo „ADD“ na pridanie novej úlohy. Preberá parameter todo, ktorý predstavuje novú úlohu zadanú používateľom. Potom vytvorte objekt newTask s jedinečným ID vygenerovaným pomocou Math.random() a vlastnosťou todo, ktorá obsahuje vstupný text.

Pokračujte a aktualizujte stav zoznamu pomocou operátora šírenia […list] na vytvorenie nového poľa s existujúcimi úlohami v zozname. Pripojte newTask na koniec poľa. To zaisťuje, že nezmeníme pole pôvodného stavu. Nakoniec obnovte stav inputTask na prázdny reťazec a vymažte vstupné pole, keď používateľ klikne na tlačidlo.

konšt handleAddTodo = (robiť) => {
konšt newTask = {
 id: Matematika.random(),
 todo: todo
 };
 setList([...zoznam, novaUloha]);
 setInputTask('');
}; 

Zahrňte po kliknutí atribút k prvku button s textom "ADD". Po kliknutí sa spustí zvládnuťAddTodo funkciu, ktorá pridá novú úlohu do stavu zoznamu

 handleAddTodo (inputTask)}>ADD</button> 

V tejto fáze bude výstup vášho prehliadača vyzerať rovnako, ale ak po zadaní úlohy kliknete na tlačidlo "PRIDAŤ", vstupné pole sa vyprázdni. Ak to funguje dobre, prejdite na ďalší krok.

5. Pridať tlačidlo Odstrániť

Toto je posledný krok, ktorý umožní používateľom odstrániť svoju úlohu, ak urobili chybu alebo dokončili úlohu. Vytvorte funkciu handleDeleteTodo, ktorá funguje ako obsluha udalosti, keď používateľ klikne na tlačidlo „Odstrániť“ pre konkrétnu úlohu. Ako parameter berie id úlohy.

Vo funkcii použite metódu filtrovania v poli zoznamu na vytvorenie nového poľa newList, ktoré vylučuje úlohu so zodpovedajúcim ID. Metóda filtra iteruje každú položku v poli zoznamu a vráti nové pole obsahujúce iba položky, ktoré spĺňajú danú podmienku. V tomto prípade skontrolujte, či sa ID každej úlohy zhoduje s ID odovzdaným ako parameter. Aktualizujte stav zoznamu volaním setList (newList), ktorý nastaví stav na nové filtrované pole, čím efektívne odstráni úlohu so zodpovedajúcim ID zo zoznamu.

konšt handleDeleteTodo = (id) => {
konšt newList = zoznam.filter((robiť) =>
 todo.id !== id
 );
 setList (newList); 
};

Použite metódu mapy na iteráciu každej položky v poli zoznamu a vrátenie nového poľa. Potom vytvorte

Prístup k vlastnosti todo každého objektu úlohy. nakoniec vytvorte tlačidlo, ktoré po kliknutí spustí funkciu handleDeleteTodo s id zodpovedajúcej úlohy ako parametra, čo nám umožní odstrániť úlohu zo zoznamu.

<ul>
{ list.map((robiť) => (
<liclassName="úloha"kľúč={todo.id}>
 {todo.todo}
<tlačidlopo kliknutí={() => handleDeleteTodo (todo.id)}>Deletetlačidlo>
li>
))}
ul>

Takto by mal vyzerať váš konečný kód:

importovať Reagovať, { useState } od'reagovať';
konšt TodoList = () => {
konšt [inputTask, setInputTask] = useState('');
konšt [zoznam, setList] = useState([]);
konšt handleAddTodo = () => {
konšt newTask = {
 id: Matematika.random(),
 todo: inputTask
 };
 setList([...zoznam, Nová úloha]);
 setInputTask('');
 };
konšt handleDeleteTodo = (id) => {
konšt newList = zoznam.filter((robiť) => todo.id !== id);
 setList (newList);
 };
konšt handleInputChange = (udalosť) => {
setInputTask(udalosť.cieľ.hodnota);
 };
vrátiť (
<divclassName="Robiť">

Môj Komu-DoZoznam

<divclassName="vrchol">
<vstupclassName="vstup"typu="text"hodnotu={inputTask}
 onChange={handleInputChange} zástupný symbol="Zadajte úlohu" />
<tlačidloclassName="btn"po kliknutí={handleAddTodo}>PRIDAŤtlačidlo>
div>
<ul>
 { list.map((robiť) => (
<liclassName="úloha"kľúč={todo.id}>
 {todo.todo}
<tlačidlopo kliknutí={() => handleDeleteTodo (todo.id)}>
Odstrániť
tlačidlo>
li>
 ))}
ul>
div>
 );
};
exportpredvolená Zoznam úloh; 

Takto bude vyzerať váš konečný výstup, pričom tlačidlá na pridanie a odstránenie budú fungovať podľa očakávania.

Gratulujeme, vytvorili ste zoznam úloh, ktorý pridáva a odstraňuje úlohy. Môžete ísť ďalej pridaním štýlu a ďalších funkcií.

Naučte sa React pomocou projektov zo skutočného sveta

Cvičenie môže byť efektívnym spôsobom učenia. Umožňuje vám to aplikovať koncepty a osvedčené postupy Reactu praktickým spôsobom, čím sa posilní vaše chápanie rámca. Existuje veľa projektov, mali by ste nájsť tie správne.