React-Tutorial: To-Do-Listen App erstellen – einfach erklärt!

In diesem Tutorial zeige ich dir, wie du eine einfache To-Do-Listen App in React erstellen kannst. Du wirst lernen, wie man Komponenten erstellt und wie man den Browser-Storage verwendet, um die Einträge in der To-Do-Liste zu speichern. Durch die Schritt-für-Schritt-Anleitung kannst du leicht folgen und selbst eine App erstellen. Also, lass uns loslegen und deine erste App entwickeln!

Wenn du bereits erste Schritte mit React gemacht hast und die grundlegenden Konzepte verstehst, kannst du direkt loslegen. Ich gehe davon aus, dass in der Lage bist ein Projekt in React aufzusetzen und die grundlegenden Befehle kennst um einen Development-Server zu starten. Falls nicht, empfehle ich dir, zunächst diesen diesen Artikel zu lesen und durchzuarbeiten, um die Grundlagen besser zu verstehen. Sobald du bereit bist, kannst du hier weitermachen. Also, lass uns loslegen und deine erste App entwickeln!

Setup des Projektes 💻

Am einfachsten lässt sich ein React-Projekt mit Create-React-App initialisieren.

Mit Create-React-App kannst du eine neue React-App erstellen, ohne dich um die Konfiguration der benötigten Tools und Bibliotheken kümmern zu müssen. Create-React-App enthält unter anderem einen lokalen Entwicklungsserver, Babel und Webpack, die für die Entwicklung von React-Apps benötigt werden.

Um die To-Do-Listen App mit create-react-app zu erstellen, musst du zunächst create-react-app installieren. Dazu kannst du entweder npm oder yarn verwenden. Wenn du npm verwenden möchtest, öffne deine Kommandozeile oder dein Terminal und führe den folgenden Befehl aus:

npm install --save create-react-app

Nachdem du create-react-app installiert hast, musst du das Projektverzeichnis erstellen und die notwendigen Dateien anlegen. Öffne dazu deine Kommandozeile oder dein Terminal und wechsle in das Verzeichnis, in dem du das Projekt erstellen möchtest. Dann führe den folgenden Befehl aus, um das Verzeichnis zu erstellen und in das neue Verzeichnis zu wechseln:

create-react-app todo-app
cd todo-app

Anschließend kannst du die Dateien für das Projekt erstellen. Dazu benötigst du zumindest eine HTML-Datei, die die Benutzeroberfläche der App darstellt, und eine JavaScript-Datei, die die Logik der App enthält. Diese Dateien werden von create-react-app automatisch erstellt und befinden sich im Verzeichnis src/ in deinem Projektverzeichnis. Du kannst sie mit einem Texteditor oder einer integrierten Entwicklungsumgebung (IDE) öffnen und bearbeiten. Sobald die Dateien erstellt sind, kannst du mit dem nächsten Schritt des Tutorials fortfahren und die Komponenten für die To-Do-Listen App erstellen.

Komponenten erstellen 🧩

In React sind Komponenten die Grundbausteine für die Benutzeroberfläche einer App. Eine Komponente stellt einen bestimmten Teil der Benutzeroberfläche dar und bietet spezifische Funktionalitäten. Dabei können Komponenten selbst wieder aus anderen Komponenten zusammengesetzt werden, was eine sinnvolle Strukturierung und Wiederverwendung von Code ermöglicht.

Eine Komponente in React wird entweder als JavaScript-Klasse oder als Funktion definiert. Die Klasse oder Funktion nimmt bestimmte Props (Kurzform von "properties") als Input und gibt ein React-Element als Output zurück, das die Struktur und das Verhalten der Komponente beschreibt. Du kannst dann die Komponente in anderen Teilen deiner App verwenden, indem du sie wie ein HTML-Tag aufrufst.

Erstellung der Komponenten für die Benutzeroberfläche der App

Nachdem du das Konzept von Komponenten in React verstanden hast, kannst du nun die Komponenten für die Benutzeroberfläche deiner To-Do-Listen App erstellen. Dazu kannst du eine oder mehrere Komponenten definieren, die die verschiedenen Teile der Benutzeroberfläche darstellen und die gewünschten Funktionalitäten bereitstellen.

Im folgenden Beispiel wird eine Komponente namens "ToDoList" definiert, die eine Liste von To-Do-Einträgen entgegennimmt und sie in einer HTML-Liste darstellt:

import React from 'react';

class ToDoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

export default ToDoList;

Du kannst die Komponente dann in einem anderen Teil deiner App (am besten in der Hauptkomponente bzw. "Startseite") wie folgt verwenden:

import React from 'react';
import ToDoList from './components/ToDoList.js';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      items: [
        { id: 1, text: 'Einkaufsliste erstellen' },
        { id: 2, text: 'Zähne putzen' },
        { id: 3, text: 'Müll rausbringen' },
      ],
    };
  }

  render() {
    return (
      <ToDoList items={this.state.items} />
    );
  }
}

Im nächsten Schritt des Tutorials wirst du weitere Komponenten erstellen und ihnen Funktionalitäten hinzufügen, wie Hinzufügen, Bearbeiten und Löschen von To-Do-Einträgen.

Hinzufügen von To-Do-Einträgen

Eine weitere Komponente "ToDoInput" enthält die Eingabefelder für neue To-Do-Einträge und stellt die Funktionalität zum Hinzufügen von Einträgen bereit. Die Komponente könnte wie folgt aussehen:

import React from 'react';


class ToDoInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    };
  }

  handleChange = e => {
    this.setState({
      text: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSubmit(this.state.text);
    this.setState({
      text: ""
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.text}
          onChange={this.handleChange}
        />
        <button>Hinzufügen</button>
      </form>
    );
  }
}

export default ToDoInput;

Die ToDoInput Klasse implementiert einen Konstruktor, der den initialen Zustand der Komponente festlegt. Der Zustand enthält eine text-Eigenschaft, die den aktuellen Wert des Eingabefeldes darstellt.

Die ToDoInput Klasse implementiert auch zwei Methoden - handleChange und handleSubmit - die verwendet werden, um Eingaben des Benutzers zu verarbeiten. Die handleChange Methode wird aufgerufen, wenn der Benutzer einen Buchstaben in das Eingabefeld eingibt. Sie aktualisiert den Zustand der Komponente, indem sie den aktuellen Wert des Eingabefeldes in die text-Eigenschaft schreibt.

Die handleSubmit Methode wird aufgerufen, wenn der Benutzer das Formular abschickt. Sie verhindert, dass das Formular die Seite neu lädt, indem sie das e.preventDefault-Ereignis aufruft. Sie ruft dann die onSubmit-Methode auf, die als props an die Komponente übergeben wurde, und übergibt ihr den aktuellen Wert des text-Zustands. Schließlich aktualisiert die Methode den text-Zustand, indem sie ihn auf einen leeren String setzt.

Die render Methode der ToDoInput Klasse gibt schließlich ein form-Element zurück, das ein input-Element und einen button enthält. Das input-Element wird mit den aktuellen Werten des Zustands initialisiert und die onChange- und onSubmit-Methoden werden als Ereignis-Handler zugeordnet.

Zum Schluss wird die ToDoInput Klasse mit export default exportiert, um sie von anderen Komponenten oder Dateien importieren zu können. Dies ermöglicht es, die Komponente an anderen Stellen der Anwendung zu verwenden.

Bearbeiten und Löschen von To-Do-Einträgen

Eine neue Komponente "ToDoControls", die die Schaltflächen zum Bearbeiten und Löschen von To-Do-Einträgen enthält, könnte wie folgt aussehen:

import React from 'react';


class ToDoControls extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onEdit}>Bearbeiten</button>
        <button onClick={this.props.onDelete}>Löschen</button>
      </div>
    );
  }
}

export default ToDoControls;

Nachdem du die Komponenten erstellt hast, kannst du sie in der Hauptkomponente deiner App zusammensetzen und ihnen die benötigten Props und Funktionen übergeben:

class App extends React.Component {
  render() {
    return (
      <div>
        <ToDoList items={this.props.items} />
        <ToDoInput onSubmit={this.props.onSubmit} />
        <ToDoControls onEdit={this.props.onEdit} onDelete={this.props.onDelete} />
      </div>
    );
  }
}

Beachte, dass dieser Code nicht vollständig ist und das Bearbeiten und Löschen an dieser Stelle nicht funktioniert. Es soll dir vielmehr eine Inspiration liefern, die App selbst weiter zu entwickeln und die fehlende Funktionalität zu erweitern.

Einträge speichern 💾

Um die App zu vervollständigen, musst du noch die Funktionalität zum Speichern und Laden der To-Do-Liste aus dem Browser-Storage implementieren. Dazu kannst du z.B. die JavaScript-API für den Web Storage verwenden, die in modernen Browsern verfügbar ist.

In der Hauptkomponente deiner App definiert (index.js) du die folgenden Methoden, um die Liste im Browser-Storage zu speichern und zu laden:

// App -> index.js

constructor() {
    super();
    this.state = {
      name: 'React',
      items: [
        { id: 1, text: 'Einkaufsliste erstellen' },
        { id: 2, text: 'Zähne putzen' },
        { id: 3, text: 'Müll rausbringen' },
      ],
    };
  }  
 componentDidMount() {
    // Laden der To-Do-Liste aus dem Browser-Storage
    const todoItems = JSON.parse(localStorage.getItem("todoItems")) || [];
    this.setState({
      items: items: (todoItems && todoItems.length > 0) ? todoItems : this.state.items
    });
  }

  componentDidUpdate(prevProps, prevState) {
    // Speichern der To-Do-Liste im Browser-Storage
    if (prevState.items !== this.state.items) {
      localStorage.setItem("todoItems", JSON.stringify(this.state.items));
    }
  }

In diesem Code-Fragment werden zwei Lebenszyklusmethoden implementiert - componentDidMount und componentDidUpdate. Diese Methoden gehören zu den Methoden, die von React aufgerufen werden, wenn bestimmte Ereignisse in der Komponenten-Lebensdauer auftreten.

Die componentDidMount Methode wird aufgerufen, nachdem die Komponente erfolgreich gerendert wurde. In diesem Fall wird sie verwendet, um die To-Do-Liste aus dem Browser-Storage zu laden und den aktuellen Zustand der Anwendung zu aktualisieren. Wenn keine To-Do-Liste im Browser-Storage vorhanden ist, wird eine leere Liste verwendet.

Die componentDidUpdate Methode wird aufgerufen, nachdem die Komponente aktualisiert wurde, entweder durch eine Änderung des Zustands oder durch ein neues props-Objekt. In diesem Fall wird sie verwendet, um die To-Do-Liste im Browser-Storage zu speichern, wenn sich die items-Liste im Zustand geändert hat.

Diese beiden Methoden werden verwendet, um die To-Do-Liste zwischen Sitzungen zu speichern und beim nächsten Laden der Anwendung wiederherzustellen. Auf diese Weise können Benutzer ihre To-Do-Liste auch nach dem Schließen des Browsers behalten.

Anschließend musst du noch die Logik für die einzelnen Funktionen der App implementieren. In der Hauptkomponente definierst du (oberhalb der render-Methode):

  handleSubmit = text => {
    // Hinzufügen eines neuen Eintrags zur To-Do-Liste
    const newItem = {
      id: Date.now(),
      text
    };
    this.setState(state => ({
      items: [...state.items, newItem]
    }));
  };

  handleEdit = () => {
    // Bearbeiten eines bestehenden Eintrags in der To-Do-Liste
    // (hier könnte die Logik implementiert werden)
  };

  handleDelete = () => {
    // Löschen eines Eintrags aus der To-Do-Liste
    // (hier könnte die Logik implementiert werden)
  };

Hier werden drei Methoden implementiert - handleSubmit, handleEdit, und handleDelete - die verwendet werden, um die To-Do-Liste zu verwalten.

Die handleSubmit Methode wird aufgerufen, wenn der Benutzer einen neuen Eintrag zur To-Do-Liste hinzufügt. Sie nimmt einen text-Parameter entgegen, der den Text des neuen Eintrags darstellt. Sie erstellt dann ein neues newItem-Objekt mit einer id, die das aktuelle Datum und die aktuelle Zeit darstellt, und dem übergebenen text-Wert.

Schließlich wird die setState Methode aufgerufen, um den Zustand der Anwendung zu aktualisieren und das neue newItem-Objekt zur items-Liste hinzuzufügen. Die setState Methode ist eine Methode von React, die verwendet wird, um den Zustand einer Komponente zu aktualisieren. Sie nimmt ein Objekt mit den geänderten Zustandswerten entgegen und führt dann eine erneute Render-Operation der Komponente durch.

Die handleEdit und handleDelete Methoden werden aufgerufen, wenn der Benutzer einen Eintrag bearbeiten oder löschen möchte. Sie enthalten zwar Kommentare, die beschreiben, was sie tun sollen, aber keine Implementierung. Diese Methoden müssten noch implementiert werden, um die Bearbeitung und Löschung von To-Do-Einträgen zu ermöglichen.

Anschließend übergibst du die Funktionen an die Hauptkomponente (App --> index.js), um die Funktionalitäten bereitzustellen:

<ToDoApp
  items={this.state.items}
  onSubmit={this.handleSubmit}
  onEdit={this.handleEdit}
  onDelete={this.handleDelete}
/>

Herzlichen Glückwunsch! 🥳

Mit diesen Schritten solltest du jetzt eine tolle, funktionierende To-Do-Listen App in React erstellt haben, die Eingaben sicher im Browser-Storage speichert. Du kannst nun weitere coole Funktionen und Features hinzufügen und das Design der App nach deinen Wünschen anpassen, um sie ganz individuell zu gestalten.

Den kompletten funktionierenden Code findest du auf Stackblitz. Dort kannst du das Projekt forken und damit selbst experimentieren. Viel Spaß dabei!

Zusammenfassung & Ausblick ⏭️

In diesem Tutorial hast du gelernt, wie man eine einfache To-Do-Listen App in React erstellt, die ohne Datenbank funktioniert und die To-Do-Liste im Browser-Storage speichert. Du hast dazu die Konzepte von Komponenten in React verstanden und verschiedene Komponenten für die Benutzeroberfläche der App erstellt. Anschließend hast du die Funktionalität zum Speichern und Laden der To-Do-Liste implementiert sowie die Logik für die einzelnen Funktionen der App.

Wie geht es weiter?

Die App kann nun verwendet werden, um To-Do-Einträge hinzuzufügen, zu bearbeiten und zu löschen. Das Tutorial kann auch erweitert werden, indem man eine Datenbank verwendet, um die To-Do-Liste zu speichern, oder weitere Funktionen und Features hinzufügt. Auch das Design der App kann angepasst werden, um sie individuell zu gestalten. Auf diese Weise kannst du dein Wissen in React vertiefen und deine Fähigkeiten im Bereich der Frontend-Entwicklung verbessern.

Hat dir dieser Beitrag gefallen oder fehlt dir etwas? Oder hast du vielleicht Feedback? Dann schreibe mir auf Twitter! Außerdem würde ich mich sehr freuen, wenn du diesen Beitrag teilst. Damit hilfst du mir meine Seite noch bekannter zu machen, damit ich noch mehr Menschen auf ihrem Weg zum Web Developer unterstützen kann. ❤️