Erstelle eine Notizen-App mit React

Einführung

In diesem Projekt werden wir eine einfache Notizen-App mit React erstellen. Die App wird Benutzern ermöglichen, Notizen hinzuzufügen, zu bearbeiten und zu löschen. Wir werden die Entwicklung in mehrere Schritte unterteilen, um sicherzustellen, dass jeder Schritt bestimmte Anforderungen erfüllt und essentielle Funktionen hinzufügt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie ein neues React-Projekt mit dem Befehl Create React App erstellen
• Wie Sie funktionale React-Komponenten erstellen, um eine Benutzeroberfläche zu schaffen
• Wie Sie den Zustand mit dem React-Hook useState verwalten
• Wie Sie Notizen in der Anwendung hinzufügen und verwalten
• Wie Sie Funktionen wie das Hinzufügen, Bearbeiten und Löschen von Notizen implementieren
• Wie Sie Benutzereingaben und Ereignisse in React-Komponenten behandeln
• Wie Sie eine React-Anwendung mit CSS gestalten
• Wie Sie eine einfache CRUD-Anwendung (Create, Read, Update, Delete) entwickeln
• Wie Sie ein React-Projekt strukturieren und organisieren
• Wie Sie eine einfache, responsive Benutzeroberfläche für eine Notizen-App erstellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

• Ein neues React-Projekt einzurichten
• React-Komponenten zu erstellen und zu verwalten
• React-Hooks wie useState zum Verwalten des Komponentenzustands zu verwenden
• Benutzereingaben und Formularabschlüsse in einer React-Anwendung zu behandeln
• Daten und Funktionen zwischen übergeordneten und untergeordneten Komponenten über Props zu übergeben
• Reaktive und interaktive Benutzeroberflächen in React zu erstellen
• Grundlegende Datenspeicherung und -manipulation in einer React-Anwendung durchzuführen
• Code-Dateien in einem React-Projekt zu strukturieren und zu organisieren
• CSS zum Gestalten von React-Komponenten zu verwenden
• React-Anwendungen zu debuggen und zu beheben
• Die besten Praktiken für das Erstellen einer React-Anwendung zu befolgen

Projektaufstellung

Anforderungen:

• Installation von Abhängigkeiten im neuen React-Projekt.

Funktionalität:

• Initialisierung des Projekts mit den erforderlichen Abhängigkeiten und einer grundlegenden Projektstruktur.

Schritte:

1. Öffnen Sie ein Terminal und navigieren Sie zum Projektordner:

   cd notes-app

   Sie müssen diesen Befehl im project-Verzeichnis ausführen.

2. Installation von Abhängigkeiten im Projekt:

   npm install

   Nachdem die Installation abgeschlossen ist, wird ein node_modules-Ordner erstellt; wenn er nicht existiert, bedeutet dies, dass die Installation nicht erfolgreich war.

Notizkomponente erstellen

Anforderungen:

• Erstellen Sie eine Notiz-Komponente, die eine einzelne Notiz darstellt.
• Die Notiz-Komponente sollte den Inhalt der Notiz anzeigen und Schaltflächen zum Bearbeiten und Löschen bereitstellen.

Funktionalität:

• Zeigen Sie den Titel und den Text einer Notiz an.
• Stellen Sie Schaltflächen zum Bearbeiten und Löschen einer Notiz bereit.

Schritte:

1. Erstellen Sie im src-Ordner eine neue Datei namens Note.js.

2. Implementieren Sie die Notiz-Komponente wie folgt:

import React from "react";

const Note = ({ note }) => {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.text}</p>
      <button>Bearbeiten</button>
      <button>Löschen</button>
    </div>
  );
};

export default Note;

App-Komponente und Zustand erstellen

Anforderungen:

• Erstellen Sie eine App-Komponente, die die Notizen und ihren Zustand verwalten wird.
• Initialisieren Sie den Zustand, um ein Array von Notizen zu speichern.
• Implementieren Sie Funktionen zum Hinzufügen, Löschen und Bearbeiten von Notizen.

Funktionalität:

• Verwalten eines Arrays von Notizen.
• Hinzufügen neuer Notizen.
• Löschen von Notizen.
• Bearbeiten von Notizen.

Schritte:

1. Öffnen Sie in dem src-Ordner die Datei App.js.

2. Importieren Sie den useState-Hook am Anfang der Datei:

   // App.js
   import React, { useState } from "react";
   import "./App.css";
   import Note from "./Note";

3. Legen Sie den initialen Zustand und die Funktionen zum Hinzufügen, Löschen und Bearbeiten von Notizen innerhalb der App-Komponente fest:

// App.js
function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: "", text: "" });

  const addNote = () => {
    // TODO: Implementieren Sie die addNote-Funktion
  };

  const deleteNote = (id) => {
    // TODO: Implementieren Sie die deleteNote-Funktion
  };

  const editNote = (id, newText) => {
    // TODO: Implementieren Sie die editNote-Funktion
  };

  return <div className="App">{/* App-Inhalt hier einfügen */}</div>;
}

Funktionalität zum Hinzufügen von Notizen implementieren

Anforderungen:

• Implementiere die addNote-Funktion, um neue Notizen zum Zustand hinzuzufügen.
• Stellen Sie sicher, dass Notizen einen Titel und einen Text haben.

Funktionalität:

• Fügen Sie neue Notizen zum Zustand hinzu.
• Leeren Sie die Eingabefelder nach dem Hinzufügen einer Notiz.

Schritte:

1. Implementiere die addNote-Funktion:

// App.js
const addNote = () => {
  if (newNote.title && newNote.text) {
    const newId = Date.now().toString();
    setNotes([...notes, { ...newNote, id: newId }]);
    setNewNote({ title: "", text: "" });
  }
};

2. Verwende in Ihrem JSX onChange-Handler, um die Eingabewerte zu erfassen und den Zustand zu aktualisieren:

// App.js
return (
  <div className="App">
    <h1>Notizen-App</h1>
    <div className="note-form">
      <input
        type="text"
        placeholder="Titel"
        value={newNote.title}
        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="Text"
        value={newNote.text}
        onChange={(e) => setNewNote({ ...newNote, text: e.target.value })}
      />
      <button onClick={addNote}>Notiz hinzufügen</button>
    </div>
  </div>
);

Funktionalität zum Löschen von Notizen implementieren

Anforderungen:

• Implementiere die deleteNote-Funktion, um eine Notiz aus dem Zustand zu entfernen, wenn die Schaltfläche "Löschen" geklickt wird.

Funktionalität:

• Löschen Sie eine Notiz aus dem Zustand, wenn die Schaltfläche "Löschen" geklickt wird.

Schritte:

1. Implementiere die deleteNote-Funktion:

// App.js
const deleteNote = (id) => {
  const updatedNotes = notes.filter((note) => note.id !== id);
  setNotes(updatedNotes);
};

2. Übergeben Sie die deleteNote-Funktion als Prop an die Note-Komponente, um das Löschen von Notizen zu ermöglichen.

// App.js
<div className="App">
  <div className="note-list">
    {notes.map((note) => (
      <Note key={note.id} note={note} onDelete={deleteNote} onEdit={editNote} />
    ))}
  </div>
</div>

Funktionalität zum Bearbeiten von Notizen implementieren

Anforderungen:

• Implementiere die editNote-Funktion, um den Text einer Notiz zu aktualisieren, wenn die Schaltfläche "Bearbeiten" geklickt wird.

Funktionalität:

• Zeige den Notiztext in einem bearbeitbaren Textbereich an.
• Aktualisiere den Text der Notiz, wenn die Schaltfläche "Speichern" geklickt wird.

Schritte:

1. Implementiere die editNote-Funktion:

// App.js
const editNote = (id, newText) => {
  const updatedNotes = notes.map((note) =>
    note.id === id ? { ...note, text: newText } : note
  );
  setNotes(updatedNotes);
};

2. Aktualisiere die Note-Komponente, um das Bearbeiten zu behandeln:

// Note.js
import React, { useState } from "react";
const Note = ({ note, onDelete, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(note.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(note.id, editedText);
    setIsEditing(false);
  };

  return (
    <div className="note">
      <div className="note-header">
        <h3>{note.title}</h3>
        <button onClick={() => onDelete(note.id)}>Löschen</button>
      </div>
      {isEditing ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>Speichern</button>
        </>
      ) : (
        <p>{note.text}</p>
      )}
      {!isEditing && <button onClick={handleEdit}>Bearbeiten</button>}
    </div>
  );
};

Gestaltung (App.css)

Anforderungen:

• Wende grundlegende Gestaltung auf die App an, um eine visuell ansprechende Schnittstelle zu schaffen.

Funktionalität:

• Gestalte die App-Komponenten, um die Benutzererfahrung zu verbessern.

Schritte:

1. Erstellen Sie eine Datei App.css und wenden Sie grundlegende Gestaltung auf die App-Komponenten an. Verwenden Sie den bereitgestellten CSS-Code, um die App zu gestalten.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

Ausführen der App

Um Ihre React-Notizen-App auszuführen:

1. Öffnen Sie Ihr Terminal oder die Befehlszeile.

2. Stellen Sie sicher, dass Sie sich im Stammverzeichnis des Projekts befinden (wo die package.json-Datei gespeichert ist).

3. Starten Sie den Entwicklungsserver:

   npm start

   Sie sollten jetzt eine grundlegende React-App im Browser am Port 8080 sehen. Wir werden auf dieser Grundlage aufbauen, um unsere Notizen-App zu erstellen.

4. Der Effekt der Seite ist wie folgt:

Zusammenfassung

In diesem Projekt haben wir eine einfache Notizen-App mit React erstellt, indem wir die Entwicklung in mehrere Schritte untergliedert haben. Wir haben das Projekt eingerichtet, Komponenten für Notizen erstellt, Funktionalitäten zum Hinzufügen, Löschen und Bearbeiten von Notizen implementiert und grundlegende Gestaltung angewendet. Indem Sie diese Schritte befolgen, können Sie eine funktionierende Notizen-App erstellen und ihre Funktionen erweitern, um Ihren Anforderungen gerecht zu werden.