React API Integration Bootcamp - REST, Async & Data Flow

API (Application Programming Interface), frontend ile backend arasında veri alışverişi sağlayan bir köprüdür. React uygulamaları genellikle backend API'lerden veri çeker. Bu veri JSON formatında gelir ve UI içinde gösterilir. API olmadan modern web uygulamaları dinamik çalışamaz.

fetch('https://api.example.com/users')

fetch fonksiyonu ile API'den veri çekilir. GET request en temel veri okuma yöntemidir. React içinde useEffect ile birlikte kullanılır.

fetch(url).then(res => res.json())

React'te API çağrıları genellikle useEffect içinde yapılır. Component ilk render olduğunda veri çekilir. State ile UI güncellenir.

useEffect(() => { fetchData() }, [])

API çağrılarında loading ve error state yönetimi kritik öneme sahiptir. Kullanıcı deneyimini doğrudan etkiler.

const [loading, setLoading] = useState(false);

POST request ile backend'e veri gönderilir. Form submission ve kayıt işlemleri bu şekilde yapılır.

fetch(url, { method: 'POST', body: JSON.stringify(data) })

Axios, fetch'e göre daha gelişmiş HTTP client'tır. Error handling ve interceptors sağlar.

axios.get('/api/users')

JWT token API authentication için kullanılır. Login sonrası token alınır ve request header'a eklenir.

headers: { Authorization: `Bearer ${token}` }

API logic custom hook içine alınarak reusable hale getirilir. Bu yaklaşım clean code sağlar.

function useFetch(url) {}

React Query server state yönetimi için kullanılır. Cache, refetch ve sync işlemlerini otomatik yapar.

useQuery(['users'], fetchUsers)

Bu projede login sistemi, veri listeleme, form gönderme ve protected route içeren gerçek bir API tabanlı uygulama yapılır.

// full API app