React’ta useState Kullanımı (Dinamik Veri Yönetimi)
React projelerinde bileşen içinde değişen verileri yönetmek için useState Hook’u kullanılır. Bu örnekte butona her tıklandığında sayacı artıran basit ama temel bir state yönetimi yapıyoruz. Bu yapı, tüm etkileşimli arayüzlerin başlangıç noktasıdır — formlar, filtreler, slider’lar hepsi aynı mantıkla çalışır.
import React, { useState } from "react";
function Sayac() {
const [sayac, setSayac] = useState(0);
return (
<div style={{ textAlign: "center", padding: 30 }}>
<h2>Sayac: {sayac}</h2>
<button onClick={() => setSayac(sayac + 1)}>Artır</button>
<button onClick={() => setSayac(0)} style={{ marginLeft: 10 }}>
Sıfırla
</button>
</div>
);
}
export default Sayac;Kod Açıklaması
React projelerinde bileşen içinde değişen verileri yönetmek için useState Hook’u kullanılır.
Bu örnekte butona her tıklandığında sayacı artıran basit ama temel bir state yönetimi yapıyoruz.
Bu yapı, tüm etkileşimli arayüzlerin başlangıç noktasıdır — formlar, filtreler, slider’lar hepsi aynı mantıkla çalışı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, { useEffect, useState } from "react";
function KullaniciListesi() {
const [veri, setVeri] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/us...React’ta useEffect Kullanımı (Veri Çekme ve Güncelleme)
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.