Advanced · Level 9: React AdvancedAdvanced95 menitBahasa Indonesia

Uji Kompetensi Advanced Component Patterns

Checkpoint kesiapan untuk membangun composition yang reusable, menjaga form field accessible, dan menjelaskan alasan abstraction.

StatusMemuat progres

ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

Mengecek pemahaman compound components, children, dan slot-like props
Membangun panel dan form field yang dapat dipakai ulang
Menjelaskan alasan abstraction serta batas API component

ReactCompositionFormsAccessibilityAssessment

Isi lesson

6 blok

1.
Checkpoint: pattern yang membantu, bukan sekadar terlihat reusableBelum selesaiWajib
2.
QuizBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Baca composition dan form semantics dari docs resmiBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Checkpoint: pattern yang membantu, bukan sekadar terlihat reusable

Wajib

Uji Kompetensi ini berfokus pada keputusan component API. Kamu akan menyusun Panel dengan area bernama dan FormField yang menjaga hubungan accessibility dasar. Quiz serta catatan implementasi akan mengecek apakah kamu dapat membedakan compound components, composition biasa, dan abstraction yang belum memiliki alasan.

Kamu belum perlu membuat design system lengkap, headless component, polymorphic API, advanced generic TypeScript, atau package publish. Fokusnya adalah satu pattern kecil yang mudah dipakai, mudah dijelaskan, dan tidak menyembunyikan behavior penting.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Advanced Component Patterns

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 5

Target lulus: 70

Kapan compound components paling sesuai digunakan?

Coding practice

WajibDibuka di workspace khusus

Build composable profile panel

Bangun ProfilePanel dengan Panel composable dan FormField accessible, lalu pertahankan API yang kecil serta jelas di tempat pemakaian.

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.

12 cek otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis implementation note untuk rekan satu tim tentang pattern ProfilePanel yang kamu buat. Gunakan format berikut: - Masalah repetition yang ingin diselesaikan: - Component yang diekstrak dan tanggung jawabnya: - Props atau children yang dipilih, beserta alasan: - Aturan accessibility yang dijaga: - Bagian yang sengaja tidak dibuat generic: - Kapan pattern ini perlu dievaluasi ulang: Jelaskan trade-off secara spesifik, bukan hanya mengatakan component ini reusable.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/500 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyebut masalah repetition yang nyata.
Menjelaskan batas tanggung jawab setiap component.
Membedakan children dari slot bernama dengan alasan layout.
Menyebut hubungan accessibility yang dipertahankan.
Menyebut satu hal yang sengaja tidak diabstraksikan.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca composition dan form semantics dari docs resmi

Gunakan docs ini untuk menilai API component sebelum menambah abstraction ke Local React App. Fokus pada composition yang jelas dan hubungan form control yang dapat diakses.

React

Passing JSX as Children

Fokus baca

children sebagai nested content
membuat wrapper component tetap fleksibel
kapan composition lebih jelas daripada banyak prop

Abaikan dulu

polymorphic component API

Buka dokumentasi

React

Sharing State Between Components

Fokus baca

parent sebagai pemilik state bersama
coordinating related child components
batas state local dan state yang diangkat

Abaikan dulu

global state library

Buka dokumentasi

React

Thinking in React

Fokus baca

memecah UI menjadi component dengan tanggung jawab jelas
mencari state minimal
menghindari component boundary yang dibuat terlalu cepat

Abaikan dulu

full product architecture

Buka dokumentasi

MDN

label element

Fokus baca

hubungan label dan control
id dan htmlFor
menghindari label yang tidak memberi nama input

Abaikan dulu

custom widget ARIA yang kompleks

Buka dokumentasi

Aksi setelah membaca

Di Local React App, pilih satu area yang memiliki heading, action, body, atau form field berulang. Buat satu Panel atau FormField kecil, tulis API-nya di README, lalu catat alasan mengapa component itu berguna dan bagian yang sengaja kamu biarkan lokal.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Compound components berguna untuk child yang berbagi koordinasi dari parent pattern.
children dan slot bernama membantu layout reusable tanpa boolean prop berlapis.
FormField yang baik menjaga hubungan label, hint, error, dan control.
Abstraction perlu mengurangi aturan berulang serta membuat caller lebih jelas.
Level berikutnya, Next.js App Router, akan membawa pola React ini ke route dan structure aplikasi.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: pattern yang membantu, bukan sekadar terlihat reusable.

Memuat progres Review module