Uji Kompetensi Component Model
Checkpoint kesiapan membaca dan membangun component tree kecil dengan JSX, props, dan children.
Yang dicek
- Mengecek pemahaman component model React
- Membangun component tree kecil dengan props dan children
- Menjelaskan kapan UI perlu dipecah menjadi component
Isi lesson
6 blok- 1.Checkpoint: apakah kamu bisa membaca component tree?Belum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Docs bridge component modelBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: apakah kamu bisa membaca component tree?
WajibUji Kompetensi ini mengecek dasar React pertama: component, JSX, props, children, dan splitting UI. Kamu belum perlu memakai state, event handler, routing, atau effect.
Targetnya sederhana: kamu bisa membaca component function, tahu aturan JSX dasar, mengirim data lewat props, memakai children untuk isi nested, dan memecah UI kecil menjadi bagian yang masuk akal.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Component Model
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 tepat menggambarkan React component?
Coding practice
WajibDibuka di workspace khususBangun component tree kecil
Latihan akhir membangun component tree dengan JSX, props, children, dan component split yang jelas.
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 component tree yang kamu buat. Jelaskan component parent, child component, props yang dikirim, dan bagian mana yang memakai children. Gunakan format: - Parent component: - Child component: - Props yang dikirim: - Children dipakai untuk: - Kenapa UI ini layak dipecah:
Tulis draft dulu sebelum menandai writing practice selesai.
0/180 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibDocs bridge component model
Baca dokumentasi React resmi untuk memperkuat model mental component. Fokus pada konsep awal, bukan hooks atau routing.
React Learn
Your First Component
Fokus baca
- component sebagai UI building block
- nama component diawali huruf besar
- component function mengembalikan JSX
Abaikan dulu
- framework setup
- deep dive lanjutan
- optimasi
React Learn
Writing Markup with JSX
Fokus baca
- aturan JSX dasar
- className
- tag self-closing
Abaikan dulu
- semua detail transform JSX
- tooling internal
React Learn
JavaScript in JSX with Curly Braces
Fokus baca
- kurung kurawal
- variable di JSX
- expression sederhana
Abaikan dulu
- conditional rendering detail
- list rendering detail
React Learn
Passing Props to a Component
Fokus baca
- props sebagai data
- membaca props di child
- children sebagai nested UI
Abaikan dulu
- advanced TypeScript props
- composition pattern lanjutan
Aksi setelah membaca
Buka Your First Component dan Passing Props to a Component, lalu bandingkan contoh docs dengan component tree checkpoint kamu.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- React component adalah function yang mengembalikan JSX.
- JSX punya aturan khusus seperti className, kurung kurawal, dan self-closing tag.
- Props mengirim data ke component.
- Children mengirim nested UI ke wrapper component.
- Berikutnya, State, Events, and Rendering akan membuat component merespons interaksi user.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: apakah kamu bisa membaca component tree?.