← Semua track
⚛️

React

Komponen, hooks, state management, dan pola yang dipakai di dunia kerja.

±80 jam · 0/78 selesai (0%)

💡 Saran (bukan syarat): sebaiknya selesaikan dulu JavaScript, TypeScript. Tapi semua materi tetap terbuka — kamu yang menentukan.

Modul 1: Komponen & JSX

Mental model React: UI = fungsi dari data. Semua dimulai dari sini.

7 bab dalam modul ini
  1. 1.1Kenapa React ada: masalah DOM manual di aplikasi besar
  2. 1.2Komponen = fungsi yang mengembalikan JSX
  3. 1.3Aturan JSX: satu root, className, ekspresi {}
  4. 1.4Render kondisional: &&, ternary, early return
  5. 1.5Render list dengan map & kenapa key penting
  6. 1.6Setup proyek dengan Vite
  7. 1.7Struktur file komponen yang rapi

Modul 2: Props & Komposisi

Data mengalir ke bawah — dan cara menyusun komponen seperti LEGO.

6 bab dalam modul ini
  1. 2.1Props: mengoper data & mengetik props dengan TS
  2. 2.2children — komponen pembungkus
  3. 2.3Komposisi vs konfigurasi: banyak props kecil vs satu props objek
  4. 2.4Lifting state up (pengantar)
  5. 2.5Default props & destructuring pattern
  6. 2.6Memecah UI jadi pohon komponen (latihan dari mockup)

Modul 3: State & Event

useState: satu-satunya cara React tahu harus menggambar ulang.

6 bab dalam modul ini
  1. 3.1useState: nilai, setter, dan re-render
  2. 3.2Event handler: onClick, onChange, onSubmit
  3. 3.3State = snapshot — kenapa setCount(count+1) dua kali tidak +2
  4. 3.4Updater function (prev => ...)
  5. 3.5State object & array: update secara immutable
  6. 3.6Kesalahan umum: mutasi langsung, state turunan yang tidak perlu

Modul 4: Form & List Interaktif

Pola CRUD di memori: dasar dari 80% UI aplikasi bisnis.

6 bab dalam modul ini
  1. 4.1Controlled input: value + onChange
  2. 4.2Form multi-field dengan satu state object
  3. 4.3Validasi sederhana & pesan error
  4. 4.4Menambah, mengedit, menghapus item list
  5. 4.5Filter & search di client
  6. 4.6Checkbox, radio, select dalam React

Modul 5: useEffect & Lifecycle

Sinkronisasi dengan dunia luar — dan modul yang paling banyak salah paham.

6 bab dalam modul ini
  1. 5.1Kapan effect dibutuhkan (lebih jarang dari dugaanmu)
  2. 5.2Dependency array: [], [dep], tanpa array
  3. 5.3Cleanup function: subscription, timer, abort
  4. 5.4Fetch dalam effect + race condition & AbortController
  5. 5.5StrictMode double-render: kenapa dan untuk apa
  6. 5.6'You might not need an effect' — pola yang harusnya bukan effect

Modul 6: Custom Hooks

Mengekstrak logika agar bisa dipakai ulang — tanda developer React yang matang.

5 bab dalam modul ini
  1. 6.1Aturan hooks & kenapa ada
  2. 6.2Membuat useLocalStorage, useDebounce, useFetch
  3. 6.3useRef: nilai persist tanpa render & akses DOM
  4. 6.4useMemo & useCallback — dan kapan itu optimasi prematur
  5. 6.5Membaca hooks library orang lain

Modul 7: Context & State Global

Berbagi data tanpa prop drilling — dengan takaran yang tepat.

6 bab dalam modul ini
  1. 7.1Prop drilling: masalah yang sebenarnya
  2. 7.2createContext, Provider, useContext
  3. 7.3Pola context + reducer (useReducer)
  4. 7.4Context untuk theme, auth, bahasa
  5. 7.5Perangkap performa context & cara membaginya
  6. 7.6Zustand: state global ringan yang dipakai industri

Modul 8: Data Fetching & Async UI

Pola loading/error/empty yang benar — pembeda UI amatir dan profesional.

6 bab dalam modul ini
  1. 8.1Tiga state wajib: loading, error, data (plus empty)
  2. 8.2Pola fetch-on-render & masalahnya
  3. 8.3TanStack Query: cache, refetch, invalidation
  4. 8.4Mutasi data & optimistic update
  5. 8.5Pagination & infinite scroll
  6. 8.6Menangani auth token di request

Modul 9: React Router

Aplikasi multi-halaman di satu page: navigasi, parameter, dan nested route.

6 bab dalam modul ini
  1. 9.1Route, Link, dan NavLink
  2. 9.2Route parameter (useParams) & query string
  3. 9.3Nested route & layout route
  4. 9.4Programmatic navigation (useNavigate)
  5. 9.5Halaman 404 & route guard sederhana
  6. 9.6Lazy loading route

Modul 10: Testing Komponen

React Testing Library: menguji seperti user memakai, bukan implementasi.

6 bab dalam modul ini
  1. 10.1Filosofi RTL: query by role, bukan by class
  2. 10.2render, screen, dan matcher jest-dom
  3. 10.3Simulasi interaksi dengan userEvent
  4. 10.4Menguji form: isi, submit, assert error
  5. 10.5Mock fetch/API di test
  6. 10.6Test apa yang layak ditulis (dan yang tidak)

Modul 11: Pola Dunia Kerja

Yang tidak diajarkan tutorial: struktur proyek, konvensi tim, dan membaca codebase orang.

7 bab dalam modul ini
  1. 11.1Struktur folder: by-feature vs by-type
  2. 11.2Komponen presentational vs container (dan evolusinya)
  3. 11.3Error boundary & fallback UI
  4. 11.4Environment variable & konfigurasi
  5. 11.5Membaca codebase React yang sudah ada — strategi orientasi
  6. 11.6Code review checklist untuk PR React
  7. 11.7Aksesibilitas di React: focus, label, aria