React’ta useEffect Kullanımı (Veri Çekme ve Güncelleme)
React’ta useEffect Hook’u, bileşen ilk yüklendiğinde veya belirli bir değişken değiştiğinde çalıştırılacak kodları tanımlar. Bu örnekte, bileşen her yüklendiğinde API’den veri çeken basit bir uygulama oluşturuyoruz. Gerçek projelerde bu yapı genellikle “sayfa açıldığında veriyi yükle” mantığı için kullanılır.
import React, { useEffect, useState } from "react";
function KullaniciListesi() {
const [veri, setVeri] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((data) => setVeri(data))
.catch(() => console.log("Veri çekme hatası!"));
}, []);
return (
<div style={{ padding: 30 }}>
<h2>Kullanıcı Listesi</h2>
<ul>
{veri.map((kullanici) => (
<li key={kullanici.id}>{kullanici.name}</li>
))}
</ul>
</div>
);
}
export default KullaniciListesi;Kod Açıklaması
React’ta useEffect Hook’u, bileşen ilk yüklendiğinde veya belirli bir değişken değiştiğinde çalıştırılacak kodları tanımlar.
Bu örnekte, bileşen her yüklendiğinde API’den veri çeken basit bir uygulama oluşturuyoruz.
Gerçek projelerde bu yapı genellikle “sayfa açıldığında veriyi yükle” mantığı için kullanılır.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
import React, { useState } from "react";
function Sayac() {
const [sayac, setSayac] = useState(0);
return (
<div style={{ textAlign: "center", padding: 30 }}>
<h2>Sayac: {sayac}...React’ta useState Kullanımı (Dinamik Veri Yönetimi)
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.