Curs React Native + Hooks

Lecția 1 • JSX și Virtual DOM

Explică compilarea JSX, reconcilierea cu chei (key props) și modul în care algoritmul de diferențiere (diffing) al React minimizează actualizările native. Leagă comportamentul virtual DOM de performanță.

Lecția 2 • Aprofundarea Componentelor Funcționale

Contrastează componentele de clasă cu cele funcționale și explică de ce hooks necesită componente funcționale. Stabilește modelul mental pentru funcții UI fără stare.

Lecția 3 • Recenzie a Sintaxei Moderne JavaScript

Acoperă destructurarea, operatorii spread/rest, funcțiile săgeată și async/await așa cum sunt folosite în codurile sursă React Native. Reduce confuzia de sintaxă în exemplele ulterioare cu hooks.

Lecția 1 • Ce este React Native

Explică arhitectura bridge, firul de execuție JavaScript și sistemul de module native. Poziționează React Native în raport cu React pentru web și dezvoltarea nativă.

Lecția 2 • Crearea Primului Tău Proiect

Folosește interfața în linie de comandă (CLI) a React Native pentru a genera un proiect și explică structura fișierelor rezultată. Leagă structura directoarelor de pipeline-ul de construire (build).

Lecția 3 • Componente Încorporate de Bază

Prezintă View, Text, Image, ScrollView și TextInput ca blocuri de construcție UI primitive. Demonstrează cum se mapează fiecare la un widget nativ.

Lecția 4 • Configurarea Mediului de Dezvoltare

Instalează Node, Watchman, Xcode și Android Studio cu versiunile corecte ale SDK-urilor. Validează setul de instrumente (toolchain) prin rularea unui proiect gol pe ambele platforme.

Lecția 1 • Gestionarea Stării cu useState

Prezintă semnătura lui useState, inițializarea stării și modelele de funcție de actualizare (updater). Acoperă capcane comune precum închiderile învechite (stale closures) și actualizările în lot (batched updates).

Lecția 2 • Construirea unei Aplicații Contor și Timer

Aplică useState și useEffect împreună într-un contor practic și un cronometru invers (countdown timer). Consolidează actualizările de stare, intervalele și curățarea într-o componentă reală.

Lecția 3 • Efecte Secundare cu useEffect

Explică array-ul de dependențe, funcțiile de curățare și momentul execuției în raport cu randarea. Înlocuiește toate cele trei metode de ciclu de viață ale claselor cu un singur hook.

Lecția 4 • Preluarea Datelor la Distanță cu Hooks

Construiește un model de preluare a datelor folosind useState pentru starea datelor/încărcării/erorii și useEffect pentru apelul de preluare (fetch). Prezintă stările UI de încărcare și eroare.

Lecția 1 • Hooks de Performanță: useMemo și useCallback

Memorează (memoizează) calcule costisitoare cu useMemo și stabilizează referințele funcțiilor cu useCallback pentru a preveni re-randările inutile ale copiilor.

Lecția 2 • API-uri Imperative cu useImperativeHandle

Expune un API imperativ controlat dintr-o componentă copil către o referință (ref) părinte folosind useImperativeHandle și forwardRef. Util pentru componente de input personalizate.

Lecția 3 • Referirea Valorilor cu useRef

Folosește useRef pentru a persista valori mutabile între randări fără a declanșa re-randări și pentru a accesa instanțe de componente native. Contrastează cu useState pentru date non-UI.

Lecția 4 • Stare Complexă cu useReducer

Implementează o funcție de reducere (reducer) și un model de dispatch pentru mașini de stare cu acțiuni multiple. Compară useReducer cu useState pentru scenarii de formulare și coșuri de cumpărături.

Lecția 1 • useForm: Hook pentru Gestionarea Stării Formularelor

Construiește un hook useForm care gestionează valorile câmpurilor, erorile de validare și starea de trimitere (submission). Înlocuiește logica repetitivă de formulare pe mai multe ecrane.

Lecția 2 • Testarea Hook-urilor Personalizate

Folosește React Native Testing Library și renderHook pentru a testa unitar hook-uri personalizate în izolare. Acoperă act, async act și simularea (mock) dependențelor externe.

Lecția 3 • useFetch: Hook pentru Preluarea Datelor

Extrage modelul fetch-încărcare-eroare într-un hook reutilizabil useFetch cu URL și opțiuni configurabile. Demonstrează cum hook-urile personalizate reduc boilerplate-ul componentelor.

Lecția 4 • useLocalStorage și useAsyncStorage

Înfășoară AsyncStorage într-un hook care imită API-ul useState pentru date persistente de tip cheie-valoare. Gestionează serializarea, deserializarea și cazurile de eroare.

Lecția 1 • Modele de Navigator Stack

Creează un navigator stack nativ cu tranziții push, pop și replace. Trimite parametri între ecrane și îi citește cu useRoute.

Lecția 2 • Navigatoare Tab și Drawer

Adaugă navigatoare de tip bottom tab și drawer și le cuibărește (nested) în interiorul stack-ului. Personalizează pictogramele tab-urilor și conținutul drawer-ului cu stare bazată pe hook-uri.

Lecția 3 • Flux de Autentificare cu Navigație

Implementează un navigator condiționat care comută între stivele (stacks) de autentificare și aplicație pe baza stării token-ului stocate în context. Demonstrează rutarea protejată în contexte reale.

Lecția 4 • Hook-uri de Navigație în Profunzime

Folosește useNavigation, useRoute, useFocusEffect și useIsFocused pentru a controla comportamentul de navigație din interiorul componentelor. Înlocuiește prop drilling-ul obiectelor de navigație.

Lecția 1 • Starea Serverului cu React Query

Folosește hook-urile useQuery și useMutation din React Query pentru a gestiona starea serverului, stocarea în cache (caching) și reîmprospătarea în fundal (background refetching). Elimină gestionarea manuală a stării de încărcare/eroare.

Lecția 2 • Integrarea Redux Toolkit

Configurează un magazin (store) Redux cu createSlice, RTK Query pentru preluarea datelor și înfășurătorul Provider. Conectează componentele folosind useSelector și useDispatch.

Lecția 3 • Modele ale API-ului Context la Scară Largă

Împarte contextul în provideri de stare și de dispatch pentru a preveni re-randările inutile în arbori mari. Combină useReducer cu contextul pentru un model asemănător Redux.

Lecția 4 • Stare Globală cu Zustand

Creează un magazin (store) Zustand cu acțiuni și selectori, apoi îl consumă cu un singur apel de hook. Compară API-ul minimalist al Zustand cu boilerplate-ul Context.

Lecția 1 • Profilarea și Diagnosticarea Performanței

Folosește Flipper, profiler-ul React DevTools și Monitorul de Performanță pentru a identifica randările lente și blocajele firului de execuție JavaScript (JS thread jank). Stabilește un flux de lucru de optimizare bazat pe măsurare prealabilă.

Lecția 2 • Optimizarea Listelor și Imaginilor

Aplică proprietățile de optimizare ale FlatList, cache-ul imaginilor și încărcarea leneșă (lazy loading) pentru a elimina tremuratul (jank) la derulare. Acoperă windowSize, initialNumToRender și getItemLayout.

Lecția 3 • Testarea Componentelor și Hook-urilor

Scrie teste unitare și de integrare cu Jest și React Native Testing Library, acoperind interacțiunile utilizatorului și comportamentul asincron. Obține o acoperire semnificativă fără a testa detaliile de implementare.

Lecția 4 • Animații cu Animated și Reanimated

Construiește animații fluide folosind API-ul Animated și face upgrade la Reanimated 2 pentru animații pe firul de execuție UI. Acoperă animații spring, timing și bazate pe gesturi.