JSX Nedir? Örneklerle React JSX Sözdizimi Kuralları

JSX, kodunun içine HTML benzeri işaretleme yazmanı sağlayan bir JavaScript sözdizimi uzantısıdır. React bileşenleri ekranda ne görünmesi gerektiğini tarif etmek için JSX döndürür, bir derleme aracı da onu sıradan JavaScript fonksiyon çağrılarına derler. HTML'e benzer, ama birkaç kural farklıdır ve süslü parantezler işaretlemenin içine herhangi bir JavaScript değeri koymanı sağlar.

export default function App() {
    const user = { name: 'Ada Lovelace', role: 'Engineer', skills: ['math', 'code'] };
    const initials = user.name.split(' ').map((part) => part[0]).join('');

    return (
        <div className="card">
            <h2>{user.name}</h2>
            <p>
                {initials} works as an {user.role.toLowerCase()} and knows{' '}
                {user.skills.length} skills.
            </p>
            <ul>
                {user.skills.map((skill) => (
                    <li key={skill}>{skill.toUpperCase()}</li>
                ))}
            </ul>
        </div>
    );
}

{} içindeki her şey JavaScript'tir: bir özellik, bir metot çağrısı, hatta bir diziyi liste öğelerine çeviren map. skills dizisine 'design' ekle; hem sayı hem de liste güncellenir.

JSX kuralları

Tek bir kök öğe döndür

Bir bileşen tek bir değer döndürür, bu yüzden JSX'inin tek bir ebeveyne ihtiyacı vardır. En üst düzeyde iki kardeş öğe sözdizimi hatasıdır. Sayfada fazladan bir <div> istemiyorsan onları bir fragment ile sar, <>...</>:

// Error: Adjacent JSX elements must be wrapped in an enclosing tag
return (
    <h1>Title</h1>
    <p>Text</p>
);

// OK: a fragment groups them without adding a DOM element
return (
    <>
        <h1>Title</h1>
        <p>Text</p>
    </>
);

Gruba bir key vermen gerektiğinde uzun biçimi kullan: <Fragment key={id}>; bkz. fragment'lar.

Her etiketi kapat

HTML bazı etiketleri açık bırakmana izin verir. JSX izin vermez. Çocuğu olmayan öğeler kendilerini /> ile kapatır: <img />, <br />, <input /> ve <Avatar /> gibi kendi bileşenlerin.

className, htmlFor ve camelCase özellikler kullan

JSX özellikleri bir JavaScript nesnesinin anahtarlarına dönüşür, bu yüzden JavaScript adlandırma kurallarına uyarlar. class ve for JavaScript'te ayrılmış sözcüklerdir; JSX'in className ve htmlFor kullanmasının nedeni budur. Birden çok sözcükten oluşan özellikler ve tüm olay işleyicileri camelCase yazılır: tabIndex, maxLength, autoFocus, onClick, onChange. İki istisna tirelerini korur: aria-* ve data-* özellikleri tam olarak HTML'deki gibi yazılır.

export default function App() {
    return (
        <form onSubmit={(e) => e.preventDefault()}>
            <style>{`
                .field { display: block; margin-bottom: 8px; }
                .hint { color: #777; font-size: 13px; }
            `}</style>
            <label htmlFor="email" className="field">
                Email
            </label>
            <input id="email" type="email" maxLength={40} autoComplete="off" />
            <p className="hint" data-testid="hint" aria-live="polite">
                Clicking the label focuses the input, because htmlFor matches its id.
            </p>
            <button type="submit" disabled={false}>
                Send
            </button>
        </form>
    );
}

className="field" ifadesini class="field" olarak değiştir. Etiket stilini korur, çünkü React özelliği yine de ayarlar, ama bir geliştirme derlemesi "Invalid DOM property class. Did you mean className?" uyarısını kaydeder. Önizleme bir production derlemesi gibi çalışır, bu yüzden bu uyarıyı burada görmezsin; className kullan. Bir metin özelliği tırnak kullanır (type="email"); diğer tüm değerler süslü parantez kullanır (maxLength={40}, disabled={false}).

Süslü parantezler deyim değil, ifade alır

{} içine değer üreten her şeyi yazabilirsin: bir değişken, aritmetik, bir fonksiyon çağrısı, bir ternary, &&, bir template literal. if, for ve const gibi deyimler bir değer üretmez, bu yüzden oraya giremezler. İşi return'den önce yap ya da bir ifade biçimi kullan:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    let message;
    if (count === 0) {
        message = 'No messages';
    } else {
        message = `${count} new message${count === 1 ? '' : 's'}`;
    }

    return (
        <div>
            <p>{message}</p>
            <p>{count > 5 ? 'Inbox is busy' : 'Inbox is calm'}</p>
            {count && <p>You have mail.</p>}
            <button onClick={() => setCount(count + 1)}>New message</button>
            <button onClick={() => setCount(0)}>Clear</button>
        </div>
    );
}

Tıklamadan önce dikkatlice bak: sayfada başıboş bir 0 görünüyor. Sayı sıfır olduğunda count && <p>...</p> ifadesi 0 olarak değerlendirilir ve React sayıları, sıfırı bile, render eder. Onu count > 0 && <p>You have mail.</p> olarak değiştir, 0 kaybolur. false, null, undefined ve true hiçbir şey render etmez; &&'nin solundaki bir boolean'ın güvenli olmasının nedeni budur. Koşullu render sayfası bu kalıpları anlatıyor.

Satır içi stiller bir nesne kullanır

style özelliği bir CSS metni değil, bir JavaScript nesnesi alır. "Çift süslü parantez" görüntüsü buradan gelir: dıştaki çift "burada JavaScript var" demektir, içteki çift ise nesne literal'idir. Özellik adları camelCase'dir (backgroundColor, fontSize) ve çoğu boyut özelliğinde düz bir sayı piksel anlamına gelir.

import { useState } from 'react';

export default function App() {
    const [big, setBig] = useState(false);
    const boxStyle = {
        padding: 12,
        borderRadius: 8,
        backgroundColor: big ? '#dbeafe' : '#f3f4f6',
        fontSize: big ? 24 : 16,
    };

    return (
        <div>
            <div style={boxStyle}>Styled with a JavaScript object</div>
            <p style={{ color: '#555', marginTop: 8 }}>Double braces: an object literal.</p>
            <button onClick={() => setBig(!big)}>Toggle size</button>
        </div>
    );
}

Stil bir nesne olduğu için, diğer her değer gibi state'ten hesaplanabilir. fontSize: big ? 24 : 16 ifadesini fontSize: big ? '2em' : '1em' olarak değiştirmeyi dene: metinler birimleriyle birlikte olduğu gibi aktarılır.

Yorumlar

JSX içindeki bir yorum süslü parantezlere yazılır: {/* this is a comment */}. HTML yorumları (<!-- -->) sözdizimi hatasıdır. İşaretlemenin dışında, fonksiyon gövdesinde sıradan // yorumları her zamanki gibi çalışır.

return (
    <div>
        {/* The header is hidden on small screens */}
        <Header />
    </div>
);

HTML'i JSX'e dönüştürme

Bir bileşene HTML yapıştırmak yaygın bir ilk adımdır ve çoğu çalışır. Genellikle yapman gereken değişiklikler şunlar:

• class, className olur; for da htmlFor olur.
• Boş etiketler kendini kapatır: <br>, <br /> olur; <img src="a.png">, <img src="a.png" /> olur.
• style="color: red; font-size: 14px", style={{ color: 'red', fontSize: 14 }} olur.
• Olay özellikleri metin değil, fonksiyon alır: onclick="save()", onClick={save} olur.
• Özellik adları camelCase olur: tabindex, tabIndex olur; SVG'nin stroke-width özelliği de strokeWidth olur.
• <!-- comments -->, {/* comments */} olur.
• En üst düzeydeki birden çok öğe tek bir ebeveyne ya da bir fragment'a ihtiyaç duyar.

Çevrimiçi HTML'den JSX'e dönüştürücüler bu adımları senin yerine yapar, ama bunları bilmek birini atladığında hata mesajlarını kolayca okumanı sağlar.

JSX neye derlenir

Tarayıcılar JSX çalıştıramaz. Bir derleyici (Vite ve framework'lerin senin için çalıştırdığı Babel, SWC ya da Oxc gibi) her etiketi react/jsx-runtime içinden bir fonksiyon çağrısına çevirir:

// What you write
const element = <h1 className="title">Hello, {name}</h1>;
const button = <Button size="small">OK</Button>;

// What the compiler produces (roughly)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const element = _jsxs('h1', { className: 'title', children: ['Hello, ', name] });
const button = _jsx(Button, { size: 'small', children: 'OK' });

Küçük harfli bir etiket bir metne ('h1', bir HTML öğesi), büyük harfle başlayan ise fonksiyonuna bir referansa (Button) dönüşür; özellikler props nesnesi, içerik de children olur. Daha eski kurulumlar bunun yerine React.createElement(type, props, ...children) çağrısına derlerdi; eski dosyaların React'ten hiç söz etmeseler bile import React from 'react' ile başlamasının nedeni budur. Çağrı, React öğesi (React element) denen düz bir nesne döndürür. Birini konsola yazdırabilirsin:

function Badge({ label }) {
    return <span style={{ border: '1px solid', padding: '0 6px' }}>{label}</span>;
}

export default function App() {
    const heading = <h3 className="title">Hello</h3>;
    const badge = <Badge label="new" />;

    console.log('heading type:', heading.type, 'props:', heading.props);
    console.log('badge type is the Badge function:', badge.type === Badge);

    return (
        <div>
            {heading}
            {badge}
        </div>
    );
}

Konsol, heading'in sadece veri olduğunu gösterir: bir 'h3' tipi ve bir props nesnesi. JSX'in değişkenlerde saklanabilmesi, fonksiyonlara aktarılabilmesi ve onlardan döndürülebilmesinin nedeni de budur.

JSX metni senin için kaçışlar

Süslü parantezlere koyduğun her metin HTML olarak değil, her zaman metin olarak render edilir. Bir kullanıcı bir yorum kutusuna <img src=x onerror=alert(1)> yazarsa React bir görsel etiketi oluşturmak yerine bu karakterleri ekranda gösterir. Bu, siteler arası betik çalıştırmanın (XSS) en yaygın biçimini varsayılan olarak engeller.

export default function App() {
    const comment = 'Nice post! <b>bold?</b> <img src="x" onerror="alert(1)">';
    const trustedHtml = 'This came from <b>our own</b> markdown renderer.';

    return (
        <div>
            <p>{comment}</p>
            <p dangerouslySetInnerHTML={{ __html: trustedHtml }} />
        </div>
    );
}

İlk paragraf etiketleri düz karakterler olarak yazdırır. İkincisi dangerouslySetInnerHTML kullanır; bu, kaçışlamayı atlar ve metni gerçek HTML olarak ekler, bu yüzden "our own" kalın görünür. Uzun ad bir uyarıdır: oraya yalnızca kendin ürettiğin ya da DOMPurify gibi bir temizleyiciyle temizlediğin HTML'i ver. Oraya kullanıcı girdisi vermek, JSX'in kapattığı XSS açığını yeniden açar.