Uji Kompetensi Reusable UI States
Checkpoint kesiapan membangun loading, error, empty, success, dan retry UI yang jelas dalam satu React feature kecil.
Yang dicek
- Membedakan seluruh state UI utama pada feature data
- Membuat component loading, error, dan empty yang reusable
- Menerapkan retry flow dan menjelaskan dampaknya bagi user
Isi lesson
6 blok- 1.Checkpoint: user tetap tahu apa yang terjadiBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Perkuat UI state lewat docs resmiBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: user tetap tahu apa yang terjadi
WajibUji Kompetensi ini menggabungkan state yang paling sering muncul di feature berbasis data: loading, error, empty, dan success. Kamu akan memakai component kecil untuk menyampaikan tiap kondisi, lalu memberi retry action pada error state.
Focus checkpoint ini adalah pengalaman user, bukan library data. Gunakan conditional rendering dan state lokal yang jelas. Kamu belum perlu React Query, Suspense, caching, toast system, atau optimistic update.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Reusable UI States
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
Apa yang paling membedakan empty state dari error state?
Coding practice
WajibDibuka di workspace khususBangun reusable UI states checkpoint
Checkpoint membangun feature lesson dengan loading, error, empty, success, retry, dan component state yang reusable.
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
Jelaskan pengalaman user pada feature daftar lesson untuk empat kondisi berikut: - Loading - Error - Empty - Success Lalu jelaskan apa yang terjadi setelah user menekan “Coba lagi” dari error state. Sebutkan satu pilihan accessibility dasar yang kamu gunakan untuk status atau error message.
Tulis draft dulu sebelum menandai writing practice selesai.
0/360 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibPerkuat UI state lewat docs resmi
Baca referensi ini untuk menguji keputusan conditional rendering, struktur state, dan feedback accessibility dasar pada feature kecilmu.
React
Conditional Rendering
Fokus baca
- memilih branch UI berdasarkan state
- menghindari tampilan state yang saling bertabrakan
- membaca conditional rendering secara bertahap
Abaikan dulu
- pola rendering yang sangat abstrak
React
State: A Component's Memory
Fokus baca
- state sebagai memory UI
- event yang mengubah state
- mengapa setiap state UI membutuhkan value yang jelas
Abaikan dulu
- optimasi state tingkat lanjut
React
Choosing the State Structure
Fokus baca
- memilih status UI yang cukup jelas
- menghindari state yang bertentangan
- menjaga satu sumber kebenaran untuk feature kecil
Abaikan dulu
- arsitektur state application skala besar
MDN Web Docs
ARIA: aria-live attribute
Fokus baca
- perbedaan polite dan assertive
- status yang berubah di halaman
- menghindari pengumuman yang berlebihan
Abaikan dulu
- implementasi live region yang kompleks
Aksi setelah membaca
Di Local React App kamu, pilih satu daftar atau panel. Tulis empat branch yang akan ditampilkan untuk loading, error, empty, dan success. Tambahkan satu retry action hanya untuk kegagalan yang memang bisa dicoba ulang.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Loading menjelaskan proses masih berjalan, sedangkan error menjelaskan proses gagal.
- Empty state memberi arah saat proses berhasil tetapi tidak ada data.
- Success menampilkan content setelah state lain tidak lagi aktif.
- Retry memindahkan UI dari error ke loading lalu hasil baru.
- Kamu siap masuk ke React Advanced dengan dasar UI yang lebih resilient dan mudah dipahami user.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: user tetap tahu apa yang terjadi.