# 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

```bash
# 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](https://react.dev) | UI-Bibliothek (Komponenten, State, Hooks) |
| [Vite](https://vitejs.dev) | 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):
```jsx
<TodoItem todo={todo} onDelete={handleDelete} />
```

### State (`useState`)
Lokaler Zustand einer Komponente. Ändert sich der State, rendert React die Komponente neu:
```jsx
const [todos, setTodos] = useState([])
```

### Effekte (`useEffect`)
Seiteneffekte (z.B. API-Aufruf) nach dem Render ausführen:
```jsx
useEffect(() => {
  loadTodos()
}, [page]) // läuft neu, wenn sich `page` ändert
```

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