Bouw een eenvoudige takenlijst-app met React

Bouw een eenvoudige takenlijst-app met React
Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Het leren van een nieuwe technologie zoals React kan verwarrend zijn zonder praktische ervaring. Als ontwikkelaar is het bouwen van real-world projecten een van de meest effectieve manieren om concepten en functies te begrijpen.





MUO-video van de dag SCROLL OM DOOR TE GAAN MET INHOUD

Volg het proces van het maken van een eenvoudige takenlijst met React en vergroot uw begrip van de basisprincipes van React.



Vereisten voor het maken van een takenlijst

Voordat u aan dit project begint, zijn er verschillende vereisten. U moet een basiskennis hebben van het volgende, HTML, CSS, JavaScript, ES6 , en Reageren. U moet Node.js en npm, de JavaScript-pakketbeheerder . Je hebt ook een code-editor nodig, zoals Visual Studio Code.





Dit is de CSS die dit project zal gebruiken:

 /* 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. Projectomgeving opzetten

Deze fase bevat alle opdrachten en bestanden die nodig zijn om het project op te zetten. Maak om te beginnen een nieuw React-project aan. Open een terminal en voer deze opdracht uit:



 npx create-react-app todo-list

Dit duurt een paar minuten om alle benodigde bestanden en pakketten te installeren. Het creëert een nieuwe React-applicatie met de naam todo-list. Zodra je zoiets ziet, ben je op de goede weg:

Een lijst met opdrachten die in een map moeten worden uitgevoerd.

Navigeer naar de map van uw nieuw gemaakte project met behulp van deze opdracht:



 cd todo-list

Voer uw project lokaal uit met deze opdracht:

 npm start

En bekijk het project dan in je browser op http://localhost:3000/.



In de src-map van je project staan ​​een aantal bestanden die je niet nodig hebt. Verwijder deze bestanden: App.css , App.test.js , logo.svg , rapportWebVitals.js , setupTests.js .

Bestanden in de src-map van een React-applicatie.

Zorg ervoor dat u importverklaringen zoekt in de beschikbare bestanden en verwijder eventuele verwijzingen naar de verwijderde bestanden.

(70368744177664), (2)

2. Maak een TodoList-component

Dit is het onderdeel waarin we alle codes zullen implementeren die nodig zijn voor de takenlijst. Maak een bestand met de naam 'TodoList.js' in uw src-map. Voeg vervolgens de volgende code toe om te testen of alles naar behoren werkt:

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

Open uw App.js-bestand, importeer de TodoList-component en render deze in de App-component. Het zal er ongeveer zo uitzien:

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Ga naar uw lokale browser waarop localhost:3000 actief is en vink aan om 'Hallo wereld' vetgedrukt te zien. Alles goed? Naar de volgende stap.

3. Behandel invoer en invoerwijziging

Met deze stap kunt u een gebeurtenis activeren wanneer u een taak in het invoervak ​​typt. Importeer de useState-hook uit uw React-pakket. useState is een React-hook waarmee u de status efficiënt kunt beheren .

hoe je standaard e-mail op google kunt wijzigen 
 import React, { useState } from 'react';

Gebruik de useState-hook om een ​​statusvariabele met de naam 'inputTask' te maken met een beginwaarde van een lege tekenreeks. Wijs bovendien de functie 'setInputTask' toe om de waarde van 'inputTask' bij te werken op basis van gebruikersinvoer.

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

Maak een functie met de naam 'handleInputChange', waarbij u een gebeurtenisparameter opneemt. Het zou de inputTask-status moeten bijwerken met behulp van de setInputTask-functie. Krijg toegang tot de waarde van het doel van het evenement met event.target.value. Dit wordt uitgevoerd wanneer de waarde van het invoerveld verandert.

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

Retourneer een aantal JSX-elementen. De eerste is de kop met de tekst 'Mijn takenlijst', u kunt elke gewenste kop kiezen. Voeg een aantal attributen toe aan uw invoerelementen. typ=“tekst” : dit specificeert uw invoertype als tekst, waarde={inputTask} : Dit bindt de waarde van het invoerveld aan de inputTask-statusvariabele, zodat deze de huidige waarde weerspiegelt. onChange={handleInputChange} : Dit roept de functie handleInputChange aan wanneer de waarde van het invoerveld verandert, waardoor de inputTask-status wordt bijgewerkt.

 <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" />

Ga verder en maak een knop die de ingevoerde taak aan de lijst toevoegt.

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

In dit stadium ziet uw browseruitvoer er zo uit.

Een lege to-do lijst.

4. Voeg functionaliteit toe aan de knop 'TOEVOEGEN'.

Gebruik de gebruikState hook om een ​​toestandsvariabele met de naam 'lijst' te maken met een beginwaarde van een lege array. De variabele 'setList' slaat de reeks taken op op basis van gebruikersinvoer.

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

Maak een functie handleAddTodo die wordt uitgevoerd wanneer de gebruiker op de knop 'TOEVOEGEN' klikt om een ​​nieuwe taak toe te voegen. Het neemt de todo-parameter, die de nieuwe taak vertegenwoordigt die door de gebruiker is ingevoerd. Maak vervolgens een object newTask met een unieke id die is gegenereerd met Math.random() en de eigenschap todo die de invoertekst bevat.

Werk de lijststatus bij door de spread-operator [...lijst] te gebruiken om een ​​nieuwe array te maken met de bestaande taken in de lijst. Voeg de newTask toe aan het einde van de array. Dit zorgt ervoor dat we de originele statusarray niet muteren. Stel tot slot de inputTask-status terug naar een lege tekenreeks, waarbij het invoerveld wordt gewist wanneer de gebruiker op de knop klikt.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Inclusief de onClick attribuut toe aan het knopelement met de tekst 'ADD'. Wanneer erop wordt geklikt, wordt de functie handleAddTodo geactiveerd, die een nieuwe taak toevoegt aan de lijststatus

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

In dit stadium ziet uw browseruitvoer er hetzelfde uit, maar als u na het invoeren van een taak op de knop 'TOEVOEGEN' klikt, wordt het invoerveld leeggemaakt. Als dat goed werkt, op naar de volgende stap.

5. Voeg een verwijderknop toe

Dit is de laatste stap om gebruikers in staat te stellen hun taak te verwijderen als ze een fout hebben gemaakt of de taak hebben voltooid. Maak een handleDeleteTodo-functie die fungeert als gebeurtenishandler wanneer de gebruiker op de knop 'Verwijderen' klikt voor een specifieke taak. Het neemt de id van de taak als parameter.

Gebruik binnen de functie de filtermethode op de lijstarray om een ​​nieuwe array newList te maken die de taak met de overeenkomende id uitsluit. De filtermethode herhaalt elk item in de lijstarray en retourneert een nieuwe array die alleen de items bevat die aan de gegeven voorwaarde voldoen. Controleer in dit geval of de ID van elke taak gelijk is aan de ID die als parameter is doorgegeven. Werk de lijststatus bij door setList(newList) aan te roepen, waarmee de status wordt ingesteld op de nieuwe gefilterde array, waardoor de taak met de overeenkomende id effectief uit de lijst wordt verwijderd.

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

Gebruik de kaartmethode om elk item in de lijstarray te herhalen en een nieuwe array te retourneren. Maak vervolgens een

  • -element om een ​​taak weer te geven voor elk todo-object in de lijstarray. Zorg ervoor dat u het key-attribuut toevoegt bij het weergeven van een lijst met elementen in React. Het helpt React om elk lijstitem uniek te identificeren en de gebruikersinterface efficiënt bij te werken wanneer deze verandert. Stel in dit geval de sleutel in op de id van elk todo-object om uniciteit te garanderen.

    Toegang tot de todo-eigenschap van elk todo-object. maak ten slotte een knop die, wanneer erop wordt geklikt, de functie handleDeleteTodo activeert met de id van de overeenkomstige taak als parameter, waardoor we de taak uit de lijst kunnen verwijderen.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    Dit is hoe uw uiteindelijke code eruit zou moeten zien:

     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;

    Dit is hoe uw uiteindelijke uitvoer zal zijn, waarbij zowel de knoppen voor toevoegen als verwijderen werken zoals verwacht.

    Een takenlijst met verschillende taken.

    Gefeliciteerd, je hebt een takenlijst gemaakt die taken toevoegt en verwijdert. U kunt verder gaan door styling en meer functionaliteiten toe te voegen.

    Gebruik real-world projecten om te leren reageren

    Oefenen kan een effectieve manier van leren zijn. Hiermee kunt u React-concepten en best practices op een praktische manier toepassen, waardoor uw begrip van het raamwerk wordt versterkt. Er zijn heel veel projecten, je zou de juiste moeten vinden.

    als uw anti-malwaresoftware geen virus detecteert en verwijdert, wat moet u dan eerst proberen