Somo 1Kushughulikia fomu na uthibitisho (inayodhibitiwa dhidi ya isiyodhibitiwa, maktaba: Formik, React Hook Form, VeeValidate)Tekeleza kushughulikia fomu na uthibitisho thabiti. Linganisha inpoti zinazodhibitiwa na zisizodhibitiwa, tumia maktaba kama Formik, React Hook Form, na VeeValidate, na ubuni uthibitisho, ujumbe wa makosa, na mtiririko wa kuwasilisha kwa fomu ngumu.
Mkakati wa inpoti inayodhibitiwa dhidi ya isiyodhibitiwaFormik na React Hook Form katika mazoeziVeeValidate na mifumo ya fomu ya VueSheria za uthibitisho la wakati halisi na la polepoleUjumbe wa makosa, UX, na upatikanajiSomo 2Maktaba za vipengele vya UI na mazoea ya upatikanaji (Tailwind, Material, Chakra, majukumu ya ARIA, urambazaji wa kibodi)Jifunze kutumia maktaba za kisasa za UI huku ukidumisha upatikanaji wenye nguvu. Chunguza Tailwind, Material UI, na Chakra, kisha tumia majukumu ya ARIA, usimamizi wa umakini, na mifumo ya urambazaji wa kibodi kujenga miingiliano inayofaa na tayari kwa uzalishaji.
Mifumo ya kubuni na Tailwind na vipengele vya matumiziMifumo ya vipengele vya Material UI na ChakraHTML ya kimantiki na mkakati wa majukumu ya ARIAUsimamizi wa umakini na urambazaji wa kibodiTofauti ya rangi, theming, na mwendo mdogoSomo 3Kuchagua framework ya frontend na sababu (React, Vue, Svelte) na maubadilifu ya mfumo ikolojiaTathmini na utete kwa chaguo lako la framework ya frontend. Linganisha miundo ya React, Vue, na Svelte, kukomaa kwa mfumo ikolojia, utendaji, na mikwaruza ya kujifunza ili uchague na utete chaguo bora kwa kila muktadha wa mradi.
Dhana za msingi za React, Vue, na SvelteKukomaa kwa mfumo ikolojia na msaada wa jamiiMaubadilifu ya utendaji na ukubwa wa bundleUunganishaji wa TypeScript na zanaMifumo ya maamuzi kwa miradi halisiSomo 4Build, bundling, na uboreshaaji: Webpack/Vite/Rollup, ugawaji wa code, tree-shaking, kushughulikia maliJifunze zana za kisasa za kujenga kwa frontend zenye utendaji bora. Linganisha Webpack, Vite, na Rollup, sanidi ugawaji wa code na tree-shaking, na uboreshe kushughulikia mali, kache, na ramani za chanzo ili kutoa bundles za uzalishaji zenye kasi na zenye kudumisha.
Kulinganisha usanidi wa Webpack, Vite, na RollupUgawaji wa code na imports za nguvuTree-shaking na kuondoa code isiyohitajikaKuboresha picha, fonti, na mali za tuliMkakati wa kache, hashes, na ramani za chanzoSomo 5Majaribio ya upande wa mteja: majaribio ya kitengo kwa vipengele, majaribio ya kuunganisha, chaguo za maktaba za majaribio na mifanoBuni mkakati thabiti wa majaribio ya upande wa mteja. Jifunze majaribio ya kitengo kwa vipengele, majaribio ya kuunganisha kwenye njia na APIs, na jinsi ya kuchagua kati ya Jest, Vitest, Cypress, na Testing Library ili kuunda jamii za majaribio zenye kuaminika na zenye kudumisha.
Majaribio ya kitengo ya vipengele vya UI peke yakeMajaribio ya kuunganisha kwa mtiririko na routingKutumia Testing Library kwa majaribio yanayolenga mtumiajiKuchagua Jest, Vitest, Cypress, au PlaywrightKuiga APIs na kushughulikia majaribio yasiyotuliaSomo 6Maendeleo ya ndani na usanidi wa mazingira: viungo vya mazingira, faili za .env, alama za vipengele kwa frontendSanidi mazingira thabiti ya frontend kwa usanidi wa ndani na wa wingu. Jifunze kusimamia viungo vya mazingira, faili za .env, uingizaji wakati wa kujenga, na alama za vipengele ili uweze kubadili utendaji kwa usalama kwenye maendeleo, hatua, na uzalishaji.
Kusimamia faili za .env na viungo vya wakati wa kujengaKutenganisha usanidi wa maendeleo, hatua, na uzalishajiUsanidi wa wakati wa utendaji na usalama wa mazingiraKutekeleza alama za vipengele vya frontendKushughulikia siri na makosa ya usanidiSomo 7Muundo wa mradi na mikusanyiko ya folda kwa programu za ukurasa mmoja (vipengele, kurasa, huduma, hooks)Buni miundo ya mradi inayoweza kukua kwa programu za ukurasa mmoja. Jifunze mikusanyiko ya folda kwa vipengele, kurasa, huduma, na hooks, na jinsi ya kupanga chuma za pamoja, majaribio, na mitindo ili kuweka mifumo mikubwa ya code inayoweza kupatikana na kudumisha.
Kupanga vipengele, kurasa, na layoutHuduma, hooks, na tabaka za upatikanaji wa dataChuma za pamoja, aina, na thabitiKupanga majaribio na faili za hadithiKurekebisha kuelekea mipaka ya moduliSomo 8Mifumo ya kuunganisha API: wateja wa REST dhidi ya GraphQL, kushughulikia makosa, kurudia maombi, muda wa kusubiriTekeleza mifumo thabiti ya kuunganisha API upande wa mteja. Linganisha wateja wa REST na GraphQL, sanidi Axios au Fetch, shughulikia makosa na kurudia, na ubuni muda wa kusubiri, kughairi, na kurekebisha kwa tabaka thabiti za kupata data.
Kusanidi wateja wa REST na Axios au FetchKutumia wateja wa GraphQL kama Apollo au URQLKushughulikia makosa ya kimataifa na ujumbe wa mtumiajiKurudia maombi, backoff, na muda wa kusubiriKughairi, kidhibiti cha kughairi, na kacheSomo 9Uthibitishaji kwenye frontend: kuhifadhi tokeni, mtiririko wa kunywa tena, na mbinu za cookie salamaElewa mifumo salama ya uthibitishaji wa frontend. Linganisha localStorage, sessionStorage, na cookies, ubuni mtiririko wa tokeni za kunywa tena, na tekelezaji cookies za HttpOnly, ulinzi wa CSRF, na mikakati ya kutoka ambayo hulinda watumiaji katika programu halisi.
Kuhifadhi tokeni: localStorage dhidi ya cookiesKutekeleza mtiririko wa tokeni za kunywa tena kwa usalamaCookies za HttpOnly na ulinzi wa CSRFKushughulikia kutoka, kughairi, na kuzungushaKushughulikia makosa ya uthibitishaji na maoni ya mtumiajiSomo 10Chaguo na mifumo ya kusimamia hali (hali ya kipengele cha ndani, Context, Redux/Pinia/MobX, React Query)Linganisha chaguo za kusimamia hali kwa frontend ngumu. Chunguza hali ya ndani, Context, Redux, Pinia, MobX, na React Query, na jifunze mifumo ya kache, kurekebisha, na kuepuka kuandika upya visivyo ya lazima katika programu kubwa.
Hali ya kipengele cha ndani na mifumo ya kuinuaContext API kwa masuala yanayovukaUbuni wa duka la Redux, Pinia, na MobXHali ya seva na React Query au SWRKuboresha utendaji na mifumo ya kuchaguaSomo 11Routing na njia zilizolindwa: routing ya upande wa mteja, walinzi wa njia, upakiaji wa lazyJenga routing thabiti ya upande wa mteja na njia zilizolindwa. Jifunze usanidi wa njia, njia zilizochongwa, upakiaji wa lazy, na walinzi wa njia wanaolazimisha uthibitishaji na idhini huku wakidumisha urambazaji wa kasi na upatikanaji.
Kusanidi routers za upande wa mteja na njiaNjia zilizochongwa na uongozi wa layoutKutekeleza upakiaji wa lazy na ugawaji wa codeWalinzi wa njia wanaotegemea uthibitishaji na miondokoKushughulikia kurasa za 404 na njia za kurudi
