JSX: "Kawin Silang" HTML dan JavaScript yang Bikin Ngoding React Jadi Asyik!

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!

// Contoh di App.jsx
function App() {
  return (
    <div>
      <h1>Halo dari Komponen React!</h1>
      <p>Ini ditulis pake JSX.</p>
    </div>
  );
}
 
export default App;

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).

Apa Itu JSX Sebenernya?

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?

• Lebih Intuitif buat Nulis UI: Buat developer yang udah biasa sama HTML, nulis struktur UI pake JSX itu kerasa jauh lebih alami dan gampang dibaca daripada harus nulis banyak perintah React.createElement() manual (yang sebenernya jadi hasil akhir JSX setelah diproses).
• UI dan Logika Jadi Deket: Dengan JSX, kamu bisa liat langsung gimana struktur tampilan (markup) berhubungan sama logika JavaScript (state, event handler) di satu tempat (dalem komponen).
• Error Lebih Cepet Ketauan: Karena JSX itu nanti "diubah" jadi JavaScript, banyak kesalahan ketik di struktur (kayak tag gak ditutup) bisa ketauan lebih awal pas proses transpiling (pengubahan kode).

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:

const elemen = <h1 className="judul">Halo Dunia JSX!</h1>;

Sebenernya bakal diubah jadi sesuatu kayak gini (secara konseptual):

const 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.

Aturan Main Nulis JSX

Meskipun mirip HTML, JSX itu tetep bagian dari JavaScript, jadi ada beberapa aturan main yang perlu diikutin:

1. Satu Elemen Root per Return:

   • Setiap komponen React (atau bagian JSX yang di-return dari fungsi) harus nge-return SATU elemen root aja. Kamu gak bisa nge-return dua elemen sejajar tanpa dibungkus.
   • Salah:

     // return (
     //   <h1>Judul</h1>
     //   <p>Paragraf</p> // Error! Dua elemen sejajar
     // );

   • Benar (bungkus pake div atau elemen lain):

     return (
       <div>
         <h1>Judul</h1>
         <p>Paragraf</p>
       </div>
     );

   • Benar (pake React Fragment <>...</> atau <React.Fragment>...</React.Fragment>): Kalau kamu gak mau nambahin div ekstra yang gak perlu di DOM, pake Fragment.

     return (
       <> 
         <h1>Judul</h1>
         <p>Paragraf</p>
       </>
     );

2. Tag HTML Harus Selalu Ditutup:

   • Di HTML biasa, beberapa tag kayak <img>, <br>, <input> itu self-closing dan kadang gak perlu ditutup eksplisit.
   • Di JSX, semua tag HARUS ditutup, baik itu pake tag penutup (<p>...</p>) atau self-closing tag (<img src="..." /> – perhatiin slash di akhir!).
   • Benar: <img src="foto.jpg" alt="deskripsi" />, <br />
   • Salah: <img src="foto.jpg" alt="deskripsi"> (bakal error)

REVISI/PENAMBAHAN DIMULAI DI SINI

3. Atribut di JSX: Kenalan Sama className, htmlFor, dan Konvensi camelCase

Pas 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:

  • Di JavaScript, 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.
  • Sebagai gantinya, React nyediain atribut className buat ngasih kelas CSS ke elemenmu.

  // 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:

  • Sama kayak class, for juga adalah reserved keyword di JavaScript (dipake buat for loop).
  • Jadi, atribut for yang biasa dipake di tag <label> buat ngehubunginnya ke input field (lewat id input), di JSX diubah jadi htmlFor.

  // 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:

  • Banyak atribut HTML atau properti CSS yang namanya pake tanda hubung, misalnya tab-index, max-length, font-size (kalau di style).
  • Di JSX (dan di objek style JavaScript), atribut/properti ini namanya diubah jadi camelCase (kata pertama huruf kecil, kata berikutnya diawali huruf besar, tanda hubung diilangin).
  • Contoh:
    • tabindex (HTML) -> tabIndex (JSX prop)
    • maxlength (HTML) -> maxLength (JSX prop)
    • accept-charset (HTML) -> acceptCharset (JSX prop)
    • http-equiv (HTML) -> httpEquiv (JSX prop)
    • Event handler juga ngikutin pola ini: onclick (HTML) -> onClick (JSX), onmouseover (HTML) -> onMouseOver (JSX).

  <input 
    type="number" 
    tabIndex={1} // dulu tabindex="1"
    maxLength={10} // dulu maxlength="10"
    onClick={(event) => console.log('Diklik!')} // dulu onclick="..."
  />

• Atribut yang Namanya Sama (Umumnya):

  • Sebagian besar atribut lain yang namanya udah satu kata atau gak konflik sama keyword JavaScript, namanya tetep sama (misal, id, src, href, alt, value, type, placeholder, disabled, checked).
  • Atribut data-* dan aria-* juga tetep pake format aslinya (lowercase dengan hubung).

    <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.

4. Menyisipkan Ekspresi JavaScript dengan Kurung Kurawal {}:

   • Ini salah satu fitur paling powerful di JSX! Kamu bisa nyisipin ekspresi JavaScript apa pun (variabel, hasil fungsi, operasi matematika, operator ternary) langsung di dalem JSX dengan cara ngapitnya pake kurung kurawal {}.
   • Nilai dari ekspresi itu bakal di-render sebagai bagian dari UI.

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

   • PENTING: Kamu cuma bisa nyisipin ekspresi (sesuatu yang ngasilin nilai), bukan pernyataan (statement kayak 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.

5. Styling di JSX (Atribut style):

   • Atribut style di JSX nerima objek JavaScript, bukan string CSS biasa.
   • Nama properti CSS-nya juga pake camelCase.

   <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.

6. Komentar di JSX:

   • Kalau kamu mau nulis komentar di dalem bagian JSX, caranya agak beda dari komentar HTML atau JS biasa. Kamu harus bungkus komentarnya di dalem kurung kurawal {} terus baru pake sintaks komentar JS /* ... */.

   <div>
     <h1>Judul</h1>
     {/* Ini adalah komentar di dalam JSX */}
     <p>Paragraf.</p>
     {/*
       Ini komentar multi-baris
       di dalam JSX.
     */}
   </div>

Keuntungan Pake JSX

• Lebih Gampang Dibaca dan Ditulis (buat yang biasa HTML): Struktur UI jadi lebih visual dan mirip sama hasil akhirnya di browser.
• Error Lebih Cepat Ketemu: Karena JSX ditranspile, kesalahan sintaks (kayak tag gak ditutup atau atribut salah nama) bisa ketauan pas proses build, bukan pas udah jalan di browser.
• Lebih Aman dari XSS (Cross-Site Scripting) secara Default: Pas kamu nyisipin data ke JSX pake {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!