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.

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:

/* stijlen.css */
.app {
font-familie: schreefloos;
weergave: buigen;
rechtvaardigen-inhoud: centrum;
uitlijnen-items: centrum;
hoogte: 100vh;
}
.Te doen {
Achtergrond kleur: tarwe;
tekst uitlijnen: centrum;
breedte: 50%;
opvulling: 20px;
doos-schaduw: RGBA(0, 0, 0, 0.24) 0px 3px 8px;
marge: auto;
}





instagram viewer

ul {
lijst-stijl-type: geen;
opvulling: 10px;
marge: 0;
}
knop {
breedte: 70px;
hoogte: 35px;
Achtergrond kleur: zandbruin;
grens: geen;
lettertypegrootte: 15px;
lettertype dikte: 800;
grensradius: 4px;
doos-schaduw: RGBA(0, 0, 0, 0.24) 0px 3px 8px;
}
.invoer {
grens: geen;
breedte: 340px;
hoogte: 35px;
grensradius: 9px;
tekst uitlijnen: centrum;
doos-schaduw: RGBA(0, 0, 0, 0.24) 0px 3px 8px;
}
.Bovenkant {
weergave: buigen;
rechtvaardigen-inhoud: centrum;
gat: 12px;
}
li {
weergave: buigen;
rechtvaardigen-inhoud: ruimte-gelijkmatig;
uitlijnen-items: centrum;
opvulling: 10px;
}
li:voor {
inhoud: "*";
marge-rechts: 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 maak-reageer-app takenlijst

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:

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

cd takenlijst

Voer uw project lokaal uit met deze opdracht:

npm begin

En bekijk dan het project 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.

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

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:

importeren Reageer van'Reageer';
const TakenLijst = () => {
opbrengst (



Hallo wereld </h2>
 </div>
 );
};
exporterenstandaard Te doen lijst; 

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

importeren Reageer van'Reageer';
importeren'./stijlen.css'
importeren Te doen lijst van'./Te doen lijst';
const App= () => {
opbrengst (




 </div>
 );
};
exporterenstandaard App;

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

3. Behandel invoer en invoerwijzigingen

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.

importeren Reageer, { useState } van'Reageer';

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 = (evenement) => {
 setInputTask (gebeurtenis.doel.waarde);
}; 

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.

"Te doen">
Mijn takenlijst</h1>
"Bovenkant">
"invoer" type="tekst" waarde={inputTask}
 onChange={handleInputChange} placeholder="Voer een taak in" />

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

"btn">TOEVOEGEN</button>
 </div>
</div>

In dit stadium ziet uw browseruitvoer er zo uit.

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 [lijst, setLijst] = 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 = (Te doen) => {
const nieuweTaak = {
 ID kaart: Wiskunde.willekeurig(),
 doen: doen
 };
 setList([...lijst, nieuweTaak]);
 setInputTask('');
}; 

Inclusief de bij klikken attribuut toe aan het knopelement met de tekst "ADD". Wanneer erop wordt geklikt, activeert het de omgaan met AddTodo functie, die een nieuwe taak aan de lijststatus toevoegt

 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 kaart) => {
const nieuweLijst = lijst.filter((Te doen) =>
 todo.id !== id
 );
 setList (nieuweLijst); 
};

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

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>
{ lijst.kaart((Te doen) => (
<linaam van de klasse="taak"sleutel={todo.id}>
 {todo.todo}
<knopbij klikken={() => handleDeleteTodo (todo.id)}>Verwijderenknop>
li>
))}
ul>

Dit is hoe uw uiteindelijke code eruit zou moeten zien:

importeren Reageer, { useState } van'Reageer';
const TakenLijst = () => {
const [inputTask, setInputTask] = useState('');
const [lijst, setList] = useState([]);
const handleAddTodo = () => {
const nieuweTaak = {
 ID kaart: Wiskunde.willekeurig(),
 todo: invoertaak
 };
 setLijst([...lijst, nieuwe taak]);
 setInputTask('');
 };
const handleDeleteTodo = (ID kaart) => {
const nieuweLijst = lijst.filter((Te doen) => todo.id !== id);
 setList (nieuweLijst);
 };
const handleInputChange = (evenement) => {
setInputTask(evenement.doel.waarde);
 };
opbrengst (
<divnaam van de klasse="Te doen">

Mijn aan-DoenLijst

<divnaam van de klasse="Bovenkant">
<invoernaam van de klasse="invoer"type="tekst"waarde={inputTask}
 onChange={handleInputChange} placeholder="Voer een taak in" />
<knopnaam van de klasse="btn"bij klikken={handleAddTodo}>TOEVOEGENknop>
div>
<ul>
 { lijst.kaart((Te doen) => (
<linaam van de klasse="taak"sleutel={todo.id}>
 {todo.todo}
<knopbij klikken={() => handleDeleteTodo (todo.id)}>
Verwijderen
knop>
li>
 ))}
ul>
div>
 );
};
exporterenstandaard Te doen lijst; 

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

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.