Kursus Frontend Development dengan React

Pelajaran 1 • Esensi JavaScript untuk React

Mengulas sintaks ES6+ yang diperlukan sepanjang kursus: fungsi panah, destructuring, modul, dan promise. Mencegah kebingungan sintaks dalam kode React selanjutnya.

Pelajaran 2 • Menyiapkan Lingkungan Pengembangan

Menginstal Node.js, npm, dan VS Code, kemudian membuat kerangka proyek dengan Vite. Siswa mengakhiri bagian ini dengan aplikasi React yang berjalan di localhost.

Pelajaran 3 • Cara Peramban Merender Halaman Web

Mencakup DOM, CSSOM, dan pipeline render mulai dari parsing HTML hingga paint. Membangun model peramban yang menjelaskan mengapa DOM virtual React itu penting.

Pelajaran 4 • Posisi React dalam Ekosistem

Memposisikan React sebagai library UI, bukan framework lengkap, dan membedakannya dengan Angular serta Vue. Memperjelas apa yang dipecahkan oleh React dan alat pendamping apa yang mengisi celahnya.

Pelajaran 1 • Pola Komposisi Komponen

Memperkenalkan props children, komposisi gaya-slot, dan komponen pembungkus. Mempersiapkan siswa untuk membangun struktur UI yang fleksibel dan dapat digunakan kembali di bab-bab selanjutnya.

Pelajaran 2 • Merender Daftar dan Kunci (Keys)

Menggunakan Array.map untuk merender daftar dinamis dan menjelaskan mengapa React memerlukan props key yang stabil. Secara langsung menerapkan ekspresi JSX dan props dari bagian sebelumnya.

Pelajaran 3 • Menulis dan Memahami JSX

Mengajarkan JSX sebagai gula sintaks (syntactic sugar) di atas React.createElement dan mencakup aturan serta keterbatasannya. Mendasari siswa dalam apa yang dikompilasi oleh JSX sebelum mereka menulis komponen.

Pelajaran 4 • Komponen Fungsional

Mendefinisikan komponen fungsional sebagai fungsi murni yang mengembalikan JSX dan mencakup penamaan, pola ekspor, serta konvensi file. Membentuk unit atomik untuk semua bab selanjutnya.

Pelajaran 1 • useRef untuk DOM dan Nilai yang Dapat Berubah (Mutable)

Mendemonstrasikan useRef untuk akses DOM langsung dan untuk mempertahankan nilai yang dapat berubah antar render tanpa memicu render ulang. Melengkapi useState untuk state non-visual.

Pelajaran 2 • Menangani Peristiwa Pengguna (User Events)

Mencakup peristiwa sintetis, pola event handler, dan mencegah perilaku bawaan peramban. Dikombinasikan dengan useState untuk menghasilkan komponen formulir dan tombol yang interaktif.

Pelajaran 3 • Memperkenalkan useState

Menjelaskan state sebagai data yang memicu render ulang dan mendemonstrasikan useState untuk nilai primitif dan objek. Menghubungkan perubahan state dengan proses rekonsiliasi dari Bab 1.

Pelajaran 4 • Efek Samping dengan useEffect

Mengajarkan useEffect untuk pengambilan data, langganan (subscriptions), dan manipulasi DOM setelah render. Mencakup array dependensi dan fungsi pembersihan untuk mencegah kebocoran memori.

Pelajaran 1 • Gaya Inline dan Objek Gaya

Menerapkan objek gaya JavaScript untuk penataan gaya dinamis berbasis props dan menjelaskan nama properti camelCase. Menyoroti pertukaran kinerja vs. pendekatan berbasis kelas.

Pelajaran 2 • CSS-in-JS dengan Styled Components

Membuat komponen bergaya (styled components) menggunakan tagged template literals dan melewatkan props untuk gaya dinamis. Membandingkan CSS-in-JS dengan CSS Modules untuk kesesuaian tim dan proyek.

Pelajaran 3 • CSS Utilitas-Pertama dengan Tailwind

Mengintegrasikan Tailwind CSS ke dalam proyek Vite-React dan menerapkan kelas utilitas langsung di JSX. Mencakup prefiks responsif dan penerapan kelas bersyarat.

Pelajaran 4 • CSS Biasa dan Gaya Global

Mengimpor stylesheet global dan menjelaskan benturan nama kelas di aplikasi besar. Memotivasi solusi penataan gaya dengan cakupan (scoped) yang diperkenalkan di bagian selanjutnya.

Pelajaran 1 • Rute Dinamis dan Parameter URL

Mendefinisikan segmen rute berparameter dan membacanya dengan useParams. Memungkinkan halaman detail yang digerakkan oleh ID data, sebuah pola yang digunakan di sebagian besar aplikasi nyata.

Pelajaran 2 • Rute dan Tata Letak Bersarang

Menggunakan elemen Route bersarang dan komponen Outlet untuk berbagi tata letak persisten di seluruh rute anak. Mengurangi duplikasi tata letak dalam aplikasi multi-bagian.

Pelajaran 3 • Menyiapkan React Router v6

Menginstal React Router, membungkus aplikasi di BrowserRouter, dan mendefinisikan rute dengan komponen Routes dan Route. Menghasilkan contoh navigasi dua halaman yang berfungsi.

Pelajaran 4 • Rute yang Dilindungi (Protected Routes) dan Pengaman Navigasi

Membangun komponen pembungkus yang mengarahkan pengguna yang tidak terautentikasi menggunakan Navigate. Memperkenalkan state autentikasi sebagai masalah routing tanpa mengimplementasikan sistem auth yang lengkap.

Pelajaran 1 • Pengenalan Library State Eksternal

Meninjau Zustand dan Redux Toolkit sebagai alternatif Context untuk aplikasi besar. Mencakup kapan state bawaan React tidak mencukupi dan bagaimana penyimpanan (store) eksternal berbeda.

Pelajaran 2 • State Kompleks dengan useReducer

Memodelkan transisi state sebagai fungsi peredam (reducer) murni dan mengirimkan aksi yang diketik. Berpasangan dengan Context untuk membangun pola state global yang ringan.

Pelajaran 3 • React Context API

Membuat konteks, memberikan nilai di akar pohon, dan mengonsumsinya dengan useContext. Mencakup pemisahan konteks untuk mencegah render ulang yang tidak perlu.

Pelajaran 4 • Membangun Custom Hooks

Mengekstrak logika stateful yang dapat digunakan kembali ke dalam custom hooks dengan awalan use. Mendemonstrasikan hooks untuk pengambilan data, penanganan formulir, dan sinkronisasi penyimpanan lokal.

Pelajaran 1 • Paginasi dan Gulir Tak Terbatas (Infinite Scroll)

Mengimplementasikan pemuatan data berbasis halaman dan kursor menggunakan useInfiniteQuery dari React Query. Mencakup pola UI untuk tombol muat-lebih banyak dan pengambilan yang dipicu gulir.

Pelajaran 2 • Mengambil Data dengan useEffect dan Fetch API

Mengimplementasikan pola fetch-on-mount di dalam useEffect dan mengelola status pemuatan serta kesalahan dengan useState. Menetapkan dasar sebelum memperkenalkan abstraksi.

Pelajaran 3 • Axios untuk Permintaan HTTP

Mengganti fetch dengan Axios untuk sintaks yang lebih bersih, parsing JSON otomatis, dan penyadap (interceptors). Mencakup pembuatan instance Axios dengan URL dasar dan header default.

Pelajaran 4 • Pembaruan Optimis (Optimistic Updates) dan Pemulihan Kesalahan

Memperbarui UI sebelum konfirmasi server dan memutar balik (rollback) saat kegagalan menggunakan callback mutasi React Query. Meningkatkan persepsi kinerja untuk fitur yang banyak melakukan penulisan.

Pelajaran 1 • Pemisahan Kode (Code Splitting) dan Pemuatan Lambat (Lazy Loading)

Memisahkan bundel berdasarkan rute dan komponen menggunakan React.lazy dan Suspense. Mengurangi waktu muat awal dengan menunda JavaScript yang tidak kritis.

Pelajaran 2 • Mengidentifikasi Hambatan Kinerja

Menggunakan React DevTools Profiler dan alat kinerja peramban untuk menemukan render ulang yang tidak perlu dan komponen lambat. Menetapkan alur kerja optimasi dengan pengukuran terlebih dahulu.

Pelajaran 3 • Build Produksi dan Deployment

Menjalankan build produksi Vite, menganalisis keluaran, dan men-deploy ke platform hosting statis. Mencakup variabel lingkungan dan konfigurasi waktu build.

Pelajaran 4 • Callback Stabil dengan useCallback

Menstabilkan referensi fungsi yang dilewatkan sebagai props menggunakan useCallback untuk mencegah render ulang anak. Berpasangan dengan React.memo untuk melengkapi perangkat memoization.