📚 Seri Belajar React — Artikel 2 dari 16

Bedah Anatomi React:
JSX, Component, dan Props Itu Apa Sih?

Kamu sudah kenalan sama React. Sekarang saatnya bedah isi perutnya — tiga konsep paling fundamental yang wajib kamu kuasai sebelum nulis satu baris kode pun.

#JSX #Component #Props #React #BelajarReact

⏱️

Estimasi Baca

10–12 Menit

🎯

Level

Pemula Banget

📅

Tahun

2026

Pernah buka kode React untuk pertama kali, lalu ngerasa kayak baca mantra sihir? Ada yang bentuknya mirip HTML tapi ditulis di dalam JavaScript, ada fungsi yang namanya huruf kapital semua, terus ada istilah props yang kamu nggak tahu itu makhluk apa. Kalau pernah ngerasain itu — selamat, kamu di tempat yang tepat. Artikel ini khusus buat kamu yang baru masuk ke dunia React dan pengen ngerti tiga pilar utamanya: JSX, Component, dan Props. Tiga konsep ini bukan sekadar teori — mereka adalah pondasi dari setiap aplikasi React yang pernah dibuat. Yuk, kita bedah satu per satu!

🧬 JSX: Bukan HTML, Bukan JavaScript — Tapi Keduanya

Bayangkan kamu adalah seorang arsitek. Kamu punya dua bahasa: satu buat menggambar desain (HTML), satu buat mengatur logika bangunan (JavaScript). Dulu, keduanya hidup terpisah. Tapi JSX hadir dan bilang: "Hei, kenapa nggak digabung aja?"

JSX (JavaScript XML) adalah ekstensi sintaks untuk JavaScript yang memungkinkan kamu menulis markup mirip HTML langsung di dalam file JavaScript. Ini bukan sihir — ini hanyalah syntactic sugar yang nantinya akan dikompilasi oleh Babel menjadi kode JavaScript murni.

📌 Definisi Penting

JSX adalah sintaks khusus React yang memungkinkan kamu menulis kode yang terlihat seperti HTML di dalam JavaScript. JSX bukan HTML asli — ia adalah representasi dari React.createElement() yang lebih manusiawi dan mudah dibaca.

Contoh JSX vs JavaScript Murni

// ✅ Dengan JSX — mudah dibaca manusia
const elemen = (
  <div className="kartu">
    <h1>Halo, React!</h1>
    <p>Ini elemen JSX pertamaku</p>
  </div>
);

// ❌ Tanpa JSX — versi JS murni yang menyiksa mata
const elemen = React.createElement(
  'div',
  { className: 'kartu' },
  React.createElement('h1', null, 'Halo, React!'),
  React.createElement('p', null, 'Ini elemen JSX pertamaku')
);

💡

Tips: Aturan Emas JSX

Semua elemen JSX wajib punya satu root element. Kalau mau return lebih dari satu elemen, bungkus dengan <div> atau gunakan <>...</> (Fragment). Juga, gunakan className bukan class — karena class adalah keyword di JavaScript!

🧩 Component: LEGO-nya Dunia React

Kalau JSX adalah cara kita menulis tampilan, maka Component adalah cara kita mengemas tampilan itu menjadi potongan-potongan kecil yang bisa dipakai ulang. Analoginya? Bayangkan mainan LEGO. Kamu punya satu balok merah kecil, dan kamu bisa memasangnya di mana saja — di kastil, di pesawat, di robot. Itulah Component.

Dalam React, sebuah component adalah fungsi JavaScript biasa yang mengembalikan JSX. Sederhana banget, kan? Yang membuatnya spesial adalah ia bisa dipakai berulang kali di mana pun kamu mau.

📌 Rumus Component React

Component = Fungsi JavaScript + Return JSX
Namanya selalu diawali huruf kapital. Bisa dipanggil seperti tag HTML: <NamaComponent />

🛠️ Cara Membuat Component Pertamamu (Step by Step)

1

Buat file baru dengan nama komponen (huruf kapital)

Buat file bernama Kartu.jsx atau Kartu.js di folder src/components/.

2

Tulis fungsi component dan export

Definisikan fungsi dengan nama huruf kapital, return JSX, dan jangan lupa export default.

3

Import dan gunakan di file lain

Import component ke file App.jsx dan gunakan seperti tag HTML biasa.

Kartu.jsx — Component pertama kamu

// ✅ Definisi Component
function Kartu() {
  return (
    <div className="kartu">
      <h2>Belajar React</h2>
      <p>Ini component pertamaku! 🎉</p>
    </div>
  );
}

export default Kartu;

// ✅ Penggunaan di App.jsx
import Kartu from './Kartu';

function App() {
  return (
    <div>
      <Kartu />  // dipanggil 3 kali, muncul 3 kartu!
      <Kartu />
      <Kartu />
    </div>
  );
}

🔥

Fakta Menarik!

Seluruh UI Facebook, Instagram, dan WhatsApp Web dibangun dari jutaan component React yang saling bersarang. Yang kamu lihat sebagai "tombol Like" pun adalah sebuah component kecil yang di-render ribuan kali setiap detik!

📬 Props: Amplop Surat untuk Component Kamu

Oke, sekarang kamu punya component <Kartu /> yang bisa dipanggil berkali-kali. Tapi masalahnya — semua kartu tampilannya sama persis. Gimana kalau kamu mau tiap kartu punya nama dan deskripsi yang berbeda? Di sinilah Props masuk.

Props (Properties) adalah cara React meneruskan data dari satu component ke component lainnya. Analoginya: bayangkan kamu mengirim amplop surat. Amplop itu (component) selalu sama bentuknya, tapi isinya (props) bisa berbeda-beda tiap pengiriman.

📌 Cara Kerja Props

Parent component → mengirim data via atribut JSX
Child component → menerima data via parameter props
Aliran data → selalu searah dari atas ke bawah (one-way data flow)

Kartu.jsx — Component dengan Props

// ✅ Child Component menerima props
function Kartu(props) {
  return (
    <div className="kartu">
      <h2>{props.judul}</h2>
      <p>{props.deskripsi}</p>
    </div>
  );
}

// ✅ Parent Component mengirim props
function App() {
  return (
    <div>
      <Kartu
        judul="Belajar JSX"
        deskripsi="Cara nulis HTML di dalam JavaScript"
      />
      <Kartu
        judul="Belajar Component"
        deskripsi="Blok bangunan UI yang reusable"
      />
    </div>
  );
}

⚡

Insight Penting: Gunakan Destructuring!

Daripada nulis props.judul dan props.deskripsi berkali-kali, gunakan destructuring: function Kartu({ judul, deskripsi }). Lebih bersih, lebih mudah dibaca, dan ini adalah cara yang dipakai oleh hampir semua developer React profesional!

⚠️

Perhatian: Props itu Read-Only!

Kamu tidak boleh mengubah nilai props di dalam component yang menerimanya. Props bersifat immutable (tidak bisa diubah). Kalau kamu butuh data yang bisa berubah, itu tugasnya State — yang akan kita pelajari di artikel berikutnya!

📊 JSX vs Component vs Props: Apa Bedanya?

🔍 Analysis Box — Perbandingan Tiga Pilar React

Konsep	Apa Itu	Analogi	Contoh Singkat
JSX	Sintaks menulis UI di JS	Blueprint gambar arsitektur	<h1>Halo!</h1>
Component	Blok UI yang bisa dipakai ulang	Balok LEGO	function Kartu() {}
Props	Data yang dikirim ke component	Isi amplop surat	<Kartu judul="X" />

🎯

Kesimpulan: Kamu Sudah Paham Anatomi React!

Hari ini kamu sudah berhasil membedah tiga fondasi paling penting dalam dunia JSX, component, dan props React:

• ✦ JSX — cara menulis UI yang terlihat seperti HTML tapi tinggal di dalam JavaScript
• ✦ Component — balok LEGO UI yang bisa dibuat sekali dan dipakai berkali-kali
• ✦ Props — amplop data yang dikirim dari parent ke child component secara searah

Ketiga konsep ini adalah GPS-mu di dunia React. Tanpa memahami mereka, kamu akan tersesat. Dengan memahami mereka, kamu siap belajar hal berikutnya yang lebih seru: State!

💬 Bagian mana yang paling bikin kamu bilang "ohhh, gitu toh!"? Tulis di kolom komentar, yuk! Dan kalau artikel ini bermanfaat, share ke teman-teman yang juga lagi belajar React — siapa tahu mereka lagi nyari jawaban yang sama 🚀

Lanjut ke Artikel Berikutnya → State & useState 🚀

🏷️ Tags Artikel

#BelajarReact #ZeroToZorro #JSX #ReactComponent #ReactProps #PemulaBelajarCoding #FrontendDeveloper

📚

Bagian dari

Seri Belajar React: React From Zero to Zorro

Artikel ini adalah bagian ke-2 dari 16 artikel dalam seri lengkap belajar React dari nol sampai jago. Klik link di bawah untuk melihat seluruh daftar isi seri!

🗺️ Lihat Semua Artikel Seri →

🔀 Navigasi Artikel

← Artikel Sebelumnya

Kenalan Dulu Sama React: Apa Itu React dan Kenapa Harus Dipelajari? Artikel 1 dari 16

Artikel Selanjutnya →

React Itu Hidup! Kenalan Sama State dan useState Hook Artikel 3 dari 16