Yükleniyor...

JSX Referansı

JSX (JavaScript XML), React’te bileşen tabanlı geliştirmenin temel yapı taşlarından biridir. JSX, JavaScript kodu içinde HTML benzeri sözdizimini kullanmamıza olanak tanır. Bu sayede bileşenlerin UI yapısı açık, okunabilir ve kolayca yönetilebilir hale gelir. JSX’in önemi, sanal DOM ile etkileşim kurarken React’in nasıl render işlemlerini optimize ettiğini anlamaktan geçer. JSX, React elementlerini oluşturmak için React.createElement() fonksiyonunun bir kısayoludur, ancak geliştirici deneyimini çok daha sezgisel hale getirir.
JSX Referansı, React bileşenlerinin nasıl yazıldığını, state ve props yönetimini nasıl entegre ettiğini ve veri akışını nasıl yönettiğini anlamak için kritik öneme sahiptir. Geliştiriciler JSX sayesinde bileşenlerin yaşam döngüsüne uygun, performans odaklı ve yeniden kullanılabilir yapılar oluşturabilirler.
Bu referansta okuyucu, JSX’in sözdizimi kurallarını, ifadelerin gömülmesini, koşullu render işlemlerini, liste render’larını, event binding ve state yönetimiyle entegrasyonunu öğrenecektir. Modern web uygulamaları ve SPA’larda JSX, UI mantığının doğrudan JavaScript ile birleşmesini sağlar. Böylece bileşen mantığı, görünüm ve veri yönetimi tek bir yerde birleşir — bu da React’in güçlü, esnek ve ölçeklenebilir doğasının temelini oluşturur.

Temel Örnek

jsx
JSX Code 
import React, { useState } from "react";

function Sayac() {
const [sayi, setSayi] = useState(0);

const artir = () => setSayi(prev => prev + 1);
const azalt = () => setSayi(prev => prev - 1);

return (
<div style={{ textAlign: "center", marginTop: "50px" }}> <h2>JSX Örneği: Sayaç Bileşeni</h2> <p>Güncel Değer: {sayi}</p> <button onClick={artir}>Arttır</button> <button onClick={azalt}>Azalt</button> </div>
);
}

export default Sayac;

Yukarıdaki örnek, JSX’in React bileşenleri içinde nasıl kullanıldığını göstermektedir. Sayac adlı fonksiyonel bileşen, React’in useState hook’unu kullanarak durum yönetimini sağlar. JSX, bu bileşenin render ettiği kullanıcı arayüzünü açıkça tanımlar: <div>, <h2>, <p> ve <button> gibi elementler doğrudan JSX sözdizimiyle oluşturulur.
{sayi} ifadesi JSX’in JavaScript ifadelerini gömebilme yeteneğini gösterir. Bu, bileşenin durumuna (state) göre UI’nin dinamik olarak değişmesini sağlar. onClick olayları ise JSX içinde doğrudan fonksiyon referanslarıyla bağlanır — bu, event binding işlemini kolaylaştırır.
Ayrıca JSX, gereksiz render’ları önlemek için React’in sanal DOM fark algılama mekanizmasıyla birlikte çalışır. Bu, performansı artırır ve bileşenlerin yalnızca gerekli olduğunda güncellenmesini sağlar. Kodun okunabilirliği yüksek, hata riski düşük ve yeniden kullanılabilir yapıdadır. Bu, React projelerinde JSX kullanımının en büyük avantajlarından biridir. Gerçek dünyada, bu yapı birçok bileşen arasında veri paylaşımını kolaylaştırır ve uygulama ölçeklendikçe tutarlı bir UI mimarisi sağlar.

Pratik Örnek

jsx
JSX Code 
import React, { useState, useEffect } from "react";

function KullaniciListesi() {
const [kullanicilar, setKullanicilar] = useState([]);
const [yukleniyor, setYukleniyor] = useState(true);

useEffect(() => {
fetch("[https://jsonplaceholder.typicode.com/users](https://jsonplaceholder.typicode.com/users)")
.then(res => res.json())
.then(data => {
setKullanicilar(data);
setYukleniyor(false);
})
.catch(() => setYukleniyor(false));
}, []);

if (yukleniyor) return <p>Veriler yükleniyor...</p>;

return ( <div> <h2>Kullanıcı Listesi</h2> <ul>
{kullanicilar.map(k => ( <li key={k.id}>{k.name} ({k.email})</li>
))} </ul> </div>
);
}

export default KullaniciListesi;

Advanced React Implementation

jsx
JSX Code 
import React, { useState, useMemo, useCallback } from "react";

function FiltreliListe({ items }) {
const [arama, setArama] = useState("");

const filtreliItems = useMemo(() => {
return items.filter(i => i.toLowerCase().includes(arama.toLowerCase()));
}, [items, arama]);

const degisimHandler = useCallback(e => setArama(e.target.value), []);

return ( <div> <input
type="text"
placeholder="Ara..."
value={arama}
onChange={degisimHandler}
/> <ul>
{filtreliItems.map((i, index) => ( <li key={index}>{i}</li>
))} </ul> </div>
);
}

export default FiltreliListe;

React’te JSX kullanırken dikkat edilmesi gereken en iyi uygulamalar ve sık yapılan hatalar aşağıda özetlenmiştir.
En iyi uygulamalar arasında bileşenlerin tek bir sorumluluğa sahip olması, state yönetiminin minimal tutulması ve veri akışının tek yönlü (one-way data flow) olması yer alır. JSX içinde inline fonksiyon tanımlarından kaçınılmalı ve useCallback, useMemo gibi hook’lar ile performans iyileştirmeleri yapılmalıdır.
Yaygın hatalardan biri prop drilling’dir — bu, verilerin gereksiz yere birçok bileşenden geçmesiyle oluşur. Ayrıca state’in doğrudan mutasyonu (state = newValue) React’te render hatalarına neden olur. Bunun yerine setState veya useState fonksiyonları kullanılmalıdır.
Debugging aşamasında JSX hatalarını anlamak için React DevTools büyük kolaylık sağlar. Performans açısından JSX’in gereksiz render işlemlerini tetiklememesi için key prop’ları doğru tanımlanmalıdır. Güvenlik yönünden JSX, HTML injection saldırılarına karşı korunmuştur ancak dangerouslySetInnerHTML kullanımı dikkatli yapılmalıdır. JSX Referansı, React bileşenlerinin güvenli, optimize ve okunabilir şekilde geliştirilmesini sağlar.

📊 Kapsamlı Referans

React Element/Method Description Syntax Example Notes
React.createElement JSX'in derlendiği temel yapı React.createElement('div', null, 'Merhaba') <div>Merhaba</div> JSX yerine kullanılabilir
useState State yönetimi sağlar const [s, setS] = useState(0) setS(s + 1) Fonksiyonel bileşenlerde state
useEffect Yan etkileri yönetir useEffect(()=>{}, []) Veri çekme işlemleri için Lifecycle benzeri
useMemo Hesaplamaları optimize eder useMemo(fn, [deps]) useMemo(()=>filt, [val]) Performans optimizasyonu
useCallback Fonksiyon referansını saklar useCallback(fn, [deps]) onClick={handle} Gereksiz render’ı engeller
key prop Liste render’larında benzersiz anahtar <li key={id}> JSX listelerinde Render farklarını izler
props Bileşenlere veri aktarımı <Bileşen prop="değer" /> Fonksiyon parametresi olarak gelir Salt okunur
state Bileşen içi veri durumu const [x, setX] = useState(0) setX(x+1) Yalnızca bileşen içinde
rendering UI’nin yeniden çizilmesi ReactDOM.render(...) Render süreci Sanal DOM farkı algılar
fragment Ekstra DOM elemanı olmadan sarmalayıcı <></> <><p>...</p></> Performanslı sarmalayıcı
conditional rendering Koşullu UI oluşturma {isLogin ? <Panel/> : <Login/>} JSX içinde koşul Dinamik UI
map() Liste render etmek için kullanılır array.map(item=>... <ul>{arr.map(...)} Key gerektirir
className CSS sınıfı tanımlamak için <div className="box" /> JSX içinde class yerine HTML farklılıkları
style prop Inline stil uygulamak için <div style={{color:'red'}}/> JS nesnesi formatında CSS string değil
dangerouslySetInnerHTML HTML içerik ekleme <div dangerouslySetInnerHTML={{__html:html}}/> Dikkatli kullanılmalı
component lifecycle Bileşen yaşam döngüsü useEffect, useLayoutEffect Yan etki kontrolü React 16+ için Hook tabanlı
default props Varsayılan prop değerleri Component.defaultProps={...} <Comp /> Eksik prop’lar için değer
propTypes Tip kontrolü sağlar Component.propTypes={...} React’tan import edilir Geliştirme aşamasında
context Global veri paylaşımı sağlar useContext(MyContext) <MyContext.Provider> Prop drilling’e çözüm
memo Bileşenleri hafızada saklar React.memo(Component) Performans artırır PureComponent alternatifi
error boundaries Hata yakalama bileşenleri componentDidCatch <ErrorBoundary> JSX hatalarını yönetir
ref DOM erişimi sağlar useRef() ref={myRef} Doğrudan DOM erişimi
forwardRef Ref’i alt bileşene aktarır forwardRef((props, ref)=>...) Komponent ile ref paylaşımı Formlarda yaygın
children Alt elemanları temsil eder props.children <Parent><Child/></Parent> Slot mantığı
cloneElement Bileşen kopyalama React.cloneElement(el, props) Dinamik bileşen üretimi Props ekleme için
Suspense Lazy yükleme yönetimi <Suspense fallback="..."> Lazy bileşenler için React 18+
lazy Dinamik bileşen yükleme const Comp = lazy(()=>import(...)) Kod bölme sağlar Performans odaklı

📊 Complete React Properties Reference

Property Values Default Description React Support
className string none JSX içinde CSS sınıfı tanımlar React 16+
style object {} Inline CSS nesnesi React 16+
key string none Liste elemanları için benzersiz anahtar React 16+
ref function/object null DOM veya bileşene referans React 16+
dangerouslySetInnerHTML object null HTML içeriği doğrudan render eder React 16+
onClick function null Tıklama olayı bağlar React 16+
onChange function null Input değişimlerini yönetir React 16+
defaultValue string '' Input varsayılan değeri React 16+
checked boolean false Checkbox kontrolü React 16+
disabled boolean false Elemanı devre dışı bırakır React 16+
value string '' Form elemanlarının değeri React 16+
placeholder string '' Form alanı açıklaması React 16+

JSX Referansı’nı öğrendikten sonra geliştirici, React bileşenlerinin yapısını ve veri akışını daha derinlemesine anlayabilir. JSX, React projelerinde UI mantığını sadeleştirir, okunabilirliği artırır ve hataya açık alanları azaltır.
Sonraki adım olarak React Router, Context API ve performans optimizasyon konularına geçmek önerilir. Bunlar JSX ile birleştiğinde ileri seviye bileşen mimarisi oluşturmayı mümkün kılar. Gerçek projelerde JSX kullanımını sürekli pratiğe dökmek, özellikle karmaşık arayüzlerde sürdürülebilirlik sağlar.
JSX, modern web uygulamalarında hem performans hem de esneklik açısından vazgeçilmezdir. Geliştiricilerin JSX’i iyi anlaması, React ekosisteminin tamamını daha etkili kullanmalarına yardımcı olur.

İlgili Arama Terimleri

Kullanıcılar bu içeriği bu terimlerle de araştırıyor:

JSX referansı React React JSX kılavuzu JSX sözdizimi React React bileşen JSX örnekleri ileri seviye JSX React React JSX state yönetimi JSX performans optimizasyonu React JSX veri akışı React JSX lifecycle JSX en iyi uygulamalar React JSX hataları JSX ve props React JSX rendering React React JSX ileri düzey JSX React rehberi

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
3
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
React Ders