ToDo-App – React Beispiel

Einfache ToDo-Web-App für den Frontend-Unterricht.
Gebaut mit React 18 und Vite – läuft vollständig im Browser, kein eigener Server nötig.

---

Projektstruktur

WebDev-React-ToDo-Example/
├── index.html              # HTML-Einstiegspunkt (Root-Element für React)
├── vite.config.js          # Vite Build-Tool Konfiguration
├── package.json            # Abhängigkeiten und npm-Scripts
└── src/
    ├── main.jsx            # React-Einstiegspunkt (createRoot)
    ├── App.jsx             # Haupt-Komponente (State, Effekte, Handler)
    ├── api.js              # API-Service (alle fetch()-Aufrufe)
    ├── index.css           # Globales Stylesheet (kein Framework)
    └── components/
        ├── TodoForm.jsx    # Formular: neues ToDo erstellen
        ├── TodoList.jsx    # Liste + Pagination
        └── TodoItem.jsx    # Einzelnes ToDo (Checkbox, Löschen)

---

Erste Schritte

# 1. Abhängigkeiten installieren
npm install

# 2. Entwicklungsserver starten (mit Hot Reload)
npm run dev

# 3. Produktions-Build erstellen
npm run build

Nach npm run dev ist die App unter http://localhost:5173 erreichbar.

---

Verwendete Technologien

Technologie	Zweck
React 18	UI-Bibliothek (Komponenten, State, Hooks)
Vite	Build-Tool & Dev-Server
Fetch API (Browser built-in)	HTTP-Anfragen an die REST-API
CSS (vanilla)	Styling ohne externe Bibliotheken

---

API

Die App kommuniziert mit der REST-API unter:

https://webdev.iten-web.ch/10003/api/

Die App verwendet Best-Practice-Routing mit REST-Pfaden.

Methode	URL	Beschreibung
GET	/todos?page=1&limit=10	Liste abrufen (paginiert)
POST	/todos	Neues ToDo erstellen
PATCH	/todos/{id}	Felder teilweise aktualisieren
DELETE	/todos/{id}	ToDo löschen

Alle API-Aufrufe sind in src/api.js gekapselt.

---

Automatisches Aktualisieren (Polling)

Die App lädt die aktuell sichtbare Seite alle 5 Sekunden automatisch neu.

• Intervall: 5000 ms in src/App.jsx
• Technik: setInterval(...) in einem useEffect(...)
• Cleanup: clearInterval(...), damit beim Unmount keine Hintergrund-Timer aktiv bleiben

Damit unnötige Re-Renders vermieden werden, vergleicht die App die neu geladenen ToDos mit den bereits angezeigten Daten (areTodosEqual).

• Keine Änderung: State bleibt unverändert, DOM bleibt wie es ist
• Änderung vorhanden: State wird aktualisiert, React rendert die betroffenen Elemente neu

---

Wichtige React-Konzepte im Code

Komponenten

Jede .jsx-Datei exportiert eine Funktion, die JSX zurückgibt.
JSX ist eine HTML-ähnliche Syntax, die zu React.createElement()-Aufrufen kompiliert wird.

Props

Daten fliessen von Eltern- zu Kindkomponenten über Props (Parameter der Funktion):

<TodoItem todo={todo} onDelete={handleDelete} />

State (useState)

Lokaler Zustand einer Komponente. Ändert sich der State, rendert React die Komponente neu:

const [todos, setTodos] = useState([])

Effekte (useEffect)

Seiteneffekte (z.B. API-Aufruf) nach dem Render ausführen:

useEffect(() => {
  loadTodos()
}, [page]) // läuft neu, wenn sich `page` ändert

Datenfluss

App (State)
  ↓ Props
TodoList → TodoItem
  ↑ Callbacks (onToggle, onDelete)
App (State aktualisieren)