Pelajaran 1Pengendalian borang dan pengesahan (dikawal vs tidak dikawal, pustaka: Formik, React Hook Form, VeeValidate)Laksanakan pengendalian borang dan pengesahan yang teguh. Bandingkan input dikawal dan tidak dikawal, gunakan pustaka seperti Formik, React Hook Form, dan VeeValidate, serta reka bentuk pengesahan, mesej ralat, dan aliran penyerahan untuk borang kompleks.
Strategi input dikawal vs tidak dikawalFormik dan React Hook Form dalam amalanVeeValidate dan corak borang VuePeraturan pengesahan serentak dan tidak serentakMesej ralat, UX, dan kebolehcapaianPelajaran 2Pustaka komponen UI dan amalan kebolehcapaian (Tailwind, Material, Chakra, peranan ARIA, navigasi papan kekunci)Belajar menggunakan pustaka UI moden sambil mengekalkan kebolehcapaian yang kukuh. Teroka Tailwind, Material UI, dan Chakra, kemudian gunakan peranan ARIA, pengurusan fokus, dan corak navigasi papan kekunci untuk membina antara muka inklusif yang sedia pengeluaran.
Sistem reka bentuk dengan Tailwind dan kelas utilitiCorak komponen Material UI dan ChakraHTML semantik dan strategi peranan ARIAPengurusan fokus dan navigasi papan kekunciKontras warna, tema, dan gerakan yang dikurangkanPelajaran 3Memilih rangka kerja frontend dan justifikasi (React, Vue, Svelte) serta pertimbangan ekosistemNilai dan justifikasi pilihan rangka kerja frontend anda. Bandingkan arkitektur React, Vue, dan Svelte, kematangan ekosistem, prestasi, dan lengkung pembelajaran supaya anda boleh memilih dan mempertahankan pilihan terbaik untuk setiap konteks projek.
Konsep teras React, Vue, dan SvelteKematangan ekosistem dan sokongan komunitiPertimbangan prestasi dan saiz bundlePengintegrasian TypeScript dan alatRangka kerja keputusan untuk projek sebenarPelajaran 4Pembinaan, pembundaran, dan pengoptimuman: Webpack/Vite/Rollup, pemisahan kod, tree-shaking, pengendalian asetKuasai alat pembinaan moden untuk frontend yang berprestasi tinggi. Bandingkan Webpack, Vite, dan Rollup, konfigurasikan pemisahan kod dan tree-shaking, serta optimumkan pengendalian aset, pengekasan, dan peta sumber untuk menghantar bundle pengeluaran yang cepat dan boleh dipelihara.
Membandingkan persediaan Webpack, Vite, dan RollupPemisahan kod dan import dinamikTree-shaking dan penghapusan kod matiMengoptimumkan imej, fon, dan aset statikStrategi pengekasan, hash, dan peta sumberPelajaran 5Ujian sisi klien: ujian unit komponen, ujian integrasi, pilihan pustaka ujian dan contohBina strategi ujian sisi klien yang teguh. Belajar ujian unit untuk komponen, ujian integrasi merentasi laluan dan API, serta cara memilih antara Jest, Vitest, Cypress, dan Testing Library untuk mencipta suite ujian yang boleh dipercayai dan boleh dipelihara.
Ujian unit komponen UI secara terasingUjian integrasi untuk aliran dan laluanMenggunakan Testing Library untuk ujian berpusat penggunaMemilih Jest, Vitest, Cypress, atau PlaywrightMocking API dan mengendalikan ujian tidak stabilPelajaran 6Pembangunan tempatan dan konfigurasi persekitaran: pemboleh ubah persekitaran, fail .env, bendera ciri untuk frontendKonfigurasikan persekitaran frontend yang boleh dipercayai untuk persediaan tempatan dan awan. Belajar mengurus pemboleh ubah persekitaran, fail .env, suntikan masa pembinaan, dan bendera ciri supaya anda boleh menukar fungsi dengan selamat merentasi pembangunan, pentas, dan pengeluaran.
Mengurus fail .env dan pemboleh ubah masa pembinaanMemisahkan konfigurasi pembangunan, pentas, dan pengeluaranKonfigurasi masa jalan dan keselamatan persekitaranMelaksanakan bendera ciri frontendPengendalian rahsia dan kesilapan konfigurasiPelajaran 7Struktur projek dan konvensyen folder untuk aplikasi laman tunggal (komponen, laman, perkhidmatan, kaitan)Reka struktur projek yang boleh diskalakan untuk aplikasi laman tunggal. Belajar konvensyen folder untuk komponen, laman, perkhidmatan, dan kaitan, serta cara menyusun utiliti dikongsi, ujian, dan gaya untuk mengekalkan pangkalan kod besar yang boleh dikesan dan dipelihara.
Menyusun komponen, laman, dan susun aturPerkhidmatan, kaitan, dan lapisan akses dataUtiliti, jenis, dan pemalar dikongsiMenyusun ujian dan fail ceritaRefaktoring ke arah sempadan modularPelajaran 8Corak integrasi API: pelanggan REST vs GraphQL, pengendalian ralat, percubaan semula permintaan, had masaLaksanakan corak integrasi API yang teguh pada klien. Bandingkan pelanggan REST dan GraphQL, konfigurasikan Axios atau Fetch, kendalikan ralat dan percubaan semula, serta reka had masa, pembatalan, dan normalisasi untuk lapisan pengambilan data yang cekap.
Mengkonfigurasi pelanggan REST dengan Axios atau FetchMenggunakan pelanggan GraphQL seperti Apollo atau URQLPengendalian ralat global dan mesej penggunaPercubaan semula permintaan, mundur, dan had masaPembatalan, pengawal hentikan, dan pengekasanPelajaran 9Pengesahan pada frontend: menyimpan token, aliran penyegaran, dan pendekatan kuki selamatFahami corak pengesahan frontend yang selamat. Bandingkan localStorage, sessionStorage, dan kuki, reka aliran token penyegaran, dan laksanakan kuki HttpOnly, pertahanan CSRF, dan strategi log keluar yang melindungi pengguna dalam aplikasi sebenar.
Penyimpanan token: localStorage vs kukiMelaksanakan aliran token penyegaran dengan selamatKuki HttpOnly dan perlindungan CSRFMengendalikan log keluar, pencabutan, dan pusinganPengendalian ralat pengesahan dan maklum balas penggunaPelajaran 10Pilihan dan corak pengurusan keadaan (keadaan komponen tempatan, Konteks, Redux/Pinia/MobX, React Query)Bandingkan pilihan pengurusan keadaan untuk frontend kompleks. Teroka keadaan tempatan, Konteks, Redux, Pinia, MobX, dan React Query, serta belajar corak untuk pengekasan, normalisasi, dan mengelakkan semula lukis yang tidak perlu dalam aplikasi besar.
Keadaan komponen tempatan dan corak mengangkatAPI Konteks untuk kebimbangan merentasiReka bentuk stor Redux, Pinia, dan MobXKeadaan pelayan dengan React Query atau SWRPenalaan prestasi dan corak pemilihPelajaran 11Laluan dan laluan dilindungi: laluan sisi klien, pengawal laluan, pemuatan malasBina laluan sisi klien yang boleh dipercayai dengan laluan dilindungi. Belajar konfigurasi laluan, laluan bersarang, pemuatan malas, dan pengawal laluan yang memaksakan pengesahan dan kebenaran sambil mengekalkan navigasi cepat dan boleh dicapai.
Mengkonfigurasi pelayar laluan sisi klien dan laluanLaluan bersarang dan hierarki susun aturMelaksanakan pemuatan malas dan pemisahan kodPengawal laluan berdasarkan pengesahan dan pengalihanMengendalikan laman 404 dan laluan sandaran
