Uji Kompetensi State, Events, and Rendering
Checkpoint kesiapan membangun UI React kecil dengan state, event handler, conditional rendering, list, keys, dan derived display.
Yang dicek
- Mengecek pemahaman state dan event handler React
- Merender conditional UI dan list dengan key
- Menghitung display dari state yang sudah ada tanpa duplicate state
Isi lesson
6 blok- 1.Checkpoint: apakah UI kamu bisa merespons interaksi?Belum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Docs bridge state dan renderingBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: apakah UI kamu bisa merespons interaksi?
WajibUji Kompetensi ini mengecek dasar interaksi React. Kamu akan memakai `useState`, event handler, conditional rendering, list rendering, key, dan derived display dalam satu konteks kecil.
Kamu belum perlu memakai `useEffect`, data fetching, reducer, context, atau library state. Fokusnya adalah UI yang berubah karena state dan tetap mudah dibaca.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi State, Events, and Rendering
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 fungsi utama `useState` di React?
Coding practice
WajibDibuka di workspace khususBangun interactive list checkpoint
Latihan akhir membuat list UI kecil dengan filter state, event handler, key, dan derived display.
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 UI interaktif yang kamu bangun. Jelaskan state apa yang disimpan, event apa yang mengubah state, list apa yang dirender, dan display apa yang dihitung dari state. Gunakan format: - State yang disimpan: - Event handler: - List dan key: - Derived display: - Hal yang sengaja belum memakai useEffect:
Tulis draft dulu sebelum menandai writing practice selesai.
0/200 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibDocs bridge state dan rendering
Baca dokumentasi React resmi untuk memperkuat dasar interaksi. Fokus pada state, event, conditional rendering, list, dan struktur state.
React Learn
State: A Component's Memory
Fokus baca
- useState
- state sebagai memory component
- setter function
Abaikan dulu
- useReducer
- state management library
- performance optimization
React Learn
Responding to Events
Fokus baca
- event handler
- onClick
- mengirim function ke event
Abaikan dulu
- event propagation detail
- advanced event patterns
React Learn
Conditional Rendering
Fokus baca
- branch UI
- ternary
- conditional return
Abaikan dulu
- advanced composition pattern
React Learn
Rendering Lists
Fokus baca
- map
- key
- stable id
Abaikan dulu
- complex list virtualization
- performance tuning
React Learn
Choosing the State Structure
Fokus baca
- avoid redundant state
- avoid duplicated state
- derive values when possible
Abaikan dulu
- deep state normalization
- reducer refactor
Aksi setelah membaca
Buka State: A Component's Memory dan Rendering Lists, lalu bandingkan contoh docs dengan checkpoint list UI kamu.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- State menyimpan value yang berubah dan memengaruhi render.
- Event handler mengubah state saat user berinteraksi.
- Conditional rendering menampilkan UI berbeda berdasarkan state.
- List rendering memakai map dan key stabil.
- Berikutnya, Forms and Composition akan memakai state dan event untuk controlled input dan form submit.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: apakah UI kamu bisa merespons interaksi?.