Uji Kompetensi Product Components
Membuktikan kesiapan membangun satu product component dengan state, semantics, accessibility expectation, dan usage note yang dapat dijelaskan kepada tim.
Yang dicek
- Menyatukan field anatomy, submit state, status feedback, dan button behavior pada form kecil
- Membedakan state yang memerlukan persistent feedback dari feedback toast singkat
- Menjelaskan pilihan native table, dialog, tabs, atau select dari kebutuhan user
- Menulis usage note tentang purpose, props, states, accessibility expectation, dan batas component
Isi lesson
6 blok- 1.Checkpoint: buat invite form yang jelas pada setiap stateBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Periksa pattern sebelum menambah complexityBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: buat invite form yang jelas pada setiap state
WajibTim membutuhkan InviteMemberForm pada course settings. Versi awal memakai div clickable, placeholder tanpa label, boolean isLoading dan hasError tanpa message, serta toast untuk semua state. Hasilnya singkat tetapi consumer sulit menjelaskan data, visual state, serta accessibility behavior.
Pada checkpoint ini, buat contract yang jujur: field memakai label dan input email native; error terhubung ke control; status submit dibatasi union; button memakai disabled native saat saving; status feedback memiliki role yang sesuai; dan caller tetap memiliki onSubmit serta onEmailChange. Ini bukan full form library atau backend integration. Tujuannya membuktikan component memiliki purpose, state, dan boundary yang dapat dibaca sebelum dipakai banyak feature.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Product Components
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
Hubungan yang paling tepat pada reusable text field adalah
Coding practice
WajibDibuka di workspace khususBuild course invite form checkpoint
Bangun InviteMemberForm dengan email field, status union, disabled submit, error relationship, dan live feedback yang sesuai.
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 product component di local React atau Next.js project, atau gunakan InviteMemberForm pada checkpoint ini. Tulis usage note: purpose dan consumer component, props serta state, semantic HTML/control native, default/loading/error/empty atau success state, accessibility expectation untuk QA, satu happy-path usage example, satu batas penggunaan, dan satu complexity yang sengaja tidak dibangun. Jelaskan alasan native versus custom bila component memilih select, dialog, tabs, atau status message.
Tulis draft dulu sebelum menandai writing practice selesai.
0/900 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibPeriksa pattern sebelum menambah complexity
Dokumentasi resmi membantu memeriksa semantic dan keyboard contract yang tidak terlihat dari screenshot. Baca pattern sesuai task, lalu gunakan purpose product serta manual QA untuk memutuskan apakah native element sudah cukup atau component khusus memang diperlukan.
MDN
Your first form
Fokus baca
- Hubungan label dengan form control.
- Struktur form dan submit behavior native.
- Memeriksa field sebelum membungkusnya dengan React component.
Abaikan dulu
- Membuat form library sendiri atau memindahkan seluruh validation ke generic input.
MDN
HTML table basics
Fokus baca
- Kapan table tepat untuk row dan column.
- Caption dan table header.
- Struktur semantic sebelum data grid feature.
Abaikan dulu
- Virtualization atau data grid enterprise.
W3C WAI
Dialog (Modal) Pattern
Fokus baca
- Focus entry, Tab containment, Escape, close action, dan focus return.
- role dialog, aria-modal, dan visible title.
- Kapan background harus benar-benar inert.
Abaikan dulu
- Menulis modal library dari nol untuk semua variasi content.
W3C WAI
Tabs Pattern
Fokus baca
- Hubungan tablist, tab aktif, dan tabpanel.
- Kapan tabs tepat untuk content.
- Keyboard behavior sebelum custom tabs.
Abaikan dulu
- Memakai tabs untuk filter, navigation utama, atau wizard tanpa alasan.
MDN
ARIA live regions
Fokus baca
- Announcement polite dan assertive.
- Feedback yang perlu diberitahukan user.
- Menghindari notification noise.
Abaikan dulu
- Menggunakan live region untuk setiap perubahan visual kecil.
Aksi setelah membaca
Pilih satu product component lokal. Tulis props serta state yang didukung, cek dengan keyboard dari trigger sampai recovery action, tambahkan usage example dan note tentang semantics/focus/announcement behavior, lalu jalankan typecheck serta QA route consumer-nya.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Product component reusable memiliki purpose, API, semantic structure, dan state yang dapat dijelaskan consumer.
- Field, table, modal, toast, tabs, dan select menangani problem berbeda; component universal bukan jawaban default.
- Native HTML sering memberi interaction serta accessibility behavior lebih kuat daripada custom control awal.
- Loading, empty, error, success, disabled, dan focus dipilih dari dampak task user.
- Berikutnya, Storybook and Package Basics mendokumentasikan variant, state, serta quality check component di luar route product.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: buat invite form yang jelas pada setiap state.