Naučit se novou technologii, jako je React, může být matoucí bez praktických zkušeností. Jako vývojář je vytváření projektů v reálném světě jedním z nejúčinnějších způsobů, jak porozumět konceptům a funkcím.

Sledujte proces vytváření jednoduchého seznamu úkolů pomocí Reactu a rozšiřte své porozumění základům Reactu.

Předpoklady pro vytvoření seznamu úkolů

Než začnete s tímto projektem, existuje několik požadavků. Musíte mít základní znalosti o HTML, CSS, JavaScript, ES6a Reagovat. Musíte mít Node.js a npm, správce balíčků JavaScript. Potřebujete také editor kódu, jako je Visual Studio Code.

Zde je CSS, které bude tento projekt používat:

/* styles.css */
.Aplikace {
rodina písem: sans-serif;
Zobrazit: flex;
ospravedlnit-obsah: centrum;
zarovnat-položky: centrum;
výška: 100vh;
}
.Dělat {
barva pozadí: pšenice;
zarovnání textu: centrum;
šířka: 50%;
vycpávka: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
okraj: auto;
}





instagram viewer

ul {
list-style-type: žádný;
vycpávka: 10px;
okraj: 0;
}
knoflík {
šířka: 70px;
výška: 35px;
barva pozadí: pískově hnědé;
okraj: žádný;
velikost písma: 15px;
tloušťka písma: 800;
hraniční poloměr: 4px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.vstup {
okraj: žádný;
šířka: 340px;
výška: 35px;
hraniční poloměr: 9px;
zarovnání textu: centrum;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Horní {
Zobrazit: flex;
ospravedlnit-obsah: centrum;
mezera: 12px;
}
li {
Zobrazit: flex;
ospravedlnit-obsah: prostorově rovnoměrně;
zarovnat-položky: centrum;
vycpávka: 10px;
}
li:před {
obsah: "*";
okraj-pravý: 5px;
}

1. Nastavení prostředí projektu

Tato fáze zahrnuje všechny příkazy a soubory potřebné k nastavení projektu. Chcete-li začít, vytvořte nový projekt React. Otevřete terminál a spusťte tento příkaz:

npx create-react-app todo-list

Instalace všech potřebných souborů a balíčků trvá několik minut. Vytvoří novou aplikaci React s názvem todo-list. Jakmile uvidíte něco takového, jste na správné cestě:

Přejděte do adresáře vašeho nově vytvořeného projektu pomocí tohoto příkazu:

cd seznam úkolů

Spusťte svůj projekt lokálně pomocí tohoto příkazu:

npm start

A poté si projekt prohlédněte ve svém prohlížeči na adrese http://localhost: 3000/.

Ve složce src vašeho projektu je několik souborů, které nepotřebujete. Smazat tyto soubory: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Ujistěte se, že hledáte příkazy k importu v dostupných souborech a odstraňte všechny odkazy na odstraněné soubory.

2. Vytvořte komponentu TodoList

Toto je komponenta, do které budeme implementovat všechny kódy potřebné pro seznam úkolů. Ve složce src vytvořte soubor s názvem „TodoList.js“. Poté, abyste otestovali, že vše funguje, jak má, přidejte následující kód:

import Reagovat z'reagovat';
konst TodoList = () => {
vrátit se (



Ahoj světe </h2>
 </div>
 );
};
vývoznívýchozí Seznam úkolů; 

Otevřete svůj soubor App.js, importujte komponentu TodoList a vykreslete ji uvnitř komponenty App. Bude to vypadat nějak takto:

import Reagovat z'reagovat';
import'./styles.css'
import Seznam úkolů z'./Seznam úkolů';
konst Aplikace = () => {
vrátit se (




 </div>
 );
};
vývoznívýchozí Aplikace;

Přejděte do místního prohlížeče, který má spuštěný localhost: 3000, a zkontrolujte, zda je tučně napsáno „Hello World“. Vše dobré? K dalšímu kroku.

3. Ovládejte vstup a změnu vstupu

Tento krok vám umožní spustit událost, když zadáte úkol do vstupního pole. Importujte háček useState z vašeho balíčku React. useState je hák React, který vám umožní efektivně spravovat stav.

import Reagovat, { useState } z'reagovat';

Použijte háček useState k vytvoření stavové proměnné s názvem „inputTask“ s počáteční hodnotou prázdného řetězce. Kromě toho přiřaďte funkci „setInputTask“ pro aktualizaci hodnoty „inputTask“ na základě zadání uživatele.

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

Vytvořte funkci nazvanou „handleInputChange“ s parametrem události. Měl by aktualizovat stav inputTask pomocí funkce setInputTask. Získejte přístup k hodnotě cíle události pomocí event.target.value. To se spustí vždy, když se změní hodnota vstupního pole.

konst handleInputChange = (událost) => {
 setInputTask (event.target.value);
}; 

Vraťte několik prvků JSX. První je nadpis, který zní „Můj seznam úkolů“, můžete se rozhodnout pro jakýkoli nadpis, který se vám líbí. Zahrňte do vstupních prvků několik atributů. type=“text”: Toto určuje váš typ vstupu jako text, value={inputTask}: Toto sváže hodnotu vstupního pole se stavovou proměnnou inputTask a zajistí, že bude odrážet aktuální hodnotu.onChange={handleInputChange}: Volá funkci handleInputChange, když se změní hodnota vstupního pole, čímž se aktualizuje stav inputTask.

"Dělat">
Můj seznam úkolů</h1>
"Horní">
"vstup" typ="text" value={inputTask}
 onChange={handleInputChange} zástupný symbol="Zadejte úkol" />

Pokračujte vytvořením tlačítka, které přidá zadaný úkol do seznamu.

"btn"> PŘIDAT</button>
 </div>
</div>

V této fázi bude výstup vašeho prohlížeče vypadat takto.

4. Přidejte funkci k tlačítku "ADD".

Použijte useState háček k vytvoření stavové proměnné s názvem „seznam“ s počáteční hodnotou prázdného pole. Proměnná ‚setList‘ ukládá pole úkolů na základě vstupu uživatele.

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

Vytvořte funkci handleAddTodo, která se spustí, když uživatel klikne na tlačítko „ADD“ pro přidání nového úkolu. Přebírá parametr todo, který představuje nový úkol zadaný uživatelem. Poté vytvořte objekt newTask s jedinečným ID vygenerovaným pomocí Math.random() a vlastností todo, která obsahuje vstupní text.

Nyní aktualizujte stav seznamu pomocí operátoru spread […list] a vytvořte nové pole se stávajícími úkoly v seznamu. Připojte newTask na konec pole. To zajišťuje, že nezměníme pole původního stavu. Nakonec resetujte stav inputTask na prázdný řetězec a vymažte vstupní pole, když uživatel klikne na tlačítko.

konst handleAddTodo = (dělat) => {
konst newTask = {
 id: Matematika.náhodný(),
 todo: todo
 };
 setList([...seznam, newTask]);
 setInputTask('');
}; 

Zahrnout při kliknutí atribut k prvku tlačítka s textem "ADD". Po kliknutí se spustí zvládnoutAddTodo funkce, která přidá nový úkol do stavu seznamu

 handleAddTodo (inputTask)}>ADD</button> 

V této fázi bude výstup vašeho prohlížeče vypadat stejně, ale pokud po zadání úkolu kliknete na tlačítko "ADD", vstupní pole se vyprázdní. Pokud to funguje dobře, přejděte k dalšímu kroku.

5. Přidat tlačítko Odstranit

Toto je poslední krok, který uživatelům umožní smazat svůj úkol, pokud udělali chybu nebo úkol dokončili. Vytvořte funkci handleDeleteTodo, která funguje jako obslužná rutina události, když uživatel klepne na tlačítko „Smazat“ pro konkrétní úlohu. Jako parametr bere id úlohy.

Uvnitř funkce použijte metodu filtru na poli seznamu k vytvoření nového pole newList, které vylučuje úlohu s odpovídajícím id. Metoda filtru prochází každou položku v poli seznamu a vrací nové pole obsahující pouze položky, které splňují danou podmínku. V tomto případě zkontrolujte, zda se ID každé úlohy rovná ID předaném jako parametr. Aktualizujte stav seznamu voláním setList (newList), který nastaví stav na nové filtrované pole a efektivně odstraní úlohu s odpovídajícím id ze seznamu.

konst handleDeleteTodo = (id) => {
konst newList = seznam.filtr((dělat) =>
 todo.id !== id
 );
 setList (newList); 
};

Pomocí metody map iterujte každou položku v poli seznamu a vraťte nové pole. Poté vytvořte

Přístup k vlastnosti todo každého objektu úkolu. nakonec vytvořte tlačítko, které po kliknutí spustí funkci handleDeleteTodo s id odpovídajícího úkolu jako parametrem, což nám umožní odstranit úkol ze seznamu.

<ul>
{ seznam.mapa((dělat) => (
<lijméno třídy="úkol"klíč={todo.id}>
 {todo.todo}
<knoflíkpři kliknutí={() => handleDeleteTodo (todo.id)}>Deleteknoflík>
li>
))}
ul>

Takto by měl váš finální kód vypadat:

import Reagovat, { useState } z'reagovat';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [seznam, setList] = useState([]);
konst handleAddTodo = () => {
konst newTask = {
 id: Matematika.náhodný(),
 úkol: inputTask
 };
 setList([...seznam, nová úloha]);
 setInputTask('');
 };
konst handleDeleteTodo = (id) => {
konst newList = seznam.filtr((dělat) => todo.id !== id);
 setList (newList);
 };
konst handleInputChange = (událost) => {
setInputTask(událost.cílová.hodnota);
 };
vrátit se (
<divjméno třídy="Dělat">

Můj To-DělatSeznam

<divjméno třídy="Horní">
<vstupjméno třídy="vstup"typ="text"hodnota={inputTask}
 onChange={handleInputChange} zástupný symbol="Zadejte úkol" />
<knoflíkjméno třídy="btn"při kliknutí={handleAddTodo}>PŘIDATknoflík>
div>
<ul>
 { seznam.mapa((dělat) => (
<lijméno třídy="úkol"klíč={todo.id}>
 {todo.todo}
<knoflíkpři kliknutí={() => handleDeleteTodo (todo.id)}>
Vymazat
knoflík>
li>
 ))}
ul>
div>
 );
};
vývoznívýchozí Seznam úkolů; 

Takto bude vypadat váš konečný výstup, přičemž tlačítka pro přidání a odstranění budou fungovat podle očekávání.

Gratulujeme, vytvořili jste seznam úkolů, který přidává a odstraňuje úkoly. Můžete jít dále přidáním stylu a dalších funkcí.

Používejte Real World Projects, abyste se naučili React

Praxe může být efektivním způsobem učení. Umožňuje vám prakticky aplikovat koncepty a osvědčené postupy Reactu, čímž posílí vaše chápání rámce. Existuje spousta projektů, měli byste najít ty správné.