Kurso sa React at Frontend Development

Aralin 1 • Mga Essential ng JavaScript para sa React

Sinusuri ang ES6+ syntax—arrow functions, destructuring, modules, at promises—na pang-araw-araw na ginagamit ng React code. Tinitiyak na nababasa at naisusulat ng mga mag-aaral ang modernong JS nang walang problema.

Aralin 2 • Paano Nire-render ng Mga Browser ang Mga Web Page

Sinasaklaw ang DOM, CSSOM, at render pipeline na ginagamit ng mga browser upang ipakita ang nilalaman. Ibinabatay ang konsepto ng virtual DOM ng React sa tunay na gawi ng browser.

Aralin 3 • Mga Pundamental ng CSS para sa Pag-istilo ng Component

Sinasaklaw ang box model, specificity, flexbox, at grid bilang mga tool sa pag-istilo na ginagamit sa buong proyekto ng React. Inihahanda ang mga mag-aaral na istiluhin ang mga component nang may kumpiyansa.

Aralin 4 • Mga Essential ng HTML at Semantic Markup

Sinusuri ang mga elementong semantic HTML5 at istraktura ng dokumento na kinakailangan para sa accessible na output ng React. Ini-uugnay ang wastong markup sa SEO at pagiging compatible sa screen-reader.

Aralin 1 • Pag-render ng Mga List at Conditional UI

Itinuturo ang array mapping, key props, at mga pattern ng conditional rendering na ginagamit sa halos bawat React UI. Binubuo ang mga JSX expression na ipinakilala sa mas maagang bahagi ng kabanata.

Aralin 2 • Pagsulat at Pag-unawa sa JSX

Itinuturo ang mga panuntunan ng JSX syntax, expressions, at kung paano binabago ng Babel ang JSX sa mga tawag sa React.createElement. Ini-uugnay ang JSX sa kaalaman sa HTML mula sa Kabanata 1.

Aralin 3 • Komposisyon ng Component at Children Prop

Ipinapakilala ang komposisyon sa halip na inheritance gamit ang children prop at mga pattern na tulad ng slot. Bumubuo ang mga mag-aaral ng flexible wrapper components na tumatanggap ng arbitrary child content.

Aralin 4 • Pagpapasa at Pagtanggap ng Props

Ipinapaliwanag kung paano nagpapasa ng datos ang mga parent component sa mga anak sa pamamagitan ng props at kung paano ito ginagamit ng mga anak. Pinapatibay ang one-way data flow bilang pangunahing prinsipyo ng disenyo ng React.

Aralin 1 • Pag-aangat ng State at Pagbabahagi ng Datos

Ipinapaliwanag ang pag-aangat ng state sa isang common ancestor upang magbahagi ng datos sa pagitan ng mga sibling component. Pinapatibay ang one-way data flow at inihahanda ang mga mag-aaral para sa context sa susunod na kabanata.

Aralin 2 • Paghawak ng Mga Event sa React

Itinuturo ang synthetic events, event handlers, at mga pattern sa paghawak ng form na nag-uugnay ng mga aksyon ng user sa mga update ng state. Binubuo ang useState upang lumikha ng mga interactive component.

Aralin 3 • Pag-unawa sa State at Reactivity

Binibigyang-kahulugan ang state bilang datos na nagti-trigger ng mga re-render at ikinukumpara ito sa props at mga regular na variable. Itinatatag ang mental model na kailangan bago ipakilala ang mga hook API.

Aralin 4 • Pamamahala ng Komplikadong State gamit ang useReducer

Ipinapakilala ang useReducer para sa state logic na may kinalaman sa maraming sub-value o komplikadong transisyon. Nire-refactor ng mga mag-aaral ang mga halimbawa ng useState sa mga component na nakabase sa reducer.

Aralin 1 • Pagbuo ng Theme at Auth Context

Inilalapat ang context sa dalawang praktikal na use case: pag-togg ng theme at authentication state. Pinapatibay ang mga pattern ng context gamit ang mga totoong sitwasyon na nararanasan ng mga mag-aaral sa trabaho.

Aralin 2 • React Context API para sa Global State

Itinuturo ang createContext, Provider, at useContext upang magbahagi ng mga halaga sa kabuuan ng component tree. Nilulutas ang problema ng prop drilling na natukoy sa Kabanata 3.

Aralin 3 • Mga Custom Hook para sa Reusable Logic

Kinukuha ang paulit-ulit na effect at state logic sa mga custom hook na sumusunod sa kombensyon ng use prefix. Gumagawa ang mga mag-aaral ng mga naibabahaging hook tulad ng useFetch at useLocalStorage.

Aralin 4 • Pagkuha ng Datos mula sa Mga API

Sinasaklaw ang fetch at mga async pattern sa loob ng useEffect, loading states, at error handling. Bumubuo ang mga mag-aaral ng isang component na kumukuha at nagpapakita ng malayuang datos na JSON.

Aralin 1 • Mga Protected Route at Navigation Guard

Ipinapatupad ang proteksyon ng ruta gamit ang auth context mula sa Kabanata 4 at ang Navigate component. Nireredirect ng mga mag-aaral ang mga hindi naka-authenticate na user sa isang pahina ng pag-login.

Aralin 2 • Mga Konsepto ng Client-Side Routing

Ipinapaliwanag kung paano ginagaya ng mga single-page application ang navigation nang walang buong pag-reload ng pahina gamit ang History API. Ikinukumpara ang mga modelo ng client-side at server-side routing.

Aralin 3 • Pagtatakda ng Mga Route at Navigation Link

Sinasaklaw ang BrowserRouter, Routes, Route, at Link components upang imapa ang mga URL sa mga component. Bumubuo ang mga mag-aaral ng isang batayang multi-page layout na may persistent navigation bar.

Aralin 4 • Mga Dynamic Route at URL Parameter

Itinuturo ang mga parameterized route at ang useParams hook upang i-render ang mga pahina ng detalye mula sa mga segment ng URL. Binubuo ang pag-render ng list mula sa Kabanata 2 upang lumikha ng mga master-detail UI.

Aralin 1 • CSS Modules at Scoped Styles

Itinuturo ang syntax ng CSS Modules at kung paano bumubuo ang Vite ng mga locally scoped class name upang maiwasan ang mga salungatan. Kino-convert ng mga mag-aaral ang isang global stylesheet sa mga modular component style.

Aralin 2 • Utility-First CSS gamit ang Tailwind

Ipinapakilala ang modelo ng utility class ng Tailwind, configuration, at mga prefix ng responsive design. Muling binubuo ng mga mag-aaral ang isang component gamit lamang ang mga utility class upang ikumpara ang mga pamamaraan.

Aralin 3 • Mga Animation at Transisyon sa React

Sinasaklaw ang CSS transitions, keyframe animations, at ang Framer Motion library para sa animation sa antas ng component. Nagdaragdag ang mga mag-aaral ng mga animation sa pagpasok at paglabas sa mga routed page.

Aralin 4 • CSS-in-JS gamit ang Styled-Components

Sinasaklaw ang tagged template literals, dynamic props-based styles, at theming gamit ang styled-components. Ini-uugnay sa theme context na binuo sa Kabanata 4.

Aralin 1 • Pag-profile at Pagsukat ng Pagganap

Inilalapat ang React DevTools Profiler at panel ng pagganap ng browser upang hanapin ang mga bottleneck. Gumagawa ang mga mag-aaral ng ulat ng pagganap bago at pagkatapos para sa isang tunay na component.

Aralin 2 • Pag-unawa sa Gawi ng Pag-render ng React

Ipinapaliwanag kung kailan at bakit nagre-re-render ang mga component ng React at kung paano nagpapasya ang reconciler kung ano ang ia-update. Nagbibigay ng mental model na kinakailangan bago ilapat ang anumang pag-optimize.

Aralin 3 • Memoization gamit ang React.memo at useMemo

Itinuturo ang React.memo para sa component memoization at useMemo para sa mga magastos na pagkukuwenta. Inilalapat ng mga mag-aaral ang pareho sa isang mabagal na list component at sinusukat ang pagbuti.

Aralin 4 • Mga Stable Reference gamit ang useCallback

Sinasaklaw ang useCallback upang patatagin ang mga function reference na ipinapasa bilang props sa mga memoized na anak. Direktang bumubuo sa kaalaman sa React.memo mula sa nakaraang bahagi.

Aralin 1 • Pagsubok ng Mga Interaksyon ng User at Gawi na Async

Gumagamit ng userEvent at waitFor upang gayahin ang mga click, pagsusumite ng form, at pag-load ng async data. Ini-uugnay sa event handling at mga pattern ng fetch mula sa Kabanata 3 at 4.

Aralin 2 • Unit Testing gamit ang Vitest at React Testing Library

Sinasaklaw ang pag-set up ng Vitest, render utilities, at mga query mula sa React Testing Library upang subukan ang mga component nang nakahiwalay. Sumusulat ang mga mag-aaral ng mga test para sa mga component na binuo sa mga naunang kabanata.

Aralin 3 • Mga Pundamental at Estratehiya ng Pagsubok

Ipinapakilala ang testing pyramid, mga uri ng test, at ang pilosopiya ng pagsubok ng gawi sa halip na implementasyon. Itinatakda ang estratehiya na inilalapat ng mga mag-aaral sa buong kabanatang ito.

Aralin 4 • Pagbuo at Pag-deploy sa Production

Sinasaklaw ang mga production build ng Vite, environment variables, at pag-deploy sa isang static hosting platform na may CI/CD pipeline. Naglalabas ang mga mag-aaral ng isang live, pampublikong naa-access na application.