ReactJS Ders 9 | API’lerden Veri Almak

API‘lerden veri almak ve bu verileri React bileşenlerine entegre etmek için fetch veya axios gibi kütüphaneleri kullanarak örnekler yapalım

Örnek 1 (Fetch ile veri çekme):

import React, { useEffect, useState } from 'react';

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Gönderi Listesi</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Bu örnekte, JSONPlaceholder API‘sinden gönderi verilerini çekmek için fetch fonksiyonunu kullanıyoruz. useEffect hook’u ile bileşenin oluşturulduğunda (componentDidMount) API’ye istek atıyoruz ve aldığımız veriyi setPosts fonksiyonuyla state’e kaydediyoruz.

Daha sonra, gönderileri haritalayarak bir liste oluşturuyoruz. Her bir gönderi için bir liste öğesi oluştururken key özelliği olarak gönderi ID‘sini kullanıyoruz.

Örnek 2 (Axios ile veri çekme):

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [photos, setPhotos] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/photos')
      .then((response) => setPhotos(response.data));
  }, []);

  return (
    <div>
      <h1>Fotoğraf Listesi</h1>
      <ul>
        {photos.map((photo) => (
          <li key={photo.id}>{photo.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Bu örnekte, JSONPlaceholder API’sinden fotoğraf verilerini çekmek için axios kütüphanesini kullanıyoruz. useEffect hook’u ile bileşenin oluşturulduğunda (componentDidMount) API’ye GET isteği yapıyoruz ve aldığımız veriyi setPhotos fonksiyonuyla state’e kaydediyoruz.

Daha sonra, fotoğrafları haritalayarak bir liste oluşturuyoruz. Her bir fotoğraf için bir liste öğesi oluştururken key özelliği olarak fotoğrafın ID‘sini kullanıyoruz.

Bu örneklerde, farklı API endpoint‘lerinden veri çekme işlemini görebilirsiniz. Hem fetch hem de axios ile aynı amaca hizmet eden farklı yöntemler olduğunu unutmayın. Seçim size kalmıştır, projenizin gereksinimlerine ve tercihlerinize göre uygun olanı kullanabilirsiniz.