JSX Dasar — CompileDaily Study

Penjelasan

JSX adalah ekstensi syntax JavaScript yang memungkinkan menulis markup mirip HTML langsung di dalam kode JS — di baliknya, JSX di-compile jadi pemanggilan fungsi React.createElement(). Ekspresi JavaScript bisa disisipkan di dalam JSX memakai kurung kurawal tunggal {}.

Contoh Konsep

function App() {
    const nama = "CompileDaily";
    const tahun = 2026;

    return (
        <div>
            <h1>Halo, {nama}!</h1>
            <p>Tahun sekarang: {tahun}</p>
            <p>Hasil 2 + 2 = {2 + 2}</p>
        </div>
    );
}

Praktikum

Buat komponen App yang punya variabel kota dan populasi. Tampilkan keduanya dalam JSX lewat kurung kurawal {}, termasuk satu ekspresi hitung-hitungan sederhana (mis. populasi / 1000).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

JSX WAJIB mengembalikan SATU elemen induk saja — kalau butuh mengembalikan beberapa elemen sejajar tanpa tag pembungkus tambahan di HTML akhir, bungkus dengan Fragment (<>...</>), bukan <div> yang menambah elemen ekstra ke DOM.