127 lines
3.5 KiB
Markdown
127 lines
3.5 KiB
Markdown
# 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)
|
||
```
|