Readme angepasst, Leserlichkeit im Code leicht verbessert

README.md

@@ -1,5 +1,13 @@
-# React App zum Laufen bringen
-1. 'react-todolist' Ordner in Eingabeaufforderung oder PowerShell öffnen
+# Inhalt des Repositories
+In dem Repositories liegen die Dateien des aktuellen Bausteins WJSF. Neben den reinen html/css/js-Seiten sind aktuell drei React-Apps enthalten.
+
+Die React-Apps liegen in den Verzeichnissen 'Erster React Test', 'react-todolist' und 'react-unterricht-todolist'.
+
+react-todolist enthält eine für React angepasste Todo-App von Montag. react-unterricht-todolist ist eine vereinfachte Variante der heute (Dienstag) vorgestellten App (keine API-Aufrufe, keine Statistiken).
+
+React Apps lassen sich nach klonen des Repositories nicht einfach so öffnen. Es müssen erst Pakete etc. nachgeladen werden. Dafür kann die untenstehende Anleitung verwendet werden.
+# React Apps zum Laufen bringen
+1. Mit Eingabeaufforderung oder PowerShell Ordner mit React-App öffnen
 2. `npm install` -> npm installiert Abhängigkeiten für React
 3. `npm run dev` -> npm startet React-Development-Server; Ausgabe sollte ungefähr sein:
 ```

react-unterricht-todolist/src/App.jsx

@@ -15,6 +15,7 @@ function App() {
         };
         setTodos((currentTodos) => [newTodo, ...currentTodos]);
     }
+
     function toggleTodo(id) {
         setTodos((currentTodos) =>
             currentTodos.map((todo) =>
@@ -22,6 +23,7 @@ function App() {
             )
         );
     }
+
     function deleteTodo(id) {
         setTodos((currentTodos) =>
             currentTodos.filter((todo) => todo.id !== id)

react-unterricht-todolist/src/components/TodoForm.jsx

@@ -1,22 +1,30 @@
 import { useState } from "react";
+
 function TodoForm({ onAddTodo }) {
     const [input, setInput] = useState("");
     const [priority, setPriority] = useState("normal");
     const [validationError, setValidationError] = useState("");
+
     function handleSubmit(event) {
+
         event.preventDefault();
         const cleanedInput = input.trim();
+
         if (cleanedInput === "") {
             setValidationError("Bitte geben Sie eine Aufgabe ein.");
             return;
         }
+
         onAddTodo(cleanedInput, priority);
+
         setInput("");
         setPriority("normal");
         setValidationError("");
     }
+
     return (
         <form className="todo-form" onSubmit={handleSubmit}>
+
             <div className="form-field">
                 <label htmlFor="todo-input">Neue Aufgabe</label>
                 <input
@@ -27,6 +35,7 @@ function TodoForm({ onAddTodo }) {
                     placeholder="Zum Beispiel: React-Komponenten wiederholen"
                 />
             </div>
+
             <div className="form-field">
                 <label htmlFor="priority">Priorität</label>
                 <select
@@ -39,6 +48,7 @@ function TodoForm({ onAddTodo }) {
                     <option value="high">Hoch</option>
                 </select>
             </div>
+
             <button className="primary-button" type="submit">
                 Aufgabe hinzufügen
             </button>