Uji Kompetensi Forms and Composition
Checkpoint kesiapan membangun flow form React kecil dengan controlled input, submit, component composition, dan state boundary.
Yang dicek
- Mengecek controlled input dan submit handler
- Menyusun form, list, dan item component
- Menjelaskan alasan state berada di parent atau child
Isi lesson
6 blok- 1.Checkpoint: apakah form flow kamu sudah bisa dipercaya?Belum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Docs bridge forms dan compositionBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: apakah form flow kamu sudah bisa dipercaya?
WajibUji Kompetensi ini mengecek kemampuan membuat flow kecil berbasis form. Kamu akan memakai controlled input, submit handler, `event.preventDefault()`, list state, composition, dan keputusan sederhana tentang tempat state.
Kamu belum perlu memakai form library, schema validation, server actions, atau multi-step form. Fokusnya adalah flow yang jelas: user mengisi field, submit tidak reload, data masuk ke state, dan UI tersusun dari component yang mudah dibaca.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Forms and Composition
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
Controlled input React biasanya memakai pasangan...
Coding practice
WajibDibuka di workspace khususBangun form-driven component flow
Checkpoint akhir untuk membuat flow notes kecil dengan controlled input, submit, composition, list rendering, dan state placement.
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
Tulis penjelasan singkat tentang flow form yang kamu bangun. Jelaskan field controlled input, apa yang terjadi saat submit, component apa saja yang kamu pisahkan, dan kenapa state utama berada di parent. Gunakan format: - Controlled input: - Submit handler: - Component boundary: - State placement: - Hal yang sengaja belum memakai form library:
Tulis draft dulu sebelum menandai writing practice selesai.
0/220 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibDocs bridge forms dan composition
Baca dokumentasi React resmi untuk memperkuat mental model form, sharing state, dan composition sebelum masuk local React app.
React Learn
Reacting to Input with State
Fokus baca
- controlled input
- state sebagai sumber value
- UI merespons input
Abaikan dulu
- complex form libraries
- server validation
React Learn
Sharing State Between Components
Fokus baca
- lifting state
- shared parent
- data dan handler lewat props
Abaikan dulu
- context
- global state libraries
React Learn
Choosing the State Structure
Fokus baca
- avoid duplicated state
- state minimal
- derived values
Abaikan dulu
- large reducer refactor
- normalization detail
React Learn
Passing Props to a Component
Fokus baca
- props untuk data
- props untuk handler
- component reuse
Abaikan dulu
- advanced TypeScript component API
React Learn
Thinking in React
Fokus baca
- component hierarchy
- minimal state
- where state should live
Abaikan dulu
- full product architecture
- large app state management
Aksi setelah membaca
Buka Reacting to Input with State dan Sharing State Between Components, lalu bandingkan contoh docs dengan form checkpoint kamu.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Controlled input memakai value dari state dan onChange untuk update state.
- Submit handler form memanggil event.preventDefault agar halaman tidak reload.
- Composition memecah form, list, dan item sesuai tanggung jawab.
- State dinaikkan ke parent saat beberapa component perlu berbagi data.
- Berikutnya, Local React App membawa component, state, events, lists, dan forms ke project lokal.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: apakah form flow kamu sudah bisa dipercaya?.