React Mastery: Dasar, Rendering & Hooks

Selamat datang di Fase 3, The Modern Stack. Sampai sini kamu sudah bisa membangun halaman dengan HTML, CSS, dan JavaScript murni, termasuk memanipulasi DOM sendiri. Kamu mungkin juga sudah merasakan sakitnya: begitu aplikasi makin besar, kode document.querySelector dan innerHTML bertebaran di mana-mana, data dan tampilan sering tidak sinkron, dan satu perubahan kecil bisa merusak bagian lain. Materi ini memperkenalkan React, library JavaScript paling populer untuk membangun antarmuka (UI), yang dirancang persis untuk menyelesaikan masalah itu.

Di materi 3.1A kamu akan belajar dari nol: kenapa library UI modern lahir, cara membuat proyek React dengan Vite (bukan Create React App yang sudah dinyatakan deprecated oleh tim React pada Februari 2025), menulis JSX, memecah UI jadi komponen, mengalirkan data lewat props, mengelola state dengan useState, merender kondisi dan daftar, menangani side effect dengan useEffect, menyimpan referensi dengan useRef, sampai mengatur state yang rumit dengan useReducer. Semua contoh memakai function component + hooks, gaya modern yang direkomendasikan dokumentasi resmi react.dev. Versi yang dipakai di materi ini: React 19.3.1, Vite 8.3.5, dan create-vite 9.3.1 (dicek dengan npm view saat materi ditulis).