Component dan JSX: Cara Nulis UI di React

Di episode #50 kamu sudah kenal ide besar React: UI dipecah jadi component-component kecil yang bisa dipakai ulang. Sekarang kita bedah cara menulisnya. React punya syntax khusus bernama JSX yang terlihat seperti HTML di dalam JavaScript, dan component yang tidak lain adalah function JavaScript biasa.

Ini fondasi yang akan kamu pakai di setiap baris kode React mulai sekarang. Kuasai betul-betul, karena episode #52 (props dan state) dan #53 (event dan form) semuanya berdiri di atas pemahaman ini.

Component: Function yang Mengembalikan Tampilan

Component di React modern hanyalah function JavaScript yang mengembalikan tampilan. Tidak ada class, tidak ada syntax sihir. Perhatikan:

function Tombol() {
  return <button>Klik saya</button>;
}

Itu saja. Sebuah function bernama Tombol yang me-return elemen button. Untuk memakainya, kamu menulisnya seperti tag HTML dengan huruf kapital di depannya:

function App() {
  return (
    <div>
      <h1>Selamat datang</h1>
      <Tombol />
      <Tombol />
    </div>
  );
}

Dua <Tombol /> menghasilkan dua button identik. Mau 20 tombol? Tulis 20 baris, atau lebih baik lagi, pakai map seperti yang kamu pelajari di episode #46. Inilah reusable yang dimaksud: definisikan sekali, pakai berkali-kali.

Satu aturan penamaan yang keras: nama component harus diawali huruf kapital. <Tombol /> dibaca React sebagai component, sedangkan <tombol /> dibaca sebagai tag HTML biasa (yang tidak ada). Salah kapital, component-mu tidak akan dirender dan errornya membingungkan.

JSX: Terlihat Seperti HTML, Tapi Bukan HTML

JSX (JavaScript XML) adalah syntax extension yang memungkinkanmu menulis tampilan di dalam file JavaScript. Sebelum dijalankan browser, JSX dikompilasi menjadi pemanggilan function JavaScript biasa. Jadi ini bukan HTML yang ditempel, melainkan JavaScript yang ditulis dengan gaya visual.

Karena sebenarnya JavaScript, kamu bisa menyisipkan ekspresi JavaScript apa pun di dalam kurung kurawal {}:

function Sapaan() {
  const nama = "Dita";
  const jam = new Date().getHours();
  return (
    <div>
      <h1>Halo, {nama}!</h1>
      <p>Sekarang jam {jam}, {jam < 12 ? "selamat pagi" : "selamat siang"}.</p>
      <p>2 + 2 = {2 + 2}</p>
    </div>
  );
}

Di dalam {} boleh ada variabel, pemanggilan function, operasi matematika, bahkan ternary operator. Yang tidak boleh: statement seperti if atau for (pakai ternary atau pindahkan ke luar return).

Aturan Main JSX yang Wajib Dihafal

Karena JSX bukan HTML murni, ada beberapa aturan yang berbeda. Tiga yang paling sering menjebak pemula:

1. Satu elemen induk. Sebuah component harus mengembalikan SATU elemen pembungkus. Tidak boleh dua elemen sejajar tanpa pembungkus.

function Kartu() {
  return (
    <h2>Judul</h2>
    <p>Isi kartu</p>
  );
}

2. class menjadi className. Karena class adalah kata kunci reserved di JavaScript, atribut class di JSX ditulis className. Serupa dengan itu, for pada label menjadi htmlFor.

// Salah di JSX: <div class="kartu">
// Benar di JSX:
function Kartu() {
  return <div className="kartu">Isi kartu</div>;
}

3. Semua tag harus ditutup. Di HTML, <img> dan <input> boleh tanpa penutup. Di JSX, wajib self-closing: <img />, <input />, termasuk component <Tombol />.

Component yang Menerima Data (Sedikit Bocoran)

Component menjadi benar-benar powerful saat bisa menerima data dari luar lewat props (kependekan dari properties). Ini bocoran untuk episode #52, tapi lihat betapa naturalnya:

function Tombol({ label }) {
  return <button>{label}</button>;
}

function App() {
  return (
    <div>
      <Tombol label="Simpan" />
      <Tombol label="Hapus" />
    </div>
  );
}

Satu component Tombol, dua tampilan berbeda karena datanya berbeda. Perhatikan juga destructuring { label } di parameter, persis seperti yang kamu pelajari di episode #46. Semua ilmu JavaScript Modern-mu kepakai di sini, kan?

Persepsi yang Perlu Diluruskan

Persepsi salah 1: "JSX itu HTML yang ditempel di JavaScript." Bukan. JSX dikompilasi menjadi JavaScript murni sebelum dijalankan. Makanya ada perbedaan aturan (className, satu induk, tag wajib tutup). Memahaminya sebagai "JavaScript bergaya visual" membuat semua aturannya masuk akal.

Persepsi salah 2: "Component itu rumit, seperti class dengan lifecycle." Di React modern, component hanyalah function. Kamu sudah menulis ratusan function di seri JavaScript. Component = function + return tampilan. Sesederhana itu.

Latihan: Bikin Component Sendiri

1. Di proyek React-mu, buat file src/Kartu.jsx berisi component Kartu yang menampilkan judul dan deskripsi (pakai props judul dan deskripsi seperti contoh Tombol di atas).
2. Di App.jsx, import dan tampilkan Kartu tiga kali dengan data berbeda. Pakai map dari array data kalau berani.
3. Sengaja buat satu kesalahan (misalnya lupa menutup tag atau pakai class), baca pesan errornya, lalu perbaiki. Melatih membaca error React adalah skill yang sangat berharga.

Di episode berikutnya kita masuk ke jantung React: Props dan State, cara data mengalir dan berubah di dalam aplikasi. Di situlah keajaiban "tampilan otomatis update" benar-benar terjadi. Sampai jumpa.