Sestavte si jednoduchou aplikaci se seznamem úkolů pomocí React

Sestavte si jednoduchou aplikaci se seznamem úkolů pomocí React
Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

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.





MUO video dne POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM

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



jak změnit ikonu ve Windows 10

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, ES6 a 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 */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. Nastavte 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ě:

Seznam příkazů ke spuštění v adresáři.

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



 cd todo-list

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

 npm start

A poté si projekt zobrazte 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 .

Soubory ve složce src aplikace React.

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 React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

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

jak hrát bluetooth hudbu v autě 
 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

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 React, { useState } from 'react';

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.

 const [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.

 const handleInputChange = (event) => { 
    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.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

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

         <button className="btn">ADD</button> 
   </div> 
</div>

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

Prázdný seznam úkolů.

4. Přidejte funkcionalitu 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.

 const [list, setList] = useState([]);

Vytvořte funkci handleAddTodo, která se spustí, když uživatel klikne na tlačítko „ADD“ pro přidání nové úlohy. 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.

žert telefonní číslo rozdat 
 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Zahrnout onClick atribut k prvku tlačítka s textem 'ADD'. Po kliknutí se spustí funkce handleAddTodo, která přidá do stavu seznamu novou úlohu

 <button onClick={() => 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řidejte 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.

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

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

  • , který bude představovat úkol pro každý objekt úkolu v poli seznamu. Při vykreslování seznamu prvků v Reactu nezapomeňte přidat atribut key. Pomáhá Reactu jedinečně identifikovat každou položku seznamu a efektivně aktualizovat uživatelské rozhraní, když se změní. V tomto případě nastavte klíč na id každého objektu úkolu, abyste zajistili jedinečnost.

    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> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

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

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    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í.

    Seznam úkolů s několika úkoly.

    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é.