Kode Lebih Cepat: Memahami JSX dan Komponen Pertama di React JS (Part 3)

Halo para ksatria keyboard dan pejuang deadline! Siap ngopi lagi sambil nambah ilmu? Setelah kemarin kita sedikit intip gimana setup React JS itu bekerja di balik layar, kali ini kita mau ngebut, gas pol! Kita bakal bedah secret sauce-nya React yang bikin ngoding UI jadi sat-set, nggak pakai lama: JSX! Plus, kita nggak cuma ngomongin teori doang, kita bakal langsung bikin komponen pertama kita yang unyu-unyu dan fungsional. Siap-siap jarimu panas tapi otak makin cerdas!

Masih ingat gimana ribetnya ngurus DOM manual pake JavaScript murni? Nah, JSX ini datang sebagai penyelamat hidup kita. Penasaran kan? Yuk, langsung kita sikat materinya!

Daftar Isi

Apa Itu JSX? Kok Mirip HTML Tapi Bukan?
Kenapa Harus Pakai JSX? Ribet Nggak Sih?
Sintaks Dasar JSX yang Wajib Kamu Tahu
Bikin Komponen React Pertama Kita: Fungsional!
Menggabungkan JSX dan Komponen: The Magic Happens
Latihan: Studi Kasus Ngoding Seru!

Apa Itu JSX? Kok Mirip HTML Tapi Bukan?

Oke, kita mulai dari pertanyaan fundamental: "JSX itu apaan sih?" Gampangnya gini, JSX itu singkatan dari JavaScript XML. Ini adalah sebuah ekstensi sintaks untuk JavaScript yang memungkinkan kamu menulis kode mirip HTML di dalam file JavaScript. Iya, kamu nggak salah baca. Kamu bisa nulis tag <h1>Hello World</h1> langsung di file .js atau .jsx kamu!

"Tapi kan itu bukan HTML beneran?" Tepat sekali! JSX itu bukan HTML, dan bukan juga string. JSX itu ibaratnya "syntactic sugar" alias pemanis sintaks. Di belakang layar, kode JSX yang kamu tulis itu bakal di-transpile (diubah) sama tool kayak Babel jadi panggilan fungsi JavaScript biasa, yaitu React.createElement(). Jadi, saat kamu nulis:


const element = <h1>Halo Dunia React!</h1>;

Sebenarnya, itu sama aja dengan:


const element = React.createElement('h1', null, 'Halo Dunia React!');

Lihat kan bedanya? Mana yang lebih enak dibaca dan ditulis? Pasti yang pakai JSX dong! Ini alasan kenapa JSX jadi salah satu fitur paling penting di React.

Kenapa Harus Pakai JSX? Ribet Nggak Sih?

Mungkin ada yang mikir, "Duh, nambah lagi nih yang harus dipelajari!" Eits, jangan salah sangka dulu! JSX ini justru bikin hidup programmer React lebih mudah. Ini beberapa alasannya:

Lebih Mudah Dibaca (Readable): Bayangkan kalau kamu harus nulis React.createElement berkali-kali untuk UI yang kompleks. Pasti pusing tujuh keliling! Dengan JSX, kodenya jadi mirip HTML, yang udah familiar banget sama kebanyakan web developer.
Meningkatkan Produktivitas: Karena mirip HTML, kamu bisa lebih cepat ngoding UI tanpa harus mikir gimana cara mapping DOM manual pakai JavaScript. Ini ngurangin potensi bug dan error juga lho!
Memisahkan Logika dan Tampilan Lebih Baik (Tapi dalam File yang Sama!): Nah ini uniknya. Dulu, kita pisahin HTML, CSS, JS di file terpisah. Di React, komponen itu menggabungkan logika (JS) dan tampilan (JSX) dalam satu kesatuan. Ini justru bikin komponen lebih mandiri dan mudah dikelola.
Tipe Aman (Type-Safe): Meskipun mirip HTML, JSX itu tetap JavaScript. Jadi, saat kompilasi, JSX bisa mendeteksi error lebih awal. Misalnya, kalau kamu salah nama atribut atau salah penulisan, biasanya langsung di kasih peringatan.

Jadi, meskipun terlihat baru, JSX ini adalah teman baik kita yang bikin ngoding React jadi fun dan efektif. Anggap aja ini bahasa gaulnya React!

Sintaks Dasar JSX yang Wajib Kamu Tahu

Oke, biar nggak cuma teori, yuk kita lihat gimana sih penulisan JSX yang bener:

1. Mengembalikan Satu Elemen Root

Setiap kali kamu mengembalikan JSX dari sebuah komponen, dia harus dibungkus dalam satu elemen induk (single root element). Kalau nggak, nanti dia ngambek dan ngasih error!


// Salah! Ini bakal error karena ada dua elemen root
// <h1>Judul</h1>
// <p>Paragraf</p>

// Benar! Dibungkus dalam satu div
<div>
  <h1>Judul</h1>
  <p>Paragraf</p>
</div>

// Atau pakai Fragment (shortcut <></>) kalau nggak mau ada div tambahan di DOM
<>
  <h1>Judul</h1>
  <p>Paragraf</p>
</>

2. Menggunakan Ekspresi JavaScript di JSX

Ini dia salah satu kekuatan super JSX! Kamu bisa nyisipin ekspresi JavaScript apapun di antara kurung kurawal {}. Mau variabel, operasi matematika, atau bahkan fungsi, semua bisa!


const nama = "Budi";
const angka1 = 10;
const angka2 = 5;

<h1>Selamat datang, {nama}!</h1>
<p>Hasil penjumlahan: {angka1 + angka2}</p>
<p>Waktu sekarang: {new Date().toLocaleTimeString()}</p>

3. Atribut di JSX

Mirip HTML, tapi ada sedikit perbedaan. Untuk atribut yang namanya pakai reserved keyword JavaScript (misal: class), kita harus pakai nama alternatif:

Untuk kelas CSS, pakai className (bukan class).
Untuk inline style, pakai objek JavaScript di dalam kurung kurawal ganda {{}}, dan properti CSS-nya pakai camelCase (bukan kebab-case).


<div className="kotak-merah">
  <p style={{ color: 'blue', fontSize: '16px' }}>Ini teks biru dengan ukuran 16px.</p>
</div>

<img src="gambar.jpg" alt="Sebuah Gambar" />

Ingat, elemen HTML yang nggak punya penutup (self-closing tag) kayak <img>, <input>, <br>, dll., harus diakhiri dengan / di JSX (misal: <img />).

Bikin Komponen React Pertama Kita: Fungsional!

Setelah kenalan sama JSX, sekarang waktunya bikin teman baru kita: komponen! Di React, aplikasi itu dibangun dari kumpulan komponen yang kecil dan mandiri. Ibarat LEGO, setiap balok itu komponen, dan kita bisa rakit balok-balok itu jadi bangunan yang kompleks.

Ada dua jenis komponen di React: Class Components dan Functional Components. Sejak era React Hooks, Functional Components dengan Hooks jadi primadona karena lebih ringkas, mudah dibaca, dan lebih modern. Kita akan fokus ke Functional Components ya!

Komponen fungsional itu intinya adalah fungsi JavaScript biasa yang mengembalikan JSX. Sesimpel itu!


// app.js atau index.js (misalnya)
import React from 'react'; // Wajib import React di setiap file yang pakai JSX

// Ini dia komponen pertama kita!
function SelamatDatang() {
  return (
    <div>
      <h1>Halo, React Developer!</h1>
      <p>Selamat datang di komponen fungsional pertamaku! Asik banget kan?</p>
    </div>
  );
}

export default SelamatDatang; // Penting biar bisa dipakai di file lain

Beberapa hal penting dari kode di atas:

Nama fungsi komponen harus dimulai dengan huruf kapital (misal: SelamatDatang, bukan selamatDatang). Ini konvensi wajib di React!
Fungsinya mengembalikan (return) sepotong kode JSX yang dibungkus dalam satu elemen root (dalam contoh ini, <div>).
Kita menggunakan export default biar komponen ini bisa di-import dan dipakai di file JavaScript lainnya.

Menggabungkan JSX dan Komponen: The Magic Happens

Setelah bikin komponen, gimana cara nampilinnya di layar? Gampang banget! Kita tinggal pakai komponen kita seperti tag HTML biasa di dalam JSX komponen lain. Biasanya, komponen utama yang jadi "induk" aplikasi kita itu namanya App.

Misalnya, kamu punya file App.js:


// App.js
import React from 'react';
import SelamatDatang from './SelamatDatang'; // Import komponen yang sudah kita buat

function App() {
  const jamSekarang = new Date().toLocaleTimeString();

  return (
    <div>
      <h1>Ini Aplikasi React Utama Kita!</h1>
      <p>Waktu terakhir di-render: {jamSekarang}</p>
      <hr />
      {/* Nah, ini dia cara pakai komponen SelamatDatang */}
      <SelamatDatang /> 
      <SelamatDatang /> {/* Kita bisa pakai berulang kali! */}
      <hr />
      <p>Semoga betah ngoding di React ya!</p>
    </div>
  );
}

export default App;

Dan di file index.js (yang biasanya tempat aplikasi React kita di-mount ke DOM):


// index.js (file utama yang menghubungkan React ke DOM)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // Import komponen App utama

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App /> {/* Render komponen App di sini */}
  </React.StrictMode>
);

Voila! Kamu sudah berhasil membuat dan menggunakan komponen pertamamu di React dengan bantuan JSX. Lihat betapa rapinya kode kita? Ibaratnya, kita punya cetakan kue (komponen), dan kita bisa pakai cetakan itu berkali-kali untuk bikin kue yang sama persis (atau dimodifikasi sedikit, yang nanti kita bahas di topik props!).

Keren kan? Ini baru permulaan, lho. Nanti kamu bisa bikin komponen yang lebih kompleks, punya state sendiri, atau bahkan menerima data dari luar (pakai props, yang akan jadi bahasan selanjutnya!).

Latihan: Studi Kasus Ngoding Seru!

Oke, biar makin jago dan biar nggak cuma copas kode doang, yuk kita latihan! Anggaplah kamu seorang freelancer yang baru dapat proyek dari agensi "Dukun Modern". Klien kamu adalah seorang influencer kucing bernama "Mpus Gemoy". Dia pengen bikin "Website Jodoh Online Khusus Kucing Gaol".

Tugas kamu adalah:

Buatlah satu komponen fungsional baru bernama <CardKucing />.
Di dalam komponen <CardKucing />, kamu harus me-return JSX yang menampilkan:
- Nama kucing (misal: "Si Belang") dibungkus <h3>.
- Gambar kucing (pakai tag <img /> dengan src="https://via.placeholder.com/150" sebagai placeholder sementara dan alt="Gambar Kucing").
- Deskripsi singkat kucing (misal: "Pecinta whiskas, jago salto, suka rebahan") dibungkus <p>.
- Tombol "Kirim Makanan Kaleng" dibungkus <button>.
Pastikan semua elemen di dalam <CardKucing /> dibungkus dalam satu elemen <div> sebagai root element-nya.
Di komponen <App /> kamu, renderlah komponen <CardKucing /> ini sebanyak tiga kali. Anggap saja ada tiga kucing yang lagi nyari jodoh.

Selamat mencoba! Kalau ada bug atau error, itu tandanya kamu sedang belajar. Jangan nyerah, ngopi dulu kalau perlu! Sampai jumpa di bagian selanjutnya!

Kode Lebih Cepat: Memahami JSX dan Komponen Pertama di React JS (Part 3)