crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Component (Bileşen) Mantığı Nedir?
React'te her şey bir bileşendir. Bir web sayfasını bütün olarak değil, küçük ve tekrar kullanılabilir parçalar olarak düşünürüz. Örneğin; bir navigasyon çubuğu, bir ürün kartı veya bir buton kendi başına birer bileşendir.
[]Tekrar Kullanılabilirlik: Bir buton bileşeni yazıp onu tüm sayfada farklı renklerle kullanabilirsiniz.
[]Bağımsızlık: Her bileşen kendi mantığına ve stiline sahiptir.- JSX Yapısı: React, JavaScript içinde HTML yazmamıza izin veren JSX (JavaScript XML) formatını kullanır.
JavaScript:
// Basit bir Fonksiyonel Bileşen (Functional Component)
function Selamla() {
return (
<div className="card">
<h1>Merhaba Dünyalı!</h1>
<p>Bu bir React bileşenidir.</p>
</div>
);
}2. State (Durum) Nedir?
Bir bileşenin zaman içinde değişebilen verilerine State denir. Örneğin, bir sayacın değeri, bir formun içindeki metin veya "Beğen" butonunun tıklanıp tıklanmadığı bilgisi birer state'dir. JavaScript'teki normal değişkenlerden farkı şudur: Bir state değiştiğinde, React o bileşeni otomatik olarak tekrar render eder (ekranı günceller).
3. useState Hook'u Kullanımı
React'te fonksiyonel bileşenlerde durum yönetmek için en çok kullanılan araç useState hook'udur.
JavaScript:
import React, { useState } from 'react';
function Sayac() {
// 1. Tanımlama: [değişken, değiştirme fonksiyonu] = useState(başlangıçDeğeri)
const [sayi, setSayi] = useState(0);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h2>Sayaç: {sayi}</h2>
{/* 2. Güncelleme: setSayi fonksiyonunu kullanıyoruz */}
<button onClick={() => setSayi(sayi + 1)}>Artır</button>
<button onClick={() => setSayi(sayi - 1)}>Azalt</button>
</div>
);
}4. Virtual DOM: React Neden Bu Kadar Hızlı?
Normalde JavaScript ile DOM (belge yapısı) üzerinde her değişiklik yaptığımızda tarayıcı tüm sayfayı yorar. React ise Virtual DOM (Sanal DOM) adında bir kopyayı hafızada tutar.
Veri değiştiğinde önce Sanal DOM güncellenir.
React, eski Sanal DOM ile yenisini karşılaştırır (Diffing).
Sadece değişen küçük parçayı gerçek DOM'a yansıtır.
Özet Karşılaştırma
| Özellik | Düz JavaScript (Vanilla) | React.js |
|---|---|---|
| Görünüm | HTML ve JS ayrı dosyalarda. | JSX ile iç içe (Bileşen bazlı). |
| DOM Yönetimi | Manuel (document.getElementById). | Otomatik (Virtual DOM). |
| Veri Akışı | Değişkeni güncelle, DOM'u elle değiştir. | State'i güncelle, React gerisini halletsin. |
Sonuç
React öğrenmek, web geliştirme kariyerinizde bir dönüm noktasıdır. Component yapısıyla kodunuzu düzenli tutarken, useState ile dinamik ve canlı arayüzler oluşturabilirsiniz. Karmaşık "spagetti" kodlar yerine, birbirine bağlanan şık Lego parçalarıyla uygulama inşa etmenin keyfi bambaşkadır.