Das Erlernen einer neuen Technologie wie React kann ohne praktische Erfahrung verwirrend sein. Als Entwickler ist die Erstellung realer Projekte eine der effektivsten Möglichkeiten, Konzepte und Funktionen zu verstehen.

Folgen Sie dem Prozess zum Erstellen einer einfachen To-Do-Liste mit React und verbessern Sie Ihr Verständnis der React-Grundlagen.

Voraussetzungen zum Erstellen einer To-Do-Liste

Bevor Sie mit diesem Projekt beginnen, müssen Sie mehrere Voraussetzungen erfüllen. Sie benötigen grundlegende Kenntnisse in den folgenden Bereichen: HTML, CSS, JavaScript, ES6, und Reagieren. Sie benötigen Node.js und npm, der JavaScript-Paketmanager. Sie benötigen außerdem einen Code-Editor, z. B. Visual Studio Code.

Hier ist das CSS, das dieses Projekt verwenden wird:

/*styles.css */
.App {
Schriftfamilie: serifenlos;
Anzeige: biegen;
Rechtfertigungsinhalt: Center;
align-items: Center;
Höhe: 100vh;
}
.Machen {





instagram viewer

Hintergrundfarbe: Weizen;
Textausrichtung: Center;
Breite: 50%;
Polsterung: 20px;
Box Schatten: rgba(0, 0, 0, 0.24) 0px 3px 8px;
Rand: Auto;
}

ul {
Listenstiltyp: keiner;
Polsterung: 10px;
Rand: 0;
}
Taste {
Breite: 70px;
Höhe: 35px;
Hintergrundfarbe: sandbraun;
Grenze: keiner;
Schriftgröße: 15px;
Schriftstärke: 800;
Grenzradius: 4px;
Box Schatten: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Eingang {
Grenze: keiner;
Breite: 340px;
Höhe: 35px;
Grenzradius: 9px;
Textausrichtung: Center;
Box Schatten: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Spitze {
Anzeige: biegen;
Rechtfertigungsinhalt: Center;
Lücke: 12px;
}
li {
Anzeige: biegen;
Rechtfertigungsinhalt: raumgleichmäßig;
align-items: Center;
Polsterung: 10px;
}
li:Vor {
Inhalt: "*";
Rand rechts: 5px;
}

1. Projektumgebung einrichten

Diese Phase umfasst alle Befehle und Dateien, die zum Einrichten des Projekts erforderlich sind. Erstellen Sie zunächst ein neues React-Projekt. Öffnen Sie ein Terminal und führen Sie diesen Befehl aus:

npx create-react-app todo-list

Die Installation aller benötigten Dateien und Pakete dauert einige Minuten. Es erstellt eine neue React-Anwendung mit dem Namen todo-list. Wenn Sie so etwas sehen, sind Sie auf dem richtigen Weg:

Navigieren Sie mit diesem Befehl zum Verzeichnis Ihres neu erstellten Projekts:

CD-ToDo-Liste

Führen Sie Ihr Projekt lokal mit diesem Befehl aus:

npm-Start

Und dann sehen Sie sich das Projekt in Ihrem Browser an http://localhost: 3000/.

Im src-Ordner Ihres Projekts befinden sich einige Dateien, die Sie nicht benötigen. Löschen Sie diese Dateien: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Stellen Sie sicher, dass Sie in den verfügbaren Dateien nach Importanweisungen suchen und alle Verweise auf die gelöschten Dateien entfernen.

2. Erstellen Sie eine TodoList-Komponente

Dies ist die Komponente, in der wir alle für die To-Do-Liste erforderlichen Codes implementieren. Erstellen Sie eine Datei mit dem Namen „TodoList.js“ in Ihrem src-Ordner. Fügen Sie dann den folgenden Code hinzu, um zu testen, ob alles ordnungsgemäß funktioniert:

importieren Reagieren aus'reagieren';
const TodoList = () => {
zurückkehren (



Hallo Welt </h2>
 </div>
 );
};
ExportStandard Aufgabenliste; 

Öffnen Sie Ihre App.js-Datei, importieren Sie die TodoList-Komponente und rendern Sie sie in der App-Komponente. Es wird ungefähr so ​​aussehen:

importieren Reagieren aus'reagieren';
importieren'./styles.css'
importieren Aufgabenliste aus'./Aufgabenliste';
const App = () => {
zurückkehren (




 </div>
 );
};
ExportStandard App;

Gehen Sie zu Ihrem lokalen Browser, in dem localhost: 3000 ausgeführt wird, und prüfen Sie, ob „Hello World“ fett geschrieben ist. Alles gut? Zum nächsten Schritt.

3. Behandeln Sie Eingaben und Eingabeänderungen

Mit diesem Schritt können Sie ein Ereignis auslösen, wenn Sie eine Aufgabe in das Eingabefeld eingeben. Importieren Sie den useState-Hook aus Ihrem React-Paket. useState ist ein React-Hook, mit dem Sie den Status effizient verwalten können.

importieren Reagieren, { useState } aus'reagieren';

Verwenden Sie den useState-Hook, um eine Statusvariable mit dem Namen „inputTask“ mit dem Anfangswert einer leeren Zeichenfolge zu erstellen. Weisen Sie außerdem die Funktion „setInputTask“ zu, um den Wert von „inputTask“ basierend auf Benutzereingaben zu aktualisieren.

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

Erstellen Sie eine Funktion namens „handleInputChange“, die einen Ereignisparameter aufnimmt. Der InputTask-Status sollte mithilfe der Funktion setInputTask aktualisiert werden. Greifen Sie mit event.target.value auf den Wert des Ereignisziels zu. Dies wird immer dann ausgeführt, wenn sich der Wert des Eingabefelds ändert.

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

Gibt ein paar JSX-Elemente zurück. Die erste Überschrift lautet „Meine Todo-Liste“. Sie können eine beliebige Überschrift auswählen. Fügen Sie Ihren Eingabeelementen einige Attribute hinzu. type=“text“: Dies gibt Ihren Eingabetyp als Text an. value={inputTask}: Dadurch wird der Wert des Eingabefelds an die Statusvariable inputTask gebunden, um sicherzustellen, dass er den aktuellen Wert widerspiegelt.onChange={handleInputChange}: Dadurch wird die handleInputChange-Funktion aufgerufen, wenn sich der Wert des Eingabefelds ändert, wodurch der InputTask-Status aktualisiert wird.

"Machen">
Meine To-Do-Liste</h1>
"Spitze">
"Eingang" Typ="Text" value={inputTask}
 onChange={handleInputChange} placeholder=„Geben Sie eine Aufgabe ein“ />

Erstellen Sie anschließend eine Schaltfläche, die die eingegebene Aufgabe zur Liste hinzufügt.

„btn“>HINZUFÜGEN</button>
 </div>
</div>

Zu diesem Zeitpunkt sieht Ihre Browserausgabe so aus.

4. Fügen Sie der Schaltfläche „HINZUFÜGEN“ Funktionalität hinzu

Benutzen Sie die useState Hook, um eine Zustandsvariable namens „list“ mit dem Anfangswert eines leeren Arrays zu erstellen. Die Variable „setList“ speichert das Aufgabenarray basierend auf Benutzereingaben.

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

Erstellen Sie eine Funktion handleAddTodo, die ausgeführt wird, wenn der Benutzer auf die Schaltfläche „HINZUFÜGEN“ klickt, um eine neue Aufgabe hinzuzufügen. Es verwendet den todo-Parameter, der die vom Benutzer eingegebene neue Aufgabe darstellt. Erstellen Sie dann ein Objekt newTask mit einer eindeutigen ID, die mit Math.random() generiert wurde, und der todo-Eigenschaft, die den Eingabetext enthält.

Anschließend aktualisieren Sie den Listenstatus, indem Sie den Spread-Operator […list] verwenden, um ein neues Array mit den vorhandenen Aufgaben in der Liste zu erstellen. Hängen Sie die newTask an das Ende des Arrays an. Dadurch wird sichergestellt, dass wir das ursprüngliche Zustandsarray nicht verändern. Setzen Sie abschließend den inputTask-Status auf eine leere Zeichenfolge zurück und leeren Sie das Eingabefeld, wenn der Benutzer auf die Schaltfläche klickt.

const handleAddTodo = (machen) => {
const newTask = {
 Ausweis: Mathematik.willkürlich(),
 todo: todo
 };
 setList([...list, newTask]);
 setInputTask('');
}; 

Umfassen die onClick Attribut zum Schaltflächenelement mit dem Text „ADD“ hinzufügen. Wenn es angeklickt wird, wird das ausgelöst handleAddTodo Funktion, die dem Listenstatus eine neue Aufgabe hinzufügt

 handleAddTodo (inputTask)}>ADD</button> 

Zu diesem Zeitpunkt sieht die Ausgabe Ihres Browsers gleich aus. Wenn Sie jedoch nach der Eingabe einer Aufgabe auf die Schaltfläche „HINZUFÜGEN“ klicken, wird das Eingabefeld leer. Wenn das funktioniert, fahren Sie mit dem nächsten Schritt fort.

5. Fügen Sie eine Schaltfläche „Löschen“ hinzu

Dies ist der letzte Schritt, um den Benutzern das Löschen ihrer Aufgabe zu ermöglichen, wenn sie einen Fehler gemacht oder die Aufgabe abgeschlossen haben. Erstellen Sie eine handleDeleteTodo-Funktion, die als Ereignishandler fungiert, wenn der Benutzer für eine bestimmte Aufgabe auf die Schaltfläche „Löschen“ klickt. Als Parameter wird die ID der Aufgabe verwendet.

Verwenden Sie innerhalb der Funktion die Filtermethode für das Listenarray, um ein neues Array „newList“ zu erstellen, das die Aufgabe mit der passenden ID ausschließt. Die Filtermethode durchläuft jedes Element im Listenarray und gibt ein neues Array zurück, das nur die Elemente enthält, die die angegebene Bedingung erfüllen. Überprüfen Sie in diesem Fall, ob die ID jeder Aufgabe mit der als Parameter übergebenen ID übereinstimmt. Aktualisieren Sie den Listenstatus, indem Sie setList (newList) aufrufen, wodurch der Status auf das neue gefilterte Array gesetzt wird und die Aufgabe mit der passenden ID effektiv aus der Liste entfernt wird.

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

Verwenden Sie die Map-Methode, um jedes Element im Listenarray zu durchlaufen und ein neues Array zurückzugeben. Erstellen Sie dann eine

Greifen Sie auf die todo-Eigenschaft jedes todo-Objekts zu. Erstellen Sie abschließend eine Schaltfläche, die beim Klicken die Funktion handleDeleteTodo mit der ID der entsprechenden Aufgabe als Parameter auslöst, sodass wir die Aufgabe aus der Liste löschen können.

<ul>
{ list.map((machen) => (
<liKlassenname="Aufgabe"Taste={todo.id}>
 {todo.todo}
<TasteonClick={() => handleDeleteTodo (todo.id)}>LöschenTaste>
li>
))}
ul>

So sollte Ihr endgültiger Code aussehen:

importieren Reagieren, { useState } aus'reagieren';
const TodoList = () => {
const [inputTask, setInputTask] = useState('');
const [Liste, setList] = useState([]);
const handleAddTodo = () => {
const newTask = {
 Ausweis: Mathematik.willkürlich(),
 Aufgabe: Eingabeaufgabe
 };
 setList([...Liste, neue Aufgabe]);
 setInputTask('');
 };
const handleDeleteTodo = (Ausweis) => {
const newList = list.filter((machen) => todo.id !== id);
 setList (newList);
 };
const handleInputChange = (Fall) => {
setInputTask(Fall.Ziel.Wert);
 };
zurückkehren (
<divKlassenname="Machen">

Mein An-TunAufführen

<divKlassenname="Spitze">
<EingangKlassenname="Eingang"Typ="Text"Wert={inputTask}
 onChange={handleInputChange} placeholder=„Geben Sie eine Aufgabe ein“ />
<TasteKlassenname=„btn“onClick={handleAddTodo}>HINZUFÜGENTaste>
div>
<ul>
 { list.map((machen) => (
<liKlassenname="Aufgabe"Taste={todo.id}>
 {todo.todo}
<TasteonClick={() => handleDeleteTodo (todo.id)}>
Löschen
Taste>
li>
 ))}
ul>
div>
 );
};
ExportStandard Aufgabenliste; 

So wird Ihre endgültige Ausgabe aussehen, wobei sowohl die Schaltflächen „Hinzufügen“ als auch „Löschen“ wie erwartet funktionieren.

Herzlichen Glückwunsch, Sie haben eine To-do-Liste erstellt, die Aufgaben hinzufügt und löscht. Sie können noch weiter gehen, indem Sie Stil und weitere Funktionen hinzufügen.

Nutzen Sie reale Projekte, um das Reagieren zu lernen

Übung kann eine effektive Art des Lernens sein. Es ermöglicht Ihnen, React-Konzepte und Best Practices praxisnah anzuwenden und so Ihr Verständnis des Frameworks zu vertiefen. Es gibt unzählige Projekte, Sie sollten die richtigen finden.