React.js Fetch Kullanımı

Herkese merhabalar, bu yazımda sizlere React.js ile nasıl Fetch Kullanımı yapabileceğinizi göstereceğim.

Fetch Nedir, Ne İşe Yarar?

Fetch native bir Javascript özelliğidir. Bizlere bir API kaynağı üzerinden veri çekme olanağı sağlar.

Fetch Kullanımı

users.js isimli bir componentimiz olsun. Bu component’e üyelerimizi API ile çekmeye çalışalım.

Üye verisi olarak bizlere fake veri sunan jsonplaceholder.typicode.com sitesinden faydalanacağım. Sizlerde bu siteyi çalışmalar yaparken kullanabilirsiniz.

Öncelikle componentimize React, useState ve useEffect’i dahil ediyoruz:

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

Ardından functional componentimizi oluşturuyoruz ve gerekli kodlarımızı oluşturuyoruz:

function Users(){

const [users, setUsers] = useState([]); // verilerimizi tutacak olan useState'imizi oluşturduk.
const [loading, setLoading] = useState(true); // veriler gelirken internet hızından kaynaklı yükleme gecikmelerinde ekranda çıkacak Yükleniyor.. yazısını ayarlamak için ekliyoruz.

useEffect(()=>{

  fetch("https://jsonplaceholder.typicode.com/users") // API'ın urlini giriyoruz.
     .then(res => res.json()) // json olarak parse ediyoruz.
     .then(data => setUsers(data)) // parse edilen veriyi alıyoruz.
     .finally(()=>setLoading(false)) // yükleme olduktan sonra loading'i kapatmasını söylüyoruz.
},[])

return(
  <div>
    <h2>Kullanıcılar</h2>
      {loading && <div>Yükleniyor..</div>} // eğer yükleme sürüyorsa ekranda yükleniyor yazısının çıkmasını söylüyoruz.
    <ul>
      {users.map((user)=>( // verileri map ile çekiyoruz.
        <li key={user.id}>{user.name}</li> // verileri ekrana yazdırıyoruz.
      ))}
    </ul>
  </div>
)
}

export default Users

Evet bu yazımızda React.js’te fetch ile nasıl veri çekebileceğimizi gördük. Umarım işinize yaramıştır. Sonraki yazılarımda görüşmek üzere :)