React.js - Modern Frontend Geliştirme

React.js - Modern Frontend Geliştirme

Bu döküman, Yazılım Uzmanlığı kategorisinde İleri Seviye eğitim materyalidir. Aşağıda konunun detaylı açıklaması, örnekler ve pratik alıştırmalar bulacaksınız.

React Bileşen Yapısı

function Merhaba({ isim }) {\n    return (\n        <div className="kart">\n            <h2>Merhaba, {isim}!</h2>\n        </div>\n    );\n}

useState Hook

function Sayac() {\n    const [sayi, setSayi] = useState(0);\n    return (\n        <div>\n            <p>Sayı: {sayi}</p>\n            <button => setSayi(sayi + 1)}>Artır</button>\n        </div>\n    );\n}

useEffect Hook

function VeriCek() {\n    const [veri, setVeri] = useState([]);\n    \n    useEffect(() => {\n        fetch("/api/ogrenciler")\n            .then(res => res.json())\n            .then(data => setVeri(data));\n    }, []);\n    \n    return (\n        <ul>\n            {veri.map(item => <li key={item.id}>{item.ad}</li>)}\n        </ul>\n    );\n}