Uji Kompetensi Component API and Documentation
Membuktikan kesiapan merancang, memakai, dan mendokumentasikan component API yang reusable tanpa mengaburkan purpose serta accessibility contract-nya.
Yang dicek
- Merancang component API dengan props, union, dan slot yang sesuai kebutuhan product
- Menamai data, boolean, dan event props agar consumer memahami intent component
- Merender content data terstruktur dengan semantics serta key yang benar
- Menulis usage example dan documentation note yang menjelaskan constraint serta edge case
Isi lesson
6 blok- 1.Checkpoint: buat CourseNoticeCard mudah dipakai tanpa menjadi component universalBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca contract React sebelum memperluas API componentBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: buat CourseNoticeCard mudah dipakai tanpa menjadi component universal
WajibTim membutuhkan CourseNoticeCard untuk menampilkan tip, warning, atau informasi penting pada lesson. Versi awal menerima data: unknown, mode string bebas, titleText, bodyText, isBlue, isYellow, showAction, actionText, dan actionCallback. Ia juga tidak memiliki example atau note, sehingga beberapa caller memakai button untuk navigasi dan beberapa mengirim status yang tidak didukung. Pada checkpoint ini, buat contract yang dapat dijelaskan: content notice memiliki type, tone dibatasi oleh union, card menerima satu action slot bernama bila relevan, prop tidak memakai nama generik, dan note menjelaskan semantic action serta kondisi ketika card ini tidak tepat dipakai. Tujuannya bukan membuat design system; tujuannya membuat satu component domain dapat digunakan dengan benar oleh feature berikutnya.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Component API and Documentation
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 7
Target lulus: 70
Mengapa props perlu diperlakukan sebagai API component?
Coding practice
WajibDibuka di workspace khususDesign course notice card API checkpoint
Rancang CourseNoticeCard dengan content contract, tone union, action slot, usage example, dan note yang menjelaskan semantic serta batas component.
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.
Writing practice
WajibLatihan menulis
Pilih satu reusable component pada local React atau Next.js project, atau gunakan CourseNoticeCard pada checkpoint ini. Tulis review note yang memuat: tujuan component, props dan nama yang kamu sederhanakan, content data atau children/slot yang dipilih, satu happy-path usage example, satu batas penggunaan, accessibility constraint untuk link/button atau heading, dan satu edge case yang akan kamu QA. Jelaskan satu prop atau flexibility yang sengaja tidak kamu tambahkan beserta alasannya.
Tulis draft dulu sebelum menandai writing practice selesai.
0/850 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca contract React sebelum memperluas API component
Gunakan dokumentasi resmi untuk meninjau props, data flow, JSX children, dan semantics yang harus tetap terlihat di API. Dokumentasi tidak memilih domain component untukmu; gunakan context feature, consumer nyata, dan QA untuk memutuskan apakah contract perlu diperluas atau justru dipersempit.
React
Passing Props to a Component
Fokus baca
- Props sebagai informasi dari parent ke child component.
- Destructuring dan default value saat benar-benar membantu contract.
- Passing JSX untuk area composition seperti action atau children.
Abaikan dulu
- Membuat component menerima seluruh object props tanpa memikirkan API yang dibutuhkan consumer.
React
Thinking in React
Fokus baca
- Memecah UI mengikuti information architecture dan responsibility yang jelas.
- Membedakan data props dari state yang benar-benar perlu diingat component.
- Memilih component boundary berdasarkan perubahan serta data yang bergerak bersama.
Abaikan dulu
- Menambah global state atau abstraction baru sebelum flow component membutuhkannya.
TypeScript
JSX
Fokus baca
- Type checking untuk props serta children pada JSX.
- Menjaga props component sebagai contract yang dapat diperiksa compiler.
- Membaca error JSX sebagai sinyal bahwa caller tidak memenuhi API component.
Abaikan dulu
- JSX factory, runtime compiler configuration, dan declaration namespace mendalam.
W3C WAI
Introduction to Web Accessibility
Fokus baca
- Accessibility sebagai bagian dari kualitas component, bukan tahap tambahan setelah UI selesai.
- Mengapa semantic HTML, keyboard access, dan teks yang jelas perlu dijaga oleh API component.
- Mendokumentasikan constraint yang tetap menjadi tanggung jawab caller.
Abaikan dulu
- Standar WCAG success criteria lengkap dan audit legal yang lebih luas dari component ini.
Aksi setelah membaca
Pilih satu reusable component lokal. Baca semua consumer-nya, sederhanakan satu prop yang ambigu bila ada, tambahkan satu usage example realistis, lalu tulis documentation note tentang purpose, constraint accessibility, edge case, dan satu situasi ketika component tidak boleh dipakai. Jalankan typecheck serta manual QA pada route consumer yang terdampak.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Component API yang baik menjelaskan purpose lewat props, type, dan area composition yang kecil.
- Prop naming membuat data, boolean, serta event intent dapat dibaca langsung di JSX.
- Content data terstruktur membantu component merender item berulang dengan contract yang konsisten.
- Usage example dan documentation note menjelaskan context, accessibility constraint, edge case, serta batas penggunaan.
- Berikutnya, Level 17: Design System dapat membangun token, component library, dan team convention di atas API component yang sudah matang.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: buat CourseNoticeCard mudah dipakai tanpa menjadi component universal.