Pelajaran 1Penanganan Formulir dan Validasi (controlled vs uncontrolled, library: Formik, React Hook Form, VeeValidate)Implementasikan penanganan formulir dan validasi yang kuat. Bandingkan input controlled dan uncontrolled, gunakan library seperti Formik, React Hook Form, dan VeeValidate, serta rancang validasi, pesan error, dan alur pengiriman untuk formulir kompleks.
Strategi input controlled vs uncontrolledFormik dan React Hook Form dalam praktikVeeValidate dan pola formulir VueAturan validasi sinkron dan asinkronPesan error, UX, dan aksesibilitasPelajaran 2Library Komponen UI dan Praktik Aksesibilitas (Tailwind, Material, Chakra, peran ARIA, navigasi keyboard)Pelajari penggunaan library UI modern sambil mempertahankan aksesibilitas yang kuat. Eksplorasi Tailwind, Material UI, dan Chakra, lalu terapkan peran ARIA, manajemen fokus, dan pola navigasi keyboard untuk membangun antarmuka inklusif yang siap produksi.
Sistem desain dengan Tailwind dan kelas utilitasPola komponen Material UI dan ChakraStrategi HTML semantik dan peran ARIAManajemen fokus dan navigasi keyboardKontras warna, tema, dan gerakan tereduksiPelajaran 3Memilih Framework Frontend dan Justifikasi (React, Vue, Svelte) beserta Tradeoff EkosistemEvaluasi dan justifikasi pilihan framework frontend Anda. Bandingkan arsitektur React, Vue, dan Svelte, kematangan ekosistem, performa, dan kurva belajar agar dapat memilih dan mempertahankan opsi terbaik untuk setiap konteks proyek.
Konsep inti React, Vue, dan SvelteKematangan ekosistem dan dukungan komunitasTradeoff performa dan ukuran bundleIntegrasi TypeScript dan toolingKerangka keputusan untuk proyek nyataPelajaran 4Build, Bundling, dan Optimasi: Webpack/Vite/Rollup, code splitting, tree-shaking, penanganan asetKuasai tooling build modern untuk frontend berperforma tinggi. Bandingkan Webpack, Vite, dan Rollup, konfigurasikan code splitting dan tree-shaking, serta optimalkan penanganan aset, caching, dan source map untuk menghasilkan bundle produksi yang cepat dan mudah dipelihara.
Membandingkan setup Webpack, Vite, dan RollupCode splitting dan dynamic importsTree-shaking dan eliminasi kode matiOptimasi gambar, font, dan aset statisStrategi caching, hash, dan source mapPelajaran 5Testing Client-side: unit testing komponen, integration test, pilihan testing library dan contohKembangkan strategi testing client-side yang kuat. Pelajari unit testing untuk komponen, integration test lintas rute dan API, serta cara memilih antara Jest, Vitest, Cypress, dan Testing Library untuk membuat suite test yang andal dan mudah dipelihara.
Unit testing komponen UI secara terisolasiIntegration test untuk alur dan routingMenggunakan Testing Library untuk test berorientasi penggunaMemilih Jest, Vitest, Cypress, atau PlaywrightMocking API dan menangani test yang tidak stabilPelajaran 6Konfigurasi Dev Lokal dan Lingkungan: env vars, file .env, feature flags untuk frontendKonfigurasikan lingkungan frontend yang andal untuk setup lokal dan cloud. Pelajari pengelolaan variabel lingkungan, file .env, injeksi waktu build, dan feature flags agar dapat mengaktifkan/menonaktifkan fungsionalitas dengan aman lintas development, staging, dan produksi.
Mengelola file .env dan variabel waktu buildMemisahkan konfigurasi dev, staging, dan produksiKonfigurasi runtime dan keamanan lingkunganMengimplementasikan feature flags frontendPenanganan rahasia dan jebakan konfigurasiPelajaran 7Struktur Proyek dan Konvensi Folder untuk Single-Page Apps (komponen, halaman, service, hooks)Rancang struktur proyek yang skalabel untuk single-page apps. Pelajari konvensi folder untuk komponen, halaman, service, dan hooks, serta cara mengorganisir utilitas bersama, test, dan style agar codebase besar tetap mudah ditemukan dan dipelihara.
Mengorganisir komponen, halaman, dan layoutService, hooks, dan lapisan akses dataUtilitas bersama, tipe, dan konstantaStruktur test dan file storyRefactoring menuju batas modularPelajaran 8Pola Integrasi API: REST vs GraphQL client, penanganan error, retry request, timeoutImplementasikan pola integrasi API yang kuat di sisi client. Bandingkan client REST dan GraphQL, konfigurasikan Axios atau Fetch, tangani error dan retry, serta rancang timeout, pembatalan, dan normalisasi untuk lapisan pengambilan data yang tangguh.
Mengonfigurasi client REST dengan Axios atau FetchMenggunakan client GraphQL seperti Apollo atau URQLPenanganan error global dan pesan penggunaRetry request, backoff, dan timeoutPembatalan, abort controller, dan cachingPelajaran 9Autentikasi di Frontend: menyimpan token, alur refresh, pendekatan cookie amanPahami pola autentikasi frontend yang aman. Bandingkan localStorage, sessionStorage, dan cookies, rancang alur refresh token, serta implementasikan cookie HttpOnly, pertahanan CSRF, dan strategi logout yang melindungi pengguna dalam aplikasi nyata.
Penyimpanan token: localStorage vs cookiesMengimplementasikan alur refresh token dengan amanCookie HttpOnly dan proteksi CSRFPenanganan logout, pencabutan, dan rotasiPenanganan error autentikasi dan umpan balik penggunaPelajaran 10Opsi dan Pola Manajemen State (state komponen lokal, Context, Redux/Pinia/MobX, React Query)Bandingkan opsi manajemen state untuk frontend kompleks. Eksplorasi state lokal, Context, Redux, Pinia, MobX, dan React Query, serta pelajari pola untuk caching, normalisasi, dan menghindari re-render yang tidak perlu dalam aplikasi besar.
State komponen lokal dan pola liftingContext API untuk concern lintas komponenDesain store Redux, Pinia, dan MobXState server dengan React Query atau SWRPenalaan performa dan pola selectorPelajaran 11Routing dan Protected Routes: routing client-side, route guards, lazy loadingBangun routing client-side yang andal dengan protected routes. Pelajari konfigurasi rute, rute bersarang, lazy loading, dan route guards yang menegakkan autentikasi dan otorisasi sambil menjaga navigasi tetap cepat dan dapat diakses.
Mengonfigurasi router dan rute client-sideRute bersarang dan hierarki layoutMengimplementasikan lazy loading dan code splittingRoute guards berbasis autentikasi dan redirectPenanganan halaman 404 dan rute fallback
