Frontend Academy · Pelajaran

JSX: Sintaks dan Transpilasi

Tulis JSX, pahami cara Babel mengompilasinya menjadi pemanggilan React.createElement, dan terapkan aturannya: satu elemen akar, className, serta tag yang menutup diri.

JSX: Sintaks dan Transpilasi adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu JSX?

JSX (JavaScript XML) adalah ekstensi sintaks yang memungkinkan Anda menulis markah mirip HTML di dalam JavaScript. JSX bukan fitur peramban — Babel atau TypeScript mengubahnya menjadi pemanggilan fungsi JavaScript sebelum dijalankan.

Transpilasi JSX

Babel mengubah JSX menjadi pemanggilan React.createElement(). Dengan transformasi JSX baru (React 17+), Anda tidak perlu mengimpor React — Babel menyisipkan impor yang diperlukan secara otomatis.

// JSX:
const element = <h1 className="title">Hello</h1>;

// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

Aturan JSX: Satu Elemen Akar

Ekspresi JSX harus memiliki tepat satu elemen akar. Bungkus elemen-elemen sejajar dalam <div> atau gunakan Fragmen (<></> atau <React.Fragment>) agar tidak menambahkan node DOM tambahan.

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className dan htmlFor

Atribut JSX menggunakan camelCase. Karena class dan for merupakan kata JavaScript yang dicadangkan, gunakan className dan htmlFor sebagai gantinya.

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

Tag Penutup Mandiri

Dalam JSX, semua tag harus ditutup dengan benar. Elemen tanpa anak harus menggunakan garis miring penutup mandiri: <img />, <br />, <input />.

Ekspresi dalam JSX: {}

Sisipkan ekspresi JavaScript apa pun ke dalam JSX dengan kurung kurawal. Variabel, pemanggilan fungsi, operator ternary, dan aritmetika semuanya dapat digunakan. Pernyataan (if, for) tidak dapat digunakan.

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX dan String

Teks dan ekspresi JSX yang bersebelahan akan digabungkan secara otomatis. Anda dapat mencampur teks dan ekspresi dengan bebas di dalam sebuah elemen.

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

Merender Tidak Ada Apa Pun: null dan false

Kembalikan null atau false untuk tidak merender apa pun. Keduanya merupakan nilai JSX yang valid dan tidak menghasilkan keluaran DOM. Ini berguna untuk perenderan kondisional.

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

Atribut Style — Sintaks Objek

Style sebaris dalam JSX menggunakan objek, bukan string. Nama properti menggunakan camelCase.

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX Adalah JavaScript

Karena JSX dikompilasi menjadi JavaScript, Anda dapat menempatkan JSX dalam variabel, mengembalikannya dari fungsi, meneruskannya sebagai properti, dan menyimpannya dalam larik. Elemen React adalah objek JavaScript biasa.

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript dan JSX: Berkas .tsx

Gunakan ekstensi .tsx untuk berkas TypeScript yang berisi JSX. TypeScript memeriksa tipe JSX, sehingga dapat menemukan galat tipe properti dan properti yang hilang saat kompilasi.

Pemeriksaan Singkat

Mengapa kita menggunakan className, bukan class, dalam JSX?

Ringkasan: JSX

JSX adalah sintaks singkat untuk React.createElement(). Gunakan satu elemen akar atau Fragmen untuk setiap ekspresi. Gunakan className dan htmlFor untuk atribut yang menggunakan kata tercadangkan. Tutup sendiri semua elemen tanpa isi. Sisipkan ekspresi dengan {}. Kembalikan null/false untuk tidak merender apa pun. Style sebaris menggunakan sintaks objek camelCase. JSX adalah JavaScript — perlakukan sebagai nilai.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “JSX: Sintaks dan Transpilasi” gratis?

Ya — teks lengkap “JSX: Sintaks dan Transpilasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “JSX: Sintaks dan Transpilasi”?

Tulis JSX, pahami cara Babel mengompilasinya menjadi pemanggilan React.createElement, dan terapkan aturannya: satu elemen akar, className, serta tag yang menutup diri. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “JSX: Sintaks dan Transpilasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy