Tahap 7
React: Membangun Antarmuka Pengguna
Deskripsikan tampilan layar untuk sebuah state, dan biarkan React yang mengurus pembaruannya.
Yang akan kamu pelajari
- Memecah desain jadi component dengan props yang jelas
- Menentukan apa yang layak jadi state dan apa yang cukup diturunkan
- Menjelaskan kapan dan kenapa sebuah component re-render
- Memakai effect hanya untuk sinkronisasi nyata dengan dunia luar
- Membangun form terkontrol yang aksesibel
Sebelum mulai
Pelajaran
- 01
Kenapa React ada
Masalah dengan pembaruan DOM manual, dan ide yang menggantikannya.
Baca 20 menit - 02
Component dan JSX
JSX itu cuma pemanggilan function. Begitu kamu melihatnya, aturannya berhenti terasa asal-asalan.
Baca 25 menit - 03
Props: data yang mengalir ke bawah
Input bertype untuk sebuah component, children, dan komposisi alih-alih konfigurasi.
Baca 25 menit - 04
State dengan useState
Memori yang bertahan melewati re-render, dan aturan bahwa pembaruan state tidak langsung terjadi.
Baca 30 menit - 05
Rendering, list, dan key
Bagaimana React menentukan apa yang berubah, dan kenapa key yang salah merusak list-mu.
Baca 28 menit - 06
useEffect — dan kapan justru jangan dipakai
Sebagian besar effect di kode junior seharusnya tidak ada. Pelajari sedikit kasus yang memang perlu.
Baca 32 menit - 07
Nilai turunan, memo, dan ref
Hitung alih-alih menyimpan, cache hanya setelah diukur, dan pakai ref hanya untuk kebutuhan darurat yang nyata.
Baca 28 menit - 08
Berbagi state: context dan reducer
Kapan prop drilling berhenti memadai, dan cara memindahkan state tanpa library tambahan.
Baca 28 menit - 09
Form di React
Input terkontrol, umpan balik validasi, dan submit tanpa menghilangkan pekerjaan pengguna.
Baca 30 menit