Advanced · Level 16: Frontend ArchitectureAdvanced55 menitBahasa Indonesia

Usage Examples

Menulis contoh pemakaian component yang dekat dengan workflow product agar props, composition, dan batas penggunaan dapat dipahami tanpa menebak.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan example yang realistis dari JSX demo yang tidak memiliki context product
Memilih props serta content yang menunjukkan penggunaan utama component
Menunjukkan optional slot atau edge case hanya ketika membantu consumer memahami contract
Menulis contoh yang dapat dipakai sebagai referensi saat implementasi lokal

ReactComponent APIDocumentationCompositionCode Review

Isi lesson

5 blok

1.
Contoh penggunaan adalah bagian dari APIBelum selesaiWajib
2.
Happy path dan optional action yang bermaknaBelum selesaiWajib
3.
Writing practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Contoh penggunaan adalah bagian dari API

Wajib

Type memberi tahu field yang tersedia, tetapi usage example memberi context: data mana yang biasanya dipilih, kapan slot action diperlukan, dan seperti apa caller yang sehat. Example <CourseInfoCard title="Test" /> mungkin valid setelah semua prop ditambahkan, tetapi tidak membantu engineer memahami kapan component dipakai dalam flow belajar. Example yang baik memakai copy realistis, prop utama, dan action yang benar-benar relevan dengan feature.

Jangan menulis lima variasi hanya untuk membuktikan component fleksibel. Mulai dari satu happy path yang paling sering dipakai, lalu tambahkan satu example untuk optional area atau edge case yang mudah salah. Example sebaiknya sederhana untuk dicopy ke local project, tetapi tetap menggunakan semantic element serta link atau button sesuai action nyata.

Bagian ini memengaruhi progres lesson.

Happy path dan optional action yang bermakna

Wajib

tsx

export function ContinueLearningCard() {
  return (
    <CourseInfoCard
      title="Dasar TypeScript"
      description="Lanjutkan dari lesson object types."
      status="in-progress"
      action={<a href="/lesson/typescript-object-types">Lanjutkan lesson</a>}
    />
  );
}

export function CompletedCourseCard() {
  return (
    <CourseInfoCard
      title="HTML Basics"
      description="Semua blok wajib sudah selesai."
      status="complete"
    />
  );
}

Contoh pertama menunjukkan status in-progress dan action navigasi yang sesuai. Contoh kedua menunjukkan bahwa action memang opsional, bukan prop yang harus diisi dengan placeholder. Keduanya memberi consumer alasan product untuk memilih status serta action, bukan hanya daftar nilai yang bisa dipasang pada JSX.

Bagian ini memengaruhi progres lesson.

Writing practice

Wajib

Latihan menulis

Tulis dua usage example untuk satu reusable component pada local project atau untuk CourseInfoCard. Example pertama harus menunjukkan happy path product; example kedua harus menunjukkan optional prop, edge case, atau keadaan ketika area slot tidak dipakai. Sertakan JSX yang lengkap, lalu jelaskan dua sampai tiga kalimat mengapa props tersebut dipilih. Gunakan element semantic yang sesuai untuk action, misalnya link untuk navigasi dan button untuk aksi di halaman yang sama.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/650 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyediakan dua JSX example yang dapat dibaca sebagai flow product nyata.
Example pertama menunjukkan happy path dengan props utama yang lengkap.
Example kedua menunjukkan optional prop, edge case, atau slot yang sengaja tidak dipakai.
Menggunakan link atau button sesuai jenis action yang sebenarnya.
Menjelaskan alasan pemilihan props dan batas component secara singkat.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa ciri paling penting dari usage example component yang baik?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Usage example memberi context yang tidak selalu terlihat dari type props.
Mulai dari happy path product lalu tambahkan edge case atau optional slot yang benar-benar membantu.
Gunakan link dan button sesuai action nyata agar example tidak mengajarkan semantics yang salah.
Example harus cukup dekat dengan local implementation sehingga engineer dapat menggunakannya sebagai referensi.
Berikutnya, documentation note merangkum tujuan, constraint, accessibility, dan kondisi ketika component tidak tepat dipakai.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Contoh penggunaan adalah bagian dari API.

Memuat progres Review module