Kursus Developer React

Pelajaran 1 • Kelas dan Prototipe

Memperkenalkan sintaks kelas, pewarisan, dan rantai prototipe. Memberikan konteks untuk memahami komponen React berbasis kelas dan metode siklus hidupnya.

Pelajaran 2 • Promise dan Async/Await

Menjelaskan eksekusi asinkron, perantaian promise, dan sintaks async/await. Mempersiapkan siswa untuk pengambilan data di dalam komponen React.

Pelajaran 3 • Esensi Sintaks ES6

Mencakup let/const, fungsi panah, template literal, dan destructuring. Pola-pola ini muncul di seluruh basis kode React.

Pelajaran 4 • Modul dan Impor/Ekspor

Mengajarkan ekspor bernama dan default, resolusi modul, dan ekspektasi bundler. Secara langsung memungkinkan organisasi file komponen dalam proyek React.

Pelajaran 1 • Menyiapkan Proyek React

Memandu melalui pembuatan kerangka proyek dengan Vite dan Create React App, struktur folder, dan penggunaan server pengembangan. Siswa akan memiliki lingkungan lokal yang berjalan.

Pelajaran 2 • Apa itu React dan Mengapa React

Menjelaskan DOM virtual, UI deklaratif, dan posisi React dalam ekosistem front-end. Menetapkan fondasi konseptual untuk semua pekerjaan React selanjutnya.

Pelajaran 3 • Me-render Daftar dan Kondisional

Mencakup rendering daftar berbasis kunci dan pola rendering kondisional. Ini adalah teknik UI dinamis yang paling umum di React.

Pelajaran 4 • Sintaks dan Aturan JSX

Mencakup transpilasi JSX, penyematan ekspresi, dan aturan spesifik JSX seperti className dan tag yang menutup sendiri. Menghubungkan JSX dengan JavaScript yang dikompilasinya.

Pelajaran 1 • Mengangkat State ke Atas

Menjelaskan berbagi state antar komponen saudara dengan memindahkannya ke induk bersama. Memperkuat prinsip aliran data searah.

Pelajaran 2 • Pembaruan State Immutabel

Mencakup mengapa React memerlukan pembaruan immutabel dan cara menerapkannya pada objek dan array. Mencegah bug umum yang disebabkan oleh mutasi langsung.

Pelajaran 3 • Komponen Formulir Terkontrol

Mengajarkan input terkontrol di mana state React mendorong nilai formulir. Memungkinkan validasi dan penanganan pengiriman formulir yang andal.

Pelajaran 4 • Dasar-dasar Hook useState

Menjelaskan inisialisasi state, fungsi setter, dan pemicu render ulang. useState adalah alat utama untuk interaktivitas lokal dalam komponen fungsional.

Pelajaran 1 • Fungsi Pembersihan

Mengajarkan mengembalikan fungsi pembersihan untuk membatalkan langganan dan pengatur waktu. Mencegah kebocoran memori pada komponen yang berumur panjang.

Pelajaran 2 • Mekanisme Hook useEffect

Mencakup sintaks efek, array dependensi, dan waktu eksekusi. Siswa mendapatkan kendali presisi atas kapan efek berjalan.

Pelajaran 3 • Ikhtisar Siklus Hidup Komponen Kelas

Memetakan componentDidMount, componentDidUpdate, dan componentWillUnmount ke padanan useEffect. Mempersiapkan siswa untuk membaca basis kode lama.

Pelajaran 4 • Memahami Efek Samping

Mendefinisikan efek samping di React dan menjelaskan mengapa efek samping harus diisolasi dari rendering. Memotivasi kebutuhan akan useEffect.

Pelajaran 1 • useMemo dan useCallback

Menjelaskan memoization nilai dan fungsi untuk mencegah perhitungan ulang dan render ulang yang tidak perlu. Memperkenalkan pemikiran optimasi kinerja.

Pelajaran 2 • useContext untuk Data Bersama

Mengajarkan membuat dan mengonsumsi konteks untuk menghindari prop drilling. Terhubung dengan pola state global yang diperkenalkan di bab manajemen state.

Pelajaran 3 • useReducer untuk State Kompleks

Memperkenalkan pola reducer untuk mengelola logika state multi-tindakan. Mempersiapkan siswa untuk pola pikir ala Redux dalam satu komponen.

Pelajaran 4 • useRef dan DOM

Mencakup useRef untuk akses DOM dan mempertahankan nilai yang dapat berubah antar render. Memungkinkan manajemen fokus, animasi, dan integrasi library pihak ketiga.

Pelajaran 1 • Navigasi dan Tautan

Mengajarkan Link, NavLink, dan navigasi terprogram dengan useNavigate. Memungkinkan pola navigasi deklaratif dan imperatif.

Pelajaran 2 • Pengaturan Dasar React Router

Mencakup komponen BrowserRouter, Routes, dan Route untuk mendefinisikan pohon navigasi aplikasi. Menetapkan model routing deklaratif.

Pelajaran 3 • Rute Bersarang dan Tata Letak

Menjelaskan pohon Route bersarang dan komponen Outlet untuk tata letak bersama. Mengurangi duplikasi tata letak di seluruh halaman terkait.

Pelajaran 4 • Rute yang Dilindungi dan Pengaman Auth

Menerapkan pengaman rute yang mengarahkan pengguna yang tidak terautentikasi. Menerapkan pengetahuan konteks dan routing bersama dalam pola yang realistis.

Pelajaran 1 • Dasar-dasar Redux Toolkit

Memperkenalkan store, slices, dan reducer Redux Toolkit sebagai pendekatan Redux modern. Menggantikan pola Redux klasik yang berat boilerplate.

Pelajaran 2 • Memilih Solusi State yang Tepat

Membandingkan state lokal, Context, Redux, dan Zustand berdasarkan kompleksitas dan kasus penggunaan. Membekali siswa untuk membuat keputusan arsitektural pada proyek nyata.

Pelajaran 3 • Context API dalam Skala Besar

Memperluas pola useContext ke state di seluruh aplikasi dengan banyak konteks dan optimasi kinerja. Mencakup kapan Context sudah mencukupi.

Pelajaran 4 • Membaca dan Menulis State Redux

Mencakup hook useSelector dan useDispatch untuk interaksi store di tingkat komponen. Memungkinkan komponen membaca slices dan mengirim aksi.

Pelajaran 1 • Membangun dan Men-deploy Aplikasi React

Memandu melalui build produksi, konfigurasi lingkungan, dan deployment ke platform hosting statis. Melengkapi siklus hidup pengembangan penuh.

Pelajaran 2 • Teknik Optimasi Kinerja

Mencakup React.memo, lazy loading, dan code splitting untuk mengurangi ukuran bundel dan biaya rendering. Secara langsung meningkatkan kinerja yang dirasakan pengguna.

Pelajaran 3 • Menguji Komponen React

Memperkenalkan React Testing Library dan Jest untuk pengujian unit dan integrasi. Mencakup rendering, kueri, dan simulasi interaksi pengguna.

Pelajaran 4 • Batas Kesalahan dan Ketahanan

Mengajarkan batas kesalahan berbasis kelas dan UI fallback untuk mencegah crash aplikasi total. Menambahkan ketahanan produksi ke pohon komponen.