React Native: Developing Android and iOS Apps Course

Aralin 1 • Pag-scaffold ng Iyong Unang Proyekto

Gumagamit ito ng React Native CLI at Expo CLI upang makabuo ng mga template ng proyekto at inihahambing ang kanilang mga trade-off. Pinapatakbo ng mga mag-aaral ang isang Hello World app sa parehong Android at iOS simulator.

Aralin 2 • Pag-unawa sa React Native Architecture

Sinasaklaw ang JavaScript bridge, native modules, at ang bagong Fabric renderer. Nagbibigay ng mental model na kailangan para mag-debug at mag-optimize sa buong kurso.

Aralin 3 • Debugging at Mga Developer Tool

Ipinapakilala ang Flipper, React DevTools, at ang in-app developer menu para sa pag-inspeksyon ng state at network calls. Ang mga kasanayan sa debugging na itinatag dito ay nalalapat sa bawat susunod na kabanata.

Aralin 1 • Mga Functional Component at JSX

Sinusuri ang JSX syntax, component composition, at prop passing sa konteksto ng React Native. Itinatatag ang component-driven mindset na kinakailangan para sa lahat ng UI work sa hinaharap.

Aralin 2 • State Management gamit ang Hooks

Sinasaklaw ang useState, useReducer, at useRef para sa pamamahala ng lokal na component state at side effects. Ang mga hook na ito ang nagpapagana sa mga interactive na feature na binuo sa buong kurso.

Aralin 3 • Context API para sa Ibinahaging State

Ipinapatupad ang React Context gamit ang useContext upang ibahagi ang theme at auth state sa iba't ibang component. Nagbibigay ng magaan na solusyon sa global state bago ipakilala ang Redux.

Aralin 4 • Mga Side Effect at Lifecycle gamit ang useEffect

Ipinapaliwanag ang useEffect dependency array, cleanup functions, at mga karaniwang pitfalls tulad ng stale closures. Ang tamang paggamit ng effect ay kritikal para sa data fetching na sinasaklaw sa mga susunod na kabanata.

Aralin 1 • Flexbox Layout System

Ipinapaliwanag ang flexDirection, justifyContent, alignItems, at flex sizing gaya ng inilalapat sa React Native. Ang mastery dito ay nagbibigay-daan sa consistent na cross-platform na mga layout sa lahat ng gawaing proyekto.

Aralin 2 • Mga Teknik ng Responsive Design

Ginagamit ang Dimensions API, useWindowDimensions hook, at percentage-based sizing para sa adaptive na mga layout. Tinitiyak na tama ang hitsura ng mga UI sa mga telepono at tablet na may iba't ibang laki ng screen.

Aralin 3 • StyleSheet API at Pag-theme

Itinuturo ang StyleSheet.create, inline styles, at dynamic na style composition. Ang mga mag-aaral ay bumubuo ng isang reusable theme object na ginagamit sa buong proyekto ng kurso.

Aralin 1 • Tab at Drawer Navigation

Ipinapatupad ang bottom tab at side drawer navigators na may mga icon at suporta sa badge. Ang mga pattern na ito ay nagbibigay ng top-level na istruktura ng app na ginamit sa proyekto ng kurso.

Aralin 2 • Deep Linking at Paghawak ng URL

Kinoconfigure ang URL schemes at universal links upang buksan ang mga partikular na screen mula sa mga panlabas na pinagmulan. Ang deep linking ay kinakailangan para sa push notification navigation na sinasaklaw sa ibang pagkakataon.

Aralin 3 • Setup at Mga Konsepto ng React Navigation

Ini-install ang mga dependency ng React Navigation at ipinapaliwanag ang hierarchy ng navigator, screen, at route. Ang pundasyong ito ay kinakailangan bago maipatupad ang anumang pattern ng navigation.

Aralin 4 • Mga Pattern ng Daloy ng Authentication

Ipinapatupad ang conditional navigation stacks na lumilipat sa pagitan ng auth at main app screens batay sa estado ng token. Ang pattern na ito ay muling ginagamit sa buong proyekto ng kurso.

Aralin 1 • Pagkuha ng Data gamit ang Fetch API

Ginagamit ang Fetch API at Axios upang gumawa ng GET, POST, PUT, at DELETE requests na may wastong error handling. Ang mga network call ang pampagana sa dynamic na nilalaman sa proyekto ng kurso.

Aralin 2 • SQLite at Istrukturadong Lokal na Data

Nagsasama ng isang SQLite library upang lumikha ng mga talahanayan, magpatakbo ng mga query, at pamahalaan ang relational data sa device. Ang istrukturang imbakan ay kinakailangan para sa offline-first na feature sa proyekto.

Aralin 3 • Mga Istratehiya sa Pag-cache at Offline

Ipinapatupad ang stale-while-revalidate caching at network-status detection para sa offline UX. Tinitiyak ng mga istratehiyang ito na mananatiling magagamit ang app nang walang koneksyon sa network.

Aralin 4 • Mga Pattern ng Async/Await at Promise

Inilalapat ang async/await syntax, Promise.all, at mga pattern ng cancellation upang pamahalaan ang mga sabay-sabay na request. Pinipigilan ng malinis na async code ang mga race condition sa mga screen na maraming data.

Aralin 1 • Geolocation at Integrasyon ng Maps

Kinukuha ang lokasyon ng device gamit ang Geolocation API at nire-render ang mga mapa gamit ang react-native-maps. Pinapagana ng mga tampok ng lokasyon ang map screen sa proyekto ng kurso.

Aralin 2 • Camera at Pag-access sa Media Library

Nagsasama ng react-native-vision-camera at ang media library API para sa pagkuha at pagpili ng larawan. Ang mga tampok ng camera ay ginagamit sa profile at content upload screens ng proyekto.

Aralin 3 • Setup ng Push Notification

Kinoconfigure ang Firebase Cloud Messaging para sa Android at APNs para sa iOS upang maghatid ng mga push notification. Ang paghawak ng notification ay kumokonekta sa mga pattern ng deep linking mula sa Kabanata 4.

Aralin 4 • Mga Sensor, Biometrics, at Haptics

Ina-access ang accelerometer, biometric authentication, at haptic feedback API para sa pinahusay na UX. Ang mga tampok na ito ang nagpapaiba sa mga native mobile app mula sa web-based na mga alternatibo.

Aralin 1 • React Query para sa Server State

Ginagamit ang useQuery at useMutation hooks ng React Query upang paghiwalayin ang server state sa UI state. Pinapasimple ng diskarteng ito ang pag-sync ng data kumpara sa manu-manong Redux thunks.

Aralin 2 • Async Thunks at RTK Query

Pinangangasiwaan ang async data fetching gamit ang createAsyncThunk at ang RTK Query data-fetching layer. Pinapalitan ng RTK Query ang manu-manong fetch logic at caching mula sa Kabanata 5.

Aralin 3 • Zustand para sa Magaan na Global State

Ipinapatupad ang mga Zustand store para sa UI state na hindi kabilang sa mga library ng server-state. Ang minimal API ng Zustand ay umaakma sa React Query sa isang modernong arkitektura ng state.

Aralin 4 • Mga Pundamental ng Redux Toolkit

Lumilikha ng mga slice, reducer, at action gamit ang createSlice at configureStore API ng Redux Toolkit. Tinatanggal ng RTK ang boilerplate at ito ang pamantayan sa industriya na diskarte sa Redux.

Aralin 1 • Pag-profile at Pag-optimize ng Performance

Ginagamit ang Hermes engine, Flipper performance panel, at re-render tracing upang matukoy ang mga bottleneck. Ang mga diskarte sa pag-optimize dito ay nalalapat sa lahat ng screen na binuo sa proyekto ng kurso.

Aralin 2 • Unit at Integration Testing

Sumusulat ng mga component test gamit ang Jest at React Native Testing Library at mga integration test para sa mga daloy ng navigation. Ang isang nasubok na codebase ay nagbabawas ng panganib ng regression sa yugto ng deployment.

Aralin 3 • End-to-End Testing gamit ang Detox

Ino-automate ang buong daloy ng user sa mga tunay na simulator gamit ang Detox para sa maaasahang E2E coverage. Nahuhuli ng mga E2E test ang mga isyu sa integrasyon na hindi matukoy ng mga unit test.

Aralin 4 • Mga Animation gamit ang Animated API at Reanimated

Bumubuo ng makinis na mga UI animation gamit ang Animated API at React Native Reanimated 3 sa UI thread. Ang mga fluid animation ay isang pangunahing pagkakaiba ng mataas na kalidad na mobile apps.