Uji Kompetensi React Hook Form and Zod
Memeriksa readiness untuk form terketik dengan registration, schema resolver, field errors, submit state, dan schema reuse yang tidak menduplikasi aturan.
Yang dicek
- Memilih tanggung jawab React Hook Form, Zod, dan resolver
- Menyusun field error serta submit state yang jelas
- Menggunakan schema-derived type di beberapa boundary
- Menjelaskan validation client dan server sebagai lapisan berbeda
Isi lesson
7 blok- 1.Checkpoint: form yang baik memberi arah sebelum dan sesudah submitBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Self-review form pada project lokalBelum selesaiWajib
- 5.Writing practiceBelum selesaiWajib
- 6.Baca docs untuk satu form yang sedang kamu perbaikiBelum selesaiWajib
- 7.RingkasanBelum selesaiWajib
Checkpoint: form yang baik memberi arah sebelum dan sesudah submit
WajibReact Hook Form mendaftarkan field dan menyimpan form state. Zod mendefinisikan aturan data runtime. Resolver menerjemahkan schema ke error per field. UI menampilkan error dekat input dan memberi pending, success, atau failure state. Schema serta type dipusatkan supaya aturan tidak menyebar.
Assessment ini tidak menginstal package, menjalankan resolver, mengirim request, atau memeriksa app lokal. Auto-validation hanya membaca struktur TSX. Gunakan checkpoint untuk memutuskan apakah kamu siap meng-upgrade satu form pada Local App, lalu uji keyboard, invalid input, valid submit, dan hasil data nyata sebelum menandai pekerjaan lokal selesai.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi React Hook Form and Zod
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 8
Target lulus: 70
Apa tanggung jawab utama React Hook Form?
Coding practice
WajibDibuka di workspace khususBuild validated profile form checkpoint
Lengkapi checkpoint form profile yang menyatukan schema, resolver, error email, dan pending button tanpa mengklaim runtime sudah berjalan.
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.
Self-review form pada project lokal
WajibPeriksa secara manual ketika meng-upgrade satu form pada project lokal:
- react-hook-form, zod, dan @hookform/resolvers muncul di package.json.
- Schema berada pada module domain yang jelas dan type diambil lewat z.infer.
- useForm memakai zodResolver untuk schema yang tepat.
- Label, input, dan pesan error dapat dipahami saat diuji keyboard.
- Submit button menunjukkan pending state dan tidak dapat diklik berulang.
- Success serta failure memberi feedback yang dapat ditindaklanjuti.
- Server/data boundary memvalidasi data penting lagi serta memeriksa identity bila data user-owned.
- README atau implementation note menjelaskan schema tanpa credential atau data user nyata.
FluentStack tidak dapat melihat dependency, source code, browser, atau request pada projectmu. Tandai checklist berdasarkan pengujian nyata, bukan karena daftar sudah dibaca.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Tulis implementation note 120-180 kata untuk rekan developer tentang satu form profile. Jelaskan field yang didaftarkan, schema yang dipakai, bagaimana resolver menghasilkan field errors, pending/success/error state, lokasi type yang diturunkan dari schema, dan satu validation yang tetap dilakukan server-side. Jangan sertakan credential atau data user nyata.
Tulis draft dulu sebelum menandai writing practice selesai.
0/80 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca docs untuk satu form yang sedang kamu perbaiki
Buka source resmi ini ketika menerapkan form lokal. Fokus pada registration, resolver, errors, submit, dan schema sederhana. Jangan langsung melompat ke dynamic field arrays, wizard form, custom validation pipeline, atau server action yang belum dibutuhkan.
React Hook Form Docs
Getting Started
Fokus baca
- useForm
- register
- handleSubmit
Abaikan dulu
- Controller
- dynamic field arrays
- advanced configuration
React Hook Form Docs
register
Fokus baca
- nama field
- menghubungkan input
- option sederhana
Abaikan dulu
- custom ref integration
- nested field path kompleks
React Hook Form Docs
formState
Fokus baca
- errors
- isSubmitting
- status form UI
Abaikan dulu
- semua state flag
- performance tuning mendalam
React Hook Form Resolvers
Zod resolver quickstart
Fokus baca
- install resolver
- zodResolver(schema)
- schema type inference
Abaikan dulu
- resolver selain Zod
- advanced resolver option
Zod Docs
Basic usage
Fokus baca
- object schema
- safeParse
- z.infer
Abaikan dulu
- transform
- async refinement
- schema composition kompleks
Aksi setelah membaca
Pilih satu form profile atau settings pada Local App. Tambahkan schema, resolver, dua field error, pending submit, serta implementation note. Jalankan app, uji invalid dan valid input dengan keyboard, lalu tulis hasil tanpa credential atau data user nyata.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- React Hook Form mengelola registration, submit flow, dan form state.
- Zod schema memberi aturan runtime dan z.infer memberi type yang mengikuti schema.
- Resolver, field errors, serta submit state membuat form memberi feedback jelas.
- Client validation adalah lapisan UX; server/data boundary tetap memvalidasi serta mengotorisasi input penting.
- Berikutnya, kamu akan memperdalam Validation UX and Accessible Errors agar form juga nyaman digunakan semua user.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: form yang baik memberi arah sebelum dan sesudah submit.