Advanced · Level 16: Frontend ArchitectureAdvanced55 menitBahasa Indonesia

Prop Naming

Memberi nama props yang mengungkap data, keadaan boolean, dan event sehingga penggunaan JSX dapat dibaca tanpa membuka implementation component.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan nama prop data, boolean, dan callback yang jelas
Menggunakan is, has, atau can untuk boolean ketika membantu membaca keadaan UI
Menggunakan on untuk callback yang menyatakan event atau intent component
Mengganti nama generik yang memaksa caller menebak makna props

ReactPropsNamingTypeScriptReadability

Isi lesson

6 blok

1.
Nama prop harus menjelaskan apa yang berubahBelum selesaiWajib
2.
Nama prop memberi context tanpa membaca implementationBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Bedakan event implementation dan intent productBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Nama prop harus menjelaskan apa yang berubah

Wajib

JSX sering menjadi dokumentasi pertama sebuah component. <CourseStatus text={...} active={...} click={...} /> memaksa pembaca membuka implementation untuk menjawab tiga pertanyaan: text itu label atau deskripsi, active berarti selected atau completed, dan click melakukan apa. Nama yang lebih spesifik membuat intent terlihat di tempat pemakaian: label, isComplete, dan onOpenCourse.

Gunakan nama benda untuk data yang ditampilkan, kata keadaan untuk boolean, dan on + event atau intent untuk callback. onDismiss, onRetry, dan onOpenCourse lebih jujur daripada callback atau handleClick. Hindari singkatan yang hanya dipahami author awal. Nama panjang sedikit lebih baik daripada API yang cepat diketik tetapi membuat code review dan perubahan product lebih lambat.

Bagian ini memengaruhi progres lesson.

Nama prop memberi context tanpa membaca implementation

Wajib

tsx

type CourseStatusProps = {
  label: string;
  isComplete: boolean;
  onOpenCourse: () => void;
};

export function CourseStatus({
  label,
  isComplete,
  onOpenCourse,
}: CourseStatusProps) {
  return (
    <button
      type="button"
      aria-pressed={isComplete}
      onClick={onOpenCourse}
    >
      {label}: {isComplete ? "selesai" : "belum selesai"}
    </button>
  );
}

label adalah data yang terlihat, isComplete menyatakan keadaan boolean yang dibaca UI, dan onOpenCourse menjelaskan intent callback saat user menekan control. Nama callback tidak perlu mengikuti nama function internal seperti handleClick; caller perlu tahu event atau hasil yang diharapkan, bukan detail implementation di dalam component.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Rename course status props

Ganti prop text, active, dan click dengan nama yang menyatakan data, state boolean, serta intent event CourseStatus.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Nama callback mana yang paling jelas untuk button yang membuka detail course?

Progres lesson naik setelah jawaban benar.

Tips

Opsional

Bedakan event implementation dan intent product

Di dalam component, handleClick boleh menjadi nama function lokal karena konteks button sudah dekat. Pada public API, onOpenCourse lebih berguna daripada onClick ketika caller perlu merespons intent spesifik. Namun, onClick tetap tepat untuk primitive generic seperti Button yang memang tidak mengetahui domain product pemakainya.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Nama data menjelaskan isi yang ditampilkan, bukan sekadar tipe nilainya.
Boolean sebaiknya terdengar seperti keadaan yang dapat dibaca, misalnya isComplete atau hasError.
Callback public memakai on + event atau intent agar caller memahami hasil yang diharapkan.
Nama prop yang jelas mengurangi kebutuhan membuka implementation saat memakai component.
Berikutnya, kita memakai data content yang terstruktur agar component dapat merender banyak item tanpa API yang kabur.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Nama prop harus menjelaskan apa yang berubah.

Memuat progres Review module