Advanced · Level 16: Frontend ArchitectureAdvanced60 menitBahasa Indonesia

Documentation Notes

Mencatat tujuan, constraint, accessibility consideration, edge case, dan kondisi tidak memakai component secara ringkas tetapi dapat ditindaklanjuti.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menulis documentation note yang membantu consumer memilih component dengan benar
Menjelaskan purpose, use case, constraint, dan non-goal tanpa mengulang setiap baris code
Mencatat accessibility requirement yang menjadi bagian dari public contract
Menyebut edge case serta kondisi ketika component tidak tepat dipakai

DocumentationComponent APIAccessibilityMaintainabilityCode Review

Isi lesson

6 blok

1.
Note yang baik menjawab pertanyaan sebelum code reviewBelum selesaiWajib
2.
Note singkat yang membantu consumer mengambil keputusanBelum selesaiWajib
3.
Writing practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan mendokumentasikan kemampuan yang belum dijaga test atau implementationBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Note yang baik menjawab pertanyaan sebelum code review

Wajib

Documentation note bukan pengganti type atau tempat mengulang JSX baris demi baris. Ia membantu reader yang baru masuk ke feature menjawab: component ini menyelesaikan masalah apa, kapan harus dipakai, apa yang tidak ditangani, constraint accessibility apa yang harus dipenuhi caller, dan edge case apa yang perlu diuji. Note pendek yang spesifik mengurangi keputusan yang diulang di issue, pull request, serta onboarding.

Untuk CourseInfoCard, note dapat menjelaskan bahwa component ini menampilkan ringkasan satu course, menerima action sebagai link atau button yang bermakna, dan tidak cocok untuk dashboard card yang membutuhkan chart atau menu kompleks. Bila action memakai button, caller tetap bertanggung jawab menyediakan event yang bekerja. Bila memakai link, label link harus menjelaskan destination. Constraint seperti ini adalah bagian dari API, bukan detail visual yang boleh diabaikan.

Bagian ini memengaruhi progres lesson.

Note singkat yang membantu consumer mengambil keputusan

Wajib

export const courseInfoCardNotes = {
  purpose:
    "Menampilkan ringkasan satu course beserta status dan satu action lanjutan.",
  useWhen:
    "Kamu memiliki title, description, dan status course yang perlu tampil konsisten di list atau dashboard.",
  doNotUseWhen:
    "Card membutuhkan chart, menu banyak aksi, atau layout detail yang tidak lagi sesuai dengan summary course.",
  accessibility: [
    "Gunakan action link untuk navigasi ke route lain.",
    "Gunakan action button hanya untuk aksi pada halaman saat ini dan beri label yang menjelaskan hasilnya.",
    "Pastikan title dan description tetap cukup jelas ketika action tidak dipakai.",
  ],
  edgeCases: [
    "Status harus berasal dari union yang didukung component.",
    "Jangan mengirim action placeholder ketika tidak ada tindakan lanjutan.",
  ],
} as const;

Note ini tidak menjanjikan bahwa CourseInfoCard dapat menjadi semua jenis card. Ia memberi batas penggunaan yang dapat dipakai saat review. Bagian accessibility juga menjelaskan keputusan yang tetap menjadi tanggung jawab caller, sehingga slot action tidak berubah menjadi area bebas tanpa semantic contract.

Bagian ini memengaruhi progres lesson.

Writing practice

Wajib

Latihan menulis

Tulis documentation note untuk satu reusable component pada local project atau untuk CourseInfoCard. Gunakan heading atau label: purpose, use when, do not use when, accessibility, dan edge cases. Note harus menjelaskan satu constraint API dan satu tanggung jawab caller yang tidak dapat dijamin component sendiri. Hindari menulis ulang semua prop type; fokus pada keputusan penggunaan yang mungkin salah bila hanya membaca nama component.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/600 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menjelaskan tujuan component dan context penggunaan yang tepat.
Menyebut satu atau lebih kondisi ketika component tidak tepat digunakan.
Mencatat constraint API atau shape data yang penting bagi consumer.
Menyebut accessibility consideration dan tanggung jawab caller yang spesifik.
Menyebut edge case yang dapat diuji atau direview.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Informasi mana yang paling bernilai dalam documentation note component?

Progres lesson naik setelah jawaban benar.

Peringatan

Opsional

Jangan mendokumentasikan kemampuan yang belum dijaga test atau implementation

Kalimat seperti mendukung semua layout, accessible untuk semua kondisi, atau siap dipakai di mana saja menciptakan contract yang tidak dapat dipenuhi. Tulis behavior yang benar-benar dijaga component dan sebutkan keputusan yang tetap berada pada caller. Bila constraint baru muncul, perbarui API, usage example, note, serta test atau manual QA secara bersama.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Documentation note memberi purpose, batas penggunaan, accessibility consideration, dan edge case yang tidak selalu terlihat dari type.
Note yang baik membantu consumer memilih component tanpa membuka seluruh implementation.
Constraint semantic link/button dan tanggung jawab caller adalah bagian dari API component.
Jangan menjanjikan fleksibilitas atau accessibility yang belum benar-benar dijaga oleh code serta QA.
Uji Kompetensi berikutnya menggabungkan API, prop naming, content data, usage example, dan note dalam satu component review.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Note yang baik menjawab pertanyaan sebelum code review.

Memuat progres Review module