Frontend Academy · Pelajaran

Komponen Fungsional dan Props

Buat komponen sebagai fungsi, terima dan destructure props, lalu gunakan PropTypes atau tipe TypeScript untuk mendokumentasikan bentuk data yang diharapkan.

Komponen Fungsional dan Props adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Komponen React?

Komponen React adalah fungsi JavaScript yang mengembalikan JSX. Komponen merupakan blok pembangun aplikasi React — bagian UI yang dapat digunakan kembali dan digabungkan.

function Welcome() {
  return <h1>Welcome to CoddyKit!</h1>;
}

// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;

Properti — Meneruskan Data ke Bawah

Properti (properties) adalah cara meneruskan data dari induk ke anak. Komponen menerimanya sebagai argumen pertama dalam bentuk objek biasa.

function Greeting({ name, role }: { name: string; role: string }) {
  return <p>Hello, {name}! Your role is {role}.</p>;
}

// Usage:
<Greeting name="Alice" role="admin" />

Antarmuka TypeScript untuk Properti

Tentukan antarmuka bernama untuk properti agar mendapatkan pelengkapan otomatis, pemeriksaan tipe, dan dokumentasi.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

Properti children

Properti children berisi konten di antara tag pembuka dan penutup komponen. Beri tipe React.ReactNode agar dapat menerima konten apa pun yang bisa dirender.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage:
<Card title="Hello">
  <p>Card content goes here.</p>
</Card>

Properti Default dengan Destrukturisasi

Tetapkan nilai default langsung dalam pola destrukturisasi. Ini adalah pendekatan modern — API defaultProps yang sudah usang tidak lagi disarankan.

function Alert({ type = 'info', message, onClose }: AlertProps) {
  return (
    <div className={`alert alert-${type}`}>
      <span>{message}</span>
      <button onClick={onClose}>×</button>
    </div>
  );
}

Menggabungkan Komponen

Komponen dapat digabungkan: Page menggunakan Layout, yang menggunakan Nav dan Sidebar, dan masing-masing menggunakan atom yang lebih kecil seperti Button dan Icon. Pohon komponen ini adalah pohon komponen React.

Konvensi Penamaan

Nama komponen harus dimulai dengan huruf kapital. Nama dengan huruf kecil diperlakukan sebagai elemen HTML. <div> adalah div HTML; <Div> adalah komponen React bernama Div.

Komponen Murni

Komponen bersifat murni jika properti yang sama selalu menghasilkan keluaran yang sama dan tidak ada efek samping selama perenderan. Komponen murni lebih mudah dipahami dan dioptimalkan.

// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;

// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
  localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
  return <p>{id}</p>;
};

Meneruskan Fungsi sebagai Properti

Fungsi (panggilan balik) diteruskan sebagai properti agar komponen anak dapat berkomunikasi dengan komponen induk. Komponen induk menentukan fungsi tersebut; komponen anak memanggilnya.

function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
  return (
    <li>
      {text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}

Menyebarkan Properti

Operator penyebaran meneruskan semua properti dari sebuah objek ke komponen. Ini berguna untuk komponen pembungkus atau penerus, tetapi gunakan dengan hati-hati — properti yang tidak diharapkan dapat ikut diteruskan.

function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={`input-base ${props.className || ''}`} />;
}

Fragmen dan Kunci dalam Konteks Properti

Saat merender daftar komponen sebagai anak, setiap komponen harus memiliki properti key yang unik. Kunci membantu React mengidentifikasi item yang berubah, ditambahkan, atau dihapus.

Pemeriksaan Singkat

Bagaimana cara memberikan nilai default untuk sebuah properti dalam komponen fungsi React modern?

Ringkasan: Komponen dan Properti

Komponen fungsional adalah fungsi JavaScript yang mengembalikan JSX. Properti meneruskan data dari induk ke anak. Gunakan antarmuka TypeScript untuk tipe properti. Gunakan children: React.ReactNode untuk konten sisipan. Tetapkan nilai default dalam destrukturisasi. Teruskan fungsi panggilan balik sebagai properti untuk komunikasi dari anak ke induk. Nama komponen dimulai dengan huruf kapital.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Fungsional dan Props” gratis?

Ya — teks lengkap “Komponen Fungsional dan Props” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Fungsional dan Props”?

Buat komponen sebagai fungsi, terima dan destructure props, lalu gunakan PropTypes atau tipe TypeScript untuk mendokumentasikan bentuk data yang diharapkan. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Komponen Fungsional dan Props” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy