Kursus React Native dan Hooks

Pelajaran 1 • JSX dan Virtual DOM

Menjelaskan kompilasi JSX, rekonsiliasi key prop, dan bagaimana algoritma diffing React meminimalkan pembaruan native. Menghubungkan perilaku virtual DOM dengan performa.

Pelajaran 2 • Pendalaman Komponen Fungsional

Membandingkan komponen kelas dengan komponen fungsional dan menjelaskan mengapa hooks memerlukan komponen fungsional. Membangun model mental untuk fungsi UI tanpa status.

Pelajaran 3 • Tinjauan Sintaks JavaScript Modern

Mencakup destructuring, spread/rest, arrow function, dan async/await seperti yang digunakan di seluruh basis kode React Native. Mengurangi kebingungan sintaks pada contoh hooks selanjutnya.

Pelajaran 1 • Apa Itu React Native

Menjelaskan arsitektur bridge, thread JavaScript, dan sistem modul native. Memposisikan React Native relatif terhadap React web dan pengembangan native.

Pelajaran 2 • Membuat Proyek Pertama Anda

Menggunakan React Native CLI untuk membuat kerangka proyek dan menjelaskan struktur file yang dihasilkan. Menghubungkan tata letak folder dengan pipeline build.

Pelajaran 3 • Komponen Bawaan Inti

Memperkenalkan View, Text, Image, ScrollView, dan TextInput sebagai blok bangunan UI primitif. Mendemonstrasikan bagaimana masing-masing dipetakan ke widget native.

Pelajaran 4 • Menyiapkan Lingkungan Pengembangan

Menginstal Node, Watchman, Xcode, dan Android Studio dengan versi SDK yang benar. Memvalidasi rantai alat dengan menjalankan proyek kosong di kedua platform.

Pelajaran 1 • Mengelola State dengan useState

Memperkenalkan signature useState, inisialisasi state, dan pola fungsi updater. Mencakup jebakan umum seperti stale closure dan pembaruan batch.

Pelajaran 2 • Membangun Aplikasi Counter dan Timer

Menerapkan useState dan useEffect bersama-sama dalam counter praktis dan hitung mundur timer. Memperkuat pembaruan state, interval, dan pembersihan dalam komponen nyata.

Pelajaran 3 • Efek Samping dengan useEffect

Menjelaskan array dependensi, fungsi pembersihan, dan waktu eksekusi relatif terhadap rendering. Mengganti ketiga metode siklus hidup kelas dengan satu hook.

Pelajaran 4 • Mengambil Data Jarak Jauh dengan Hooks

Membangun pola pengambilan data menggunakan useState untuk status data/loading/error dan useEffect untuk panggilan fetch. Memperkenalkan status UI loading dan error.

Pelajaran 1 • Hooks Performa: useMemo dan useCallback

Memoisasi komputasi mahal dengan useMemo dan menstabilkan referensi fungsi dengan useCallback untuk mencegah render ulang anak yang tidak perlu.

Pelajaran 2 • API Imperatif dengan useImperativeHandle

Mengekspos API imperatif yang terkontrol dari komponen anak ke ref induk menggunakan useImperativeHandle dan forwardRef. Berguna untuk komponen input kustom.

Pelajaran 3 • Mereferensikan Nilai dengan useRef

Menggunakan useRef untuk menyimpan nilai yang dapat diubah di seluruh render tanpa memicu render ulang dan untuk mengakses instance komponen native. Membandingkan dengan useState untuk data non-UI.

Pelajaran 4 • State Kompleks dengan useReducer

Mengimplementasikan fungsi reducer dan pola dispatch untuk mesin state multi-aksi. Membandingkan useReducer dengan useState untuk skenario formulir dan keranjang.

Pelajaran 1 • useForm: Hook Manajemen State Formulir

Membangun hook useForm yang mengelola nilai kolom, error validasi, dan status pengiriman. Menggantikan logika formulir yang berulang di beberapa layar.

Pelajaran 2 • Menguji Custom Hooks

Menggunakan React Native Testing Library dan renderHook untuk menguji unit custom hooks secara terisolasi. Mencakup act, async act, dan meniru dependensi eksternal.

Pelajaran 3 • useFetch: Hook Pengambilan Data

Mengekstrak pola fetch-loading-error ke dalam hook useFetch yang dapat digunakan kembali dengan URL dan opsi yang dapat dikonfigurasi. Mendemonstrasikan bagaimana custom hook mengurangi boilerplate komponen.

Pelajaran 4 • useLocalStorage dan useAsyncStorage

Membungkus AsyncStorage dalam hook yang mencerminkan API useState untuk data nilai-kunci persisten. Menangani serialisasi, deserialisasi, dan kasus error.

Pelajaran 1 • Pola Stack Navigator

Membuat navigator stack native dengan transisi push, pop, dan replace. Melewatkan params antar layar dan membacanya dengan useRoute.

Pelajaran 2 • Tab dan Drawer Navigators

Menambahkan navigator tab bawah dan drawer serta menyarangkannya di dalam stack. Menyesuaikan ikon tab dan konten drawer dengan state berbasis hook.

Pelajaran 3 • Alur Autentikasi dengan Navigasi

Mengimplementasikan navigator bersyarat yang beralih antara stack auth dan aplikasi berdasarkan state token yang disimpan dalam konteks. Mendemonstrasikan perutean terproteksi di dunia nyata.

Pelajaran 4 • Hooks Navigasi Mendalam

Menggunakan useNavigation, useRoute, useFocusEffect, dan useIsFocused untuk mengontrol perilaku navigasi dari dalam komponen. Menggantikan prop drilling objek navigasi.

Pelajaran 1 • State Server dengan React Query

Menggunakan hook useQuery dan useMutation React Query untuk mengelola state server, caching, dan pengambilan ulang latar belakang. Menghilangkan manajemen state loading/error manual.

Pelajaran 2 • Integrasi Redux Toolkit

Mengonfigurasi store Redux dengan createSlice, RTK Query untuk pengambilan data, dan pembungkus Provider. Menghubungkan komponen menggunakan useSelector dan useDispatch.

Pelajaran 3 • Pola Context API dalam Skala Besar

Memisahkan konteks menjadi penyedia state dan dispatch untuk mencegah render ulang yang tidak perlu di pohon yang besar. Menggabungkan useReducer dengan konteks untuk pola mirip Redux.

Pelajaran 4 • State Global dengan Zustand

Membuat store Zustand dengan aksi dan pemilih, lalu mengonsumsinya dengan satu panggilan hook. Membandingkan API minimal Zustand dengan boilerplate Konteks.

Pelajaran 1 • Pembuatan Profil dan Diagnostik Performa

Menggunakan Flipper, profiler React DevTools, dan Performance Monitor untuk mengidentifikasi render lambat dan gangguan thread JS. Menetapkan alur kerja optimasi yang mengutamakan pengukuran.

Pelajaran 2 • Mengoptimalkan Daftar dan Gambar

Menerapkan props optimasi FlatList, caching gambar, dan lazy loading untuk menghilangkan gangguan scroll. Mencakup windowSize, initialNumToRender, dan getItemLayout.

Pelajaran 3 • Menguji Komponen dan Hooks

Menulis pengujian unit dan integrasi dengan Jest dan React Native Testing Library, mencakup interaksi pengguna dan perilaku asinkron. Mencapai cakupan yang berarti tanpa menguji detail implementasi.

Pelajaran 4 • Animasi dengan Animated dan Reanimated

Membangun animasi halus menggunakan Animated API dan meningkatkan ke Reanimated 2 untuk animasi thread UI. Mencakup animasi spring, timing, dan berbasis gerakan.