Tutorial React Dasar Part 2: Menguasai Props & Komponen Reusable

Assalamualaikum Wr. Wb.

Tutorial React Dasar Part 2: Menguasai Props & Komponen Reusable | Bikin Kartu Produk Dinamis Tanpa Duplikasi Kode | Di artikel Part 1 sebelumnya, kita sudah berhasil memasang projek React berbasis Vite dan memahami cara kerja dasar sintaks JSX. Namun, kekuatan sejati React bukan hanya menampilkan teks statis, melainkan kemampuannya memecah tampilan antarmuka web menjadi potongan-potongan kecil komponen yang dapat dipakai berulang kali (*reusable components*). Bayangkan jika Anda ingin menampilkan 20 daftar produk di toko online; kita tidak perlu membuat 20 blok kode HTML manual satu per satu. Cukup buat 1 template komponen lalu oper datanya menggunakan Props. Kali ini admin akan membagikan panduan step-by-step menguasai Props dan mengombinasikannya dengan useState yang dijamin work 100%.

1. Apa Itu Props di React?

Props (singkatan dari Properties) adalah mekanisme untuk mengirimkan data dari komponen induk (*Parent Component*) ke komponen anak (*Child Component*):

• Sifat Read-Only: Komponen anak hanya menerima data dan tidak boleh mengubah isi props secara langsung (*immutable*).
• Fleksibel: Props bisa menerima tipe data apa saja: teks (string), angka (number), array, objek, hingga fungsi klik.
• Aliran Satu Arah (Unidirectional Data Flow): Data selalu mengalir turun dari atas (Parent) ke bawah (Child), menjaga struktur data aplikasi tetap rapi dan mudah di-debug.

Alur pengiriman data via props dari Parent (App.jsx) ke Child Component (ProdukCard.jsx)

2. Membuat Komponen Anak (ProdukCard.jsx)

Buat file baru di dalam folder projek pada lokasi src/components/ProdukCard.jsx:

// File: src/components/ProdukCard.jsx
import { useState } from 'react';

// Menggunakan Destructuring Props: { nama, harga, stokAwal }
function ProdukCard({ nama, harga, stokAwal }) {
  const [stok, setStok] = useState(stokAwal);

  function handleBeli() {
    if (stok > 0) {
      setStok(stok - 1);
    }
  }

  return (
    <div style={{
      border: '1px solid #334155',
      borderRadius: '10px',
      padding: '20px',
      backgroundColor: '#1e293b',
      color: '#f8fafc',
      width: '240px',
      textAlign: 'center'
    }}>
      <h3 style={{ margin: '0 0 10px 0', color: '#38bdf8' }}>{nama}</h3>
      <p style={{ fontSize: '18px', fontWeight: 'bold' }}>
        Rp {harga.toLocaleString('id-ID')}
      </p>

      <div style={{ margin: '12px 0' }}>
        <span style={{
          fontSize: '12px',
          padding: '4px 10px',
          borderRadius: '20px',
          backgroundColor: stok > 0 ? '#065f46' : '#991b1b',
          color: stok > 0 ? '#34d399' : '#fca5a5'
        }}>
          {stok > 0 ? `Sisa Stok: ${stok}` : 'Stok Habis!'}
        </span>
      </div>

      <button 
        onClick={handleBeli}
        disabled={stok === 0}
        style={{
          width: '100%',
          padding: '10px 0',
          backgroundColor: stok > 0 ? '#0284c7' : '#475569',
          color: '#ffffff',
          border: 'none',
          borderRadius: '6px',
          fontWeight: 'bold',
          cursor: stok > 0 ? 'pointer' : 'not-allowed'
        }}
      >
        {stok > 0 ? '+ Beli Sekarang' : 'Sold Out'}
      </button>
    </div>
  );
}

export default ProdukCard;

3. Memanggil Komponen Berulang Kali di App.jsx

Sekarang buka file src/App.jsx dan panggil komponen <ProdukCard /> dengan data yang berbeda-beda:

// File: src/App.jsx
import ProdukCard from './components/ProdukCard';

function App() {
  return (
    <div style={{ padding: '30px', backgroundColor: '#0f172a', minHeight: '100vh', fontFamily: 'Arial, sans-serif' }}>
      <h1 style={{ color: '#f8fafc', textAlign: 'center' }}>Katalog Toko Online</h1>
      
      {/* Grid container pembungkus kartu */}
      <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', flexWrap: 'wrap', marginTop: '30px' }}>
        <ProdukCard nama="Sepatu Lari Sport" harga={350000} stokAwal={5} />
        <ProdukCard nama="Jersey Futsal Pro" harga={175000} stokAwal={3} />
        <ProdukCard nama="Kaos Kaki Grip Anti Slip" harga={45000} stokAwal={10} />
      </div>
    </div>
  );
}

export default App;

4. Keuntungan Menggunakan Pola Ini

• DRY (Don't Repeat Yourself): Jika ingin mengubah tampilan tombol atau warna kartu, Anda cukup mengedit 1 file (ProdukCard.jsx) dan seluruh 20 kartu produk di halaman akan berubah secara otomatis.
• State Terisolasi: Saat tombol beli pada kartu Sepatu diklik, hanya stok kartu Sepatu yang berkurang; stok kartu Jersey dan Kaos Kaki tetap aman dan tidak ikut terpengaruh.

Itulah tutorial dasar memahami Props dan membuat komponen reusable di React. Saya sendiri selalu membagi tampilan UI menjadi komponen-komponen kecil seperti ini agar struktur kodingan tetap bersih dan rapi saat aplikasi web terus berkembang semakin besar.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat yang sedang memperdalam ilmu framework React.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik React Props