Apa Itu JSX? Aturan Sintaks JSX React dengan Contoh

JSX adalah ekstensi sintaks JavaScript yang memungkinkanmu menulis markup mirip HTML di dalam kodemu. Komponen React mengembalikan JSX untuk mendeskripsikan apa yang harus tampil di layar, dan sebuah build tool mengompilasinya menjadi pemanggilan fungsi JavaScript biasa. Tampilannya seperti HTML, tetapi beberapa aturannya berbeda, dan kurung kurawal memungkinkanmu memasukkan nilai JavaScript apa pun ke dalam markup.

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>
    );
}

Semua yang ada di dalam {} adalah JavaScript: sebuah property, pemanggilan method, bahkan map yang mengubah array menjadi item list. Tambahkan 'design' ke array skills, dan jumlah maupun list-nya ikut diperbarui.

Aturan JSX

Kembalikan satu elemen root

Sebuah komponen mengembalikan satu nilai, jadi JSX-nya butuh satu induk. Dua elemen bersebelahan di level teratas adalah error sintaks. Jika kamu tidak ingin ada <div> tambahan di halaman, bungkus keduanya dengan fragment, <>...</>:

// 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>
    </>
);

Saat kamu butuh key pada kelompok itu, pakai bentuk panjang <Fragment key={id}>; lihat fragment.

Tutup setiap tag

HTML membolehkanmu membiarkan beberapa tag terbuka. JSX tidak. Elemen tanpa anak menutup dirinya sendiri dengan />: <img />, <br />, <input />, dan komponen buatanmu seperti <Avatar />.

Pakai className, htmlFor, dan atribut camelCase

Atribut JSX menjadi key dari sebuah objek JavaScript, jadi penamaannya mengikuti JavaScript. class dan for adalah kata kunci yang dicadangkan di JavaScript, itulah sebabnya JSX memakai className dan htmlFor. Atribut yang terdiri dari beberapa kata dan setiap event handler ditulis camelCase: tabIndex, maxLength, autoFocus, onClick, onChange. Ada dua pengecualian yang tetap memakai tanda hubung: atribut aria-* dan data-* ditulis persis seperti di HTML.

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>
    );
}

Ganti className="field" menjadi class="field". Label-nya tetap bergaya, karena React tetap mengatur atributnya, tetapi build development mencatat "Invalid DOM property class. Did you mean className?" Pratinjau berjalan seperti build production, jadi kamu tidak akan melihat peringatan itu di sini; pakai className. Atribut string memakai tanda kutip (type="email"); nilai lainnya memakai kurung kurawal (maxLength={40}, disabled={false}).

Kurung kurawal menerima ekspresi, bukan pernyataan

Di dalam {}, kamu bisa menulis apa pun yang menghasilkan nilai: variabel, aritmetika, pemanggilan fungsi, ternary, &&, template literal. Pernyataan seperti if, for, dan const tidak menghasilkan nilai, jadi tidak bisa ditaruh di sana. Kerjakan logikanya sebelum return, atau pakai bentuk ekspresi:

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>
    );
}

Perhatikan baik-baik sebelum mengklik: halaman menampilkan 0 yang nyasar. count && <p>...</p> menghasilkan 0 saat hitungannya nol, dan React merender angka, termasuk nol. Ganti menjadi count > 0 && <p>You have mail.</p>, dan 0 itu hilang. false, null, undefined, dan true tidak merender apa pun, itulah sebabnya boolean di sisi kiri && aman. Halaman tentang conditional rendering membahas pola-polanya.

Inline style memakai objek

Atribut style menerima objek JavaScript, bukan string CSS. Itulah asal tampilan "kurung kurawal ganda": pasangan luar berarti "di sini JavaScript", pasangan dalam adalah literal objeknya. Nama property ditulis camelCase (backgroundColor, fontSize), dan angka biasa berarti piksel untuk sebagian besar property ukuran.

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>
    );
}

Karena style berupa objek, nilainya bisa dihitung dari state seperti nilai lain. Coba ganti fontSize: big ? 24 : 16 menjadi fontSize: big ? '2em' : '1em': string diteruskan apa adanya beserta satuannya.

Komentar

Komentar di dalam JSX ditaruh di dalam kurung kurawal: {/* this is a comment */}. Komentar HTML (<!-- -->) adalah error sintaks. Di luar markup, di isi fungsi, komentar // biasa berjalan seperti biasa.

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

Mengubah HTML menjadi JSX

Menempelkan HTML ke dalam komponen adalah langkah pertama yang umum, dan sebagian besar berjalan. Berikut perubahan yang biasanya perlu kamu lakukan:

• class menjadi className, dan for menjadi htmlFor.
• Tag void menutup dirinya sendiri: <br> menjadi <br />, <img src="a.png"> menjadi <img src="a.png" />.
• style="color: red; font-size: 14px" menjadi style={{ color: 'red', fontSize: 14 }}.
• Atribut event menerima fungsi, bukan string: onclick="save()" menjadi onClick={save}.
• Nama atribut menjadi camelCase: tabindex menjadi tabIndex, dan stroke-width milik SVG menjadi strokeWidth.
• <!-- comments --> menjadi {/* comments */}.
• Beberapa elemen di level teratas butuh satu induk atau fragment.

Converter HTML ke JSX online melakukan langkah-langkah ini untukmu, tetapi dengan memahaminya, pesan error jadi mudah dibaca saat ada yang terlewat.

Hasil kompilasi JSX

Browser tidak bisa menjalankan JSX. Sebuah compiler (seperti Babel, SWC, atau Oxc, yang dijalankan Vite dan framework untukmu) mengubah setiap tag menjadi pemanggilan fungsi dari react/jsx-runtime:

// 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' });

Tag berhuruf kecil menjadi string ('h1', sebuah elemen HTML), tag berhuruf kapital menjadi referensi ke fungsimu (Button), atribut menjadi objek props, dan isinya menjadi children. Setup lama mengompilasinya menjadi React.createElement(type, props, ...children), itulah sebabnya file lama diawali import React from 'react' meskipun tidak pernah menyebut React. Pemanggilan ini mengembalikan objek biasa yang disebut elemen React. Kamu bisa mencatatnya ke log:

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 menunjukkan bahwa heading hanyalah data: sebuah type 'h3' dan objek props. Itu juga alasan JSX bisa disimpan di variabel, dikirim ke fungsi, dan dikembalikan dari fungsi.

JSX melakukan escaping teks untukmu

String apa pun yang kamu taruh di kurung kurawal dirender sebagai teks, tidak pernah sebagai HTML. Jika pengguna mengetik <img src=x onerror=alert(1)> ke kotak komentar, React menampilkan karakter-karakter itu di layar alih-alih membuat tag gambar. Ini memblokir bentuk cross-site scripting (XSS) yang paling umum secara default.

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>
    );
}

Paragraf pertama mencetak tag-tag itu sebagai karakter biasa. Paragraf kedua memakai dangerouslySetInnerHTML, yang melewatkan escaping dan memasukkan string itu sebagai HTML sungguhan, jadi "our own" tercetak tebal. Namanya yang panjang adalah peringatan: hanya kirim HTML yang kamu hasilkan sendiri atau sudah dibersihkan dengan sanitizer seperti DOMPurify. Mengirim input pengguna ke sana membuka kembali celah XSS yang sudah ditutup JSX.