Kenalan sama JSX (JavaScript XML), ekstensi sintaks JavaScript yang memungkinkan Anda menulis struktur mirip HTML langsung di dalam kode React. Pahami aturan dan manfaatnya.
Udah berhasil bikin proyek React pertama pake Vite? Keren! Pas kamu buka file src/App.jsx (atau file komponen lain), kamu mungkin liat sesuatu yang aneh tapi familiar: ada kode mirip HTML nongkrong di dalem file JavaScript!
jsx// Contoh di App.jsx
Struktur <div>, <h1>, <p> itu keliatan kayak HTML kan? Tapi, ini ada di file .jsx (atau .js yang dikonfigurasi buat JSX). Nah, inilah yang namanya JSX (JavaScript XML).
JSX adalah sebuah ekstensi sintaks untuk JavaScript. Dia BUKAN HTML yang dijalanin langsung sama browser, dan juga BUKAN string JavaScript biasa. JSX itu lebih kayak "gula sintaksis" (syntactic sugar) yang ngebolehin kita nulis struktur mirip XML (yang HTML juga bagian darinya) langsung di dalem kode JavaScript kita.
Kenapa React Pake JSX?
React.createElement() manual (yang sebenernya jadi hasil akhir JSX setelah diproses).Gimana Cara Kerja JSX di Balik Layar?
Browser itu sebenernya gak ngerti JSX. Jadi, sebelum kode React-mu dijalanin di browser, JSX ini perlu diubah (transpiled) dulu jadi panggilan fungsi JavaScript biasa, yaitu React.createElement(). Proses transpiling ini biasanya dilakuin sama alat bantu kayak Babel (yang udah otomatis ke-setup kalau kamu pake Vite atau Create React App).
Jadi, kode JSX ini:
jsxconst elemen = <h1 className="judul">Halo Dunia JSX!</h1>;Sebenernya bakal diubah jadi sesuatu kayak gini (secara konseptual):
javascriptconst elemen = React.createElement(
'h1',
{className: 'judul'}, // Perhatikan 'className'
'Halo Dunia JSX!'
);Untungnya, kita gak perlu nulis yang versi React.createElement() itu manual! Cukup tulis JSX yang lebih enak dibaca.
Meskipun mirip HTML, JSX itu tetep bagian dari JavaScript, jadi ada beberapa aturan main yang perlu diikutin:
Satu Elemen Root per Return:
jsx// return (
// <h1>Judul</h1>
// <p>Paragraf</p> // Error! Dua elemen sejajar
// );return (
<div>
<h1>Judul</h1>
<p>Paragraf</p>
</div>
);<>...</> atau <React.Fragment>...</React.Fragment>): Kalau kamu gak mau nambahin div ekstra yang gak perlu di DOM, pake Fragment.
jsxreturn (
<>
<h1>Judul</h1>
<p>Paragraf</p>
</>
);Tag HTML Harus Selalu Ditutup:
<img>, <br>, <input> itu self-closing dan kadang gak perlu ditutup eksplisit.<p>...</p>) atau self-closing tag (<img src="..." /> – perhatiin slash di akhir!).<img src="foto.jpg" alt="deskripsi" />, <br /><img src="foto.jpg" alt="deskripsi"> (bakal error)className, htmlFor, dan Konvensi camelCasePas kamu nulis atribut di elemen JSX, sebagian besar namanya sama kayak atribut HTML biasa (id, src, href, alt, type, value, dll.). Tapi, ada beberapa pengecualian penting dan konvensi yang perlu kamu perhatiin karena JSX itu sebenernya JavaScript:
class di HTML menjadi className di JSX:
class adalah reserved keyword (kata kunci yang udah punya arti khusus buat bikin Class di OOP). Jadi, kamu gak bisa pake class sebagai nama atribut di JSX.className buat ngasih kelas CSS ke elemenmu.jsx// SALAH di JSX:
// <div class="kartu">...</div>
// BENAR di JSX:
<div className="kartu">Ini kartu dengan kelas CSS.</div>
<p className="teks-merah tebal">Paragraf ini punya dua kelas.</p>for di HTML (untuk <label>) menjadi htmlFor di JSX:
class, for juga adalah reserved keyword di JavaScript (dipake buat for loop).for yang biasa dipake di tag <label> buat ngehubunginnya ke input field (lewat id input), di JSX diubah jadi htmlFor.jsx// HTML Biasa:
// <label for="nama">Nama:</label>
// <input type="text" id="nama" />
// BENAR di JSX:
<label htmlFor="namaPengguna">Nama Pengguna:</label>
<input type="text" id="namaPengguna" />Atribut dengan Tanda Hubung (kebab-case) menjadi camelCase:
tab-index, max-length, font-size (kalau di style).style JavaScript), atribut/properti ini namanya diubah jadi camelCase (kata pertama huruf kecil, kata berikutnya diawali huruf besar, tanda hubung diilangin).tabindex (HTML) -> tabIndex (JSX prop)maxlength (HTML) -> maxLength (JSX prop)accept-charset (HTML) -> acceptCharset (JSX prop)http-equiv (HTML) -> httpEquiv (JSX prop)onclick (HTML) -> onClick (JSX), onmouseover (HTML) -> onMouseOver (JSX).jsx<input
type="number"
tabIndex={1} // dulu tabindex="1"
maxLength
Atribut yang Namanya Sama (Umumnya):
id, src, href, alt, value, type, placeholder, disabled, checked).data-* dan aria-* juga tetep pake format aslinya (lowercase dengan hubung).
jsx<img src="gambar.png" alt="Deskripsi Gambar" id="gambar-utama" />
<button data-testid="tombol-kirim" aria-label="Kirim Formulir">Kirim</button>Kenapa Ada Perbedaan Ini? Ingat, JSX itu bakal ditranspile jadi JavaScript. Aturan penamaan ini dibuat biar konsisten sama konvensi JavaScript dan ngindarin konflik sama keyword JavaScript.
Menyisipkan Ekspresi JavaScript dengan Kurung Kurawal {}:
{}.jsxfunction App() {
const nama = "Budi";
const usia = 25;
const isLoggedIn = true;
const items = ["Apel", "Jeruk", "Mangga"];
return (
<div>
<h1>Halo, {nama}!</h1> {/* Nyisipin variabel string */}
<p>Usia Anda adalah {usia} tahun.</p>
<p>Tahun depan, usia Anda {usia + 1} tahun.</p> {/* Ekspresi matematika */}
{/* Conditional rendering pake ternary operator */}
<p>{isLoggedIn ? "Anda sudah login." : "Silakan login."}</p>
{/* Merender list dari array pake .map() */}
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li> // key prop penting buat list!
))}
</ul>
<img src={"/gambar/" + nama.toLowerCase() + ".jpg"} alt={"Foto " + nama} />
{/* Atribut juga bisa pake {} */}
</div>
);
}if...else blok utuh, for loop blok utuh). Kalau butuh logika yang lebih kompleks, lakuin di luar JSX (di bagian JavaScript biasa di komponenmu), terus simpen hasilnya di variabel, baru variabel itu yang disisipin ke JSX.Styling di JSX (Atribut style):
style di JSX nerima objek JavaScript, bukan string CSS biasa.jsx<div style={{ color: 'blue', backgroundColor: '#f0f0f0', paddingTop: '10px' }}>
Elemen ini di-style pake objek JavaScript.
</div>Meskipun bisa, styling inline kayak gini kurang disarankan buat style yang kompleks. Lebih baik pake file CSS biasa, CSS Modules, atau library CSS-in-JS yang bakal kita bahas di materi styling React.
Komentar di JSX:
{} terus baru pake sintaks komentar JS /* ... */.jsx<div>
<h1>Judul</h1>
{/* Ini adalah komentar di dalam JSX */}
<p>Paragraf.</p>
{/*
Ini komentar multi-baris
di dalam JSX.
*/}
</div>{data}, React secara default bakal nge-"escape" data itu biar aman dari injeksi skrip berbahaya. Beda sama innerHTML di Vanilla JS yang rawan XSS kalau datanya gak disanitasi.JSX ini mungkin awalnya kerasa aneh karena nyampurin "HTML" ke JavaScript. Tapi, percaya deh, begitu kamu udah terbiasa, ini bakal jadi cara yang sangat enak dan efisien buat ngebangun antarmuka pengguna di React.
Kuncinya adalah inget aturan-aturan dasarnya (satu root, tag harus ditutup, konvensi atribut, {} buat ekspresi JS). Jangan takut buat nyoba-nyoba nulis JSX di komponen React pertamamu!
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
Ajukan pertanyaan, beri solusi, atau diskusikan materi pelajaran ini.
Belum ada komentar untuk pelajaran ini.
Jadilah yang pertama memulai diskusi atau mengajukan pertanyaan!