12. Fetch API — komunikacja z REST API w React

Fetch API — brama do serwera

Fetch API to wbudowany w przeglądarkę interfejs do wykonywania zapytań HTTP. W React integrujemy go z useEffect i async/await do pobierania i modyfikowania danych na serwerze. Kluczowy wzorzec: trzy stany komponentu — loading, error, data.

Bez komunikacji z serwerem React wyświetlałby tylko statyczne dane. Fetch API (lub biblioteki jak Axios/React Query) to podstawa każdej aplikacji webowej z dynamicznymi danymi.

1. Opisać Fetch API — jak działa Promise-based HTTP
2. Wyjaśnić wzorzec loading/error/data w komponentach React
3. Opisać wszystkie metody HTTP: GET, POST, PUT, PATCH, DELETE
4. Omówić AbortController i race conditions

1. Fetch API podstawy — URL, zwraca Promise, response.ok, response.json()
2. async/await z fetch — dwuetapowe odczytywanie
3. Wzorzec loading/error/data — trzy stany komponentu
4. HTTP methods — GET, POST, PUT, DELETE z nagłówkami i body
5. AbortController — anulowanie requestu przy zmianie zależności

• Struktura minimalna

1. Wstęp — czym jest HTTP, REST API
2. Rozdział 1: Fetch API — podstawy, async/await, błędy HTTP
3. Rozdział 2: Wzorzec loading/error/data — trzy stany
4. Rozdział 3: HTTP methods — GET/POST/PUT/DELETE z przykładami
5. Podsumowanie
6. Bibliografia

Fetch to łącznik React z serwerem!

Używaj JSONPlaceholder do przykładów kodu — to publiczne API zawsze dostępne, bez rejestracji. Pokaż realne requesty do /users, /posts, /comments.