Bab 3 — Komponen dan Props: Cara React Membangun Interface

Halo Authemers, kembali lagi ke Tutorial React JS untuk Pemula. Jika pada bab sebelumnya Authemers sudah mengenal JSX, sekarang kita mulai masuk ke konsep yang benar-benar menjadi jantung dari React, yaitu komponen.

Di sinilah filosofi React mulai terasa. React tidak memandang halaman web sebagai satu file HTML besar, melainkan sebagai sekumpulan bagian kecil yang disusun bersama untuk membentuk sebuah antarmuka lengkap.

📋 Daftar Isi

Pendekatan ini membuat kode lebih rapi, lebih mudah dipelihara, dan jauh lebih fleksibel ketika aplikasi mulai berkembang.

📚 Baca Juga

Bayangkan sebuah website modern seperti dashboard admin, aplikasi e-commerce, atau portal berita. Halaman tersebut biasanya terdiri dari banyak bagian seperti:

  • Header
  • Navbar
  • Sidebar
  • Konten utama
  • Card artikel
  • Footer

Jika kita menulis semuanya dalam satu file besar, kode akan cepat menjadi berantakan. Inilah masalah yang coba diselesaikan oleh React melalui konsep komponen.

React mengajak developer untuk memecah tampilan menjadi potongan kecil yang bisa digunakan kembali.

Memahami Konsep Komponen

Komponen adalah blok bangunan utama dalam React. Secara sederhana, komponen adalah fungsi JavaScript yang menghasilkan tampilan UI.

Jika Authemers pernah membuat fungsi dalam JavaScript, maka konsep komponen sebenarnya tidak terlalu jauh berbeda.

Contoh komponen paling sederhana terlihat seperti ini.

function Header(){
  return <h1>Website Authemic</h1>
}

Komponen Header di atas hanya menampilkan sebuah judul. Walaupun terlihat sangat sederhana, komponen ini sudah bisa digunakan di tempat lain dalam aplikasi.

Misalnya kita memiliki komponen utama bernama App.

function App(){
  return (
    <div>
      <Header />
    </div>
  )
}

Ketika React merender komponen App, maka komponen Header juga akan ikut ditampilkan.

Inilah yang membuat React terasa seperti menyusun balok lego. Setiap komponen adalah satu bagian kecil yang nantinya digabungkan menjadi sebuah aplikasi lengkap.

Mengapa Komponen Sangat Penting?

Pada proyek kecil, mungkin kita belum terlalu merasakan manfaat komponen. Namun ketika aplikasi mulai berkembang, komponen menjadi sangat penting.

Bayangkan kita sedang membuat sebuah website berita seperti portal teknologi.

Biasanya halaman utama memiliki banyak card artikel seperti ini:

  • Judul artikel
  • Gambar
  • Deskripsi singkat
  • Tombol baca

Jika kita menulis HTML untuk setiap artikel secara manual, kode akan menjadi sangat panjang.

Namun dengan React, kita bisa membuat satu komponen bernama ArticleCard.

Contohnya:

function ArticleCard(){
  return(
    <div>
      <h2>Judul Artikel</h2>
      <p>Deskripsi singkat artikel...</p>
      <button>Baca Selengkapnya</button>
    </div>
  )
}

Setelah komponen dibuat, kita bisa menggunakannya berkali-kali.

function App(){
  return(
    <div>
      <ArticleCard />
      <ArticleCard />
      <ArticleCard />
    </div>
  )
}

Dengan cara ini kita tidak perlu menulis ulang struktur HTML yang sama berulang-ulang.

Inilah yang disebut dengan konsep reusable component.

Analogi Komponen dalam Dunia Nyata

Agar lebih mudah dipahami, bayangkan kita sedang membangun sebuah rumah.

Rumah biasanya terdiri dari beberapa bagian:

  • pintu
  • jendela
  • atap
  • dinding

Setiap bagian tersebut dibuat secara terpisah, lalu dirakit menjadi satu bangunan utuh.

React bekerja dengan cara yang mirip.

UI sebuah aplikasi dipecah menjadi bagian kecil seperti:

  • Navbar
  • Sidebar
  • Button
  • Card
  • Footer

Setiap bagian menjadi komponen mandiri yang bisa digunakan kembali di berbagai halaman.

Pendekatan ini membuat pengembangan aplikasi menjadi jauh lebih terstruktur.

Komponen Membuat Kode Lebih Mudah Dikelola

Salah satu keuntungan terbesar dari komponen adalah kemudahan dalam mengelola kode.

Bayangkan sebuah aplikasi besar memiliki ratusan elemen UI. Tanpa komponen, semua kode akan menumpuk di satu file besar.

Namun dengan React, kita bisa memisahkan komponen menjadi file yang berbeda.

Contohnya struktur folder sederhana:

src
 ├── components
 │   ├── Header.jsx
 │   ├── Navbar.jsx
 │   ├── ArticleCard.jsx
 │   └── Footer.jsx
 ├── App.jsx
 └── main.jsx

Dengan struktur seperti ini, setiap bagian aplikasi memiliki tanggung jawab masing-masing.

Hal ini membuat kode lebih:

  • mudah dibaca
  • mudah diperbaiki
  • mudah dikembangkan

Mengenal Props dalam React

Setelah memahami komponen, kita masuk ke konsep penting berikutnya yaitu props.

Jika komponen adalah blok bangunan UI, maka props adalah cara mengirim data ke komponen tersebut.

Props merupakan singkatan dari properties.

Dengan props, kita bisa membuat komponen menjadi lebih fleksibel.

Mari kita lihat contoh sederhana.

function Greeting(props){
  return <h2>Halo {props.nama}</h2>
}

Komponen Greeting menerima sebuah props bernama nama.

Sekarang kita bisa memanggil komponen tersebut dengan nilai yang berbeda.

function App(){
  return(
    <div>
      <Greeting nama="Authemers" />
      <Greeting nama="Developer" />
      <Greeting nama="React Learner" />
    </div>
  )
}

Hasil yang ditampilkan di browser akan menjadi:

Halo Authemers
Halo Developer
Halo React Learner

Perhatikan bahwa kita hanya membuat satu komponen, tetapi bisa menghasilkan output yang berbeda tergantung data yang dikirim.

Inilah kekuatan props dalam React.

function ProductCard(props){
  return(
    <div>
      <h3>{props.namaProduk}</h3>
      <p>Harga: Rp {props.harga}</p>
    </div>
  )
}

Kemudian kita gunakan komponen tersebut seperti ini.

function App(){
  return(
    <div>
      <ProductCard namaProduk="Laptop" harga="12000000" />
      <ProductCard namaProduk="Mouse" harga="150000" />
      <ProductCard namaProduk="Keyboard" harga="350000" />
    </div>
  )
}

Aturan Penting dalam Props

Ada satu hal penting yang perlu diingat ketika menggunakan props.

Props bersifat read-only.

Artinya komponen tidak boleh mengubah nilai props yang diterima.

Props hanya berfungsi sebagai data input untuk komponen tersebut.

Jika sebuah komponen perlu mengubah data, biasanya kita menggunakan state, yang akan kita bahas pada bab berikutnya.

Menggabungkan Komponen dan Props

Sekarang mari kita lihat bagaimana komponen dan props bekerja bersama.

Contohnya kita ingin membuat daftar anggota komunitas Authemic.

function Member(props){
  return(
    <div>
      <h3>{props.nama}</h3>
      <p>Status: {props.status}</p>
    </div>
  )
}

Kemudian kita tampilkan beberapa anggota.

function App(){
  return(
    <div>
      <Member nama="Mas Hedi" status="Founder" />
      <Member nama="Authemers" status="Community" />
      <Member nama="Developer" status="Contributor" />
    </div>
  )
}

Dengan pendekatan ini, React dapat membuat tampilan yang dinamis tanpa harus menulis kode yang sama berulang-ulang.

Mengapa Konsep Ini Penting untuk Dipahami?

Jika Authemers ingin benar-benar memahami React, maka konsep komponen dan props harus dikuasai dengan baik.

Hampir seluruh aplikasi React dibangun menggunakan dua konsep ini.

Tanpa komponen, React tidak akan memiliki struktur yang jelas.

Tanpa props, komponen akan menjadi kaku dan sulit digunakan kembali.

Karena itu, banyak developer mengatakan bahwa memahami komponen dan props sama seperti memahami DNA dari React.

Penutup

Pada bab ini kita sudah memahami dua konsep paling fundamental dalam React:

Komponen
Komponen adalah blok bangunan UI yang memungkinkan kita memecah tampilan menjadi bagian kecil yang reusable.

Props
Props adalah cara mengirim data ke komponen agar komponen tersebut dapat menampilkan informasi yang berbeda.

Dengan memahami dua konsep ini, Authemers sudah selangkah lebih dekat untuk benar-benar memahami cara kerja React dalam membangun aplikasi modern.

Pada bab berikutnya kita akan masuk ke konsep yang membuat aplikasi React menjadi interaktif, yaitu state dan hook pertama yang sangat penting dalam React: useState.

Artikel terkait