React & React Native – Termat e programimit të shpjeguar në shqip

Accessibility in React Native

Qasshmëria në React Native

Përdoruesit me shikim të dobët përdorin VoiceOver (iOS) ose TalkBack (Android). Me accessibilityLabel dhe accessibilityRole u tregon çfarë bën secili buton — sidomos ato që kanë vetëm ikonë.

Actions (useActionState, useOptimistic)

Veprimet në React 19

Në React 19, një formular mund të ketë action={funksion} që merr të dhënat dhe i dërgon. useActionState mban rezultatin dhe gjendjen „po dërgohet“, dhe useOptimistic e shfaq ndryshimin menjëherë para se të përgjigjet serveri.

ActivityIndicator

<ActivityIndicator> është rrethi që rrotullohet i sistemit — iOS dhe Android kanë secili të vetin. E shfaq ndërsa ngarkohen të dhënat.

Ads in mobile apps (AdMob)

Reklamat në aplikacione

Shumë aplikacione falas fitojnë me reklama — p.sh. me Google AdMob: banera, reklama në ekran të plotë ose reklama me „shpërblim“ (shiko një video, merr monedha). Kërkon pëlqimin e përdoruesit për privatësinë.

Alert (React Native)

Alert.alert() shfaq dritaren vendase të sistemit me titull, mesazh dhe butona — p.sh. „Fshi termin?“ me „Anulo“ dhe „Fshi“.

Animated (React Native)

Animated është API-ja e integruar e React Native për animacione: krijon një vlerë që ndryshon me kohë (Animated.timing) dhe e lidh me stilin. Me useNativeDriver: true animacioni ekzekutohet në thread-in vendas.

APK & AAB (Android)

Aplikacionet Android paketohen si APK (që e instalon direkt në telefon) ose AAB (Android App Bundle, që e kërkon Google Play dhe e ndan vetë për çdo lloj telefoni). Për testim të shpejtë përdor APK.

App icon

Ikona e aplikacionit

Ikona e aplikacionit është fotoja që sheh në ekranin e telefonit. iOS kërkon një foto katrore 1024×1024 pa transparencë; Android përdor „adaptive icons“ që përshtaten në forma të ndryshme. Expo i krijon të gjitha madhësitë nga një foto.

App permissions

Lejet e aplikacionit

Aplikacioni duhet të kërkojë leje për kamerën, vendndodhjen, mikrofonin ose njoftimet — dhe të shpjegojë pse. Në iOS teksti shkruhet te Info.plist, në Android te AndroidManifest; Expo i vendos nga app.json.

App review

Shqyrtimi i aplikacionit

Para se të dalë në dyqan, Apple dhe Google e shqyrtojnë aplikacionin: a punon, a respekton privatësinë, a ka përmbajtje të ndaluar. Apple është veçanërisht e rreptë — lexo rregullat para se ta dërgosh.

App Store Connect

App Store Connect është paneli ku publikon aplikacionet në App Store: fotot, përshkrimin, çmimin, versionet dhe shqyrtimin. Të duhet llogaria Apple Developer, që kushton 99 dollarë në vit.

App versions & build numbers

Versionet e aplikacionit

Një aplikacion ka dy numra: versionin që sheh përdoruesi (1.2.0) dhe numrin e ndërtimit (versionCode në Android, buildNumber në iOS) që duhet të rritet me çdo ngarkim në dyqan. EAS mund t'i rrisë vetë.

app.json / app.config

Konfigurimi i aplikacionit Expo

app.json (ose app.config.ts) përshkruan aplikacionin tënd Expo: emrin, ikonën, ekranin e hapjes, versionin, ID-në e paketës dhe lejet. Expo e përdor për të krijuar projektet iOS dhe Android.

AppState (foreground & background)

Gjendja e aplikacionit

AppState të tregon nëse aplikacioni është në ekran (active), në sfond (background) apo duke kaluar mes tyre. E përdor për të ruajtur punën kur përdoruesi del, ose për t'i rifreskuar të dhënat kur kthehet.

AsyncStorage

AsyncStorage është si localStorage i web-it, por për React Native: ruan tekst të thjeshtë në telefon që mbetet edhe pasi mbyllet aplikacioni. Është async, prandaj përdoret me await.

Background tasks

Punët në sfond

iOS dhe Android i kufizojnë shumë aplikacionet kur janë në sfond, për të kursyer baterinë. Me expo-task-manager dhe background fetch mund të bësh punë të vogla herë pas here — por sistemi vendos kur.

Bundle identifier / package name

Identifikuesi i aplikacionit

Çdo aplikacion ka një ID unike në formën e një domeni mbrapsht — p.sh. dev.fjalori.app. Pasi e publikon, s'mund ta ndryshosh më, sepse dyqanet dhe njoftimet e njohin aplikacionin sipas saj.

Camera (expo-camera)

Kamera

expo-camera të jep pamjen e kamerës brenda aplikacionit, për të bërë foto, video ose për të skanuar kode QR. Para se ta përdorësh, duhet t'i kërkosh leje përdoruesit.

Capacitor & Ionic

Capacitor (dhe Ionic-u mbi të) e mbështjell një aplikacion web — React, Vue, Angular — në një aplikacion që publikohet në App Store dhe Google Play, me qasje në kamerë dhe funksione të tjera. Më i lehtë se React Native për ekipe web, por jo gjithmonë aq i shpejtë.

Class components (legacy)

Komponentët me klasa

Para hooks-eve (2019), komponentët me state shkruheshin si klasa me render(), this.state dhe metoda si componentDidMount. Sot shkruhen si funksione, por klasat i takon ende në projekte të vjetra.

CocoaPods

CocoaPods është menaxheri i paketave për kodin vendas të iOS-it. Te projektet React Native pa Expo, pas instalimit të një librarie shpesh duhet të ekzekutosh cd ios && pod install.

Code signing (certificates & provisioning)

Nënshkrimi i aplikacionit

Çdo aplikacion iOS dhe Android duhet të nënshkruhet digjitalisht, që telefoni të dijë kush e bëri dhe që s'është ndryshuar. Në iOS kjo kërkon certifikata dhe „provisioning profiles“ — EAS Build i menaxhon vetë.

Component lifecycle (mount, update, unmount)

Cikli i jetës së komponentit

Çdo komponent kalon tri faza: shfaqet për herë të parë (mount), përditësohet kur ndryshojnë të dhënat (update), dhe hiqet nga faqja (unmount). useEffect të lejon të bësh diçka në secilën fazë.

Composition & children

Ndërtimi me komponentë

Në React, ndërfaqet ndërtohen duke vënë komponentë brenda komponentëve. Prop-i i veçantë children merr gjithçka që shkruan mes etiketës hapëse dhe mbyllëse — kështu ndërton „korniza“ si Karta ose Modali.

Conditional rendering

Shfaqja me kusht

Për të shfaqur diçka vetëm në disa raste, përdor ternary-n (kusht ? A : B) ose && (kusht && <A />) brenda JSX-it, ose një if para return-it. Kujdes: {0 && <A />} shfaq 0!

Context API

Context-i i lejon një komponenti prind t'u japë një vlerë të gjithë pasardhësve pa e kaluar me props në çdo nivel. E krijon me createContext, e jep me <Context value={…}> dhe e lexon me useContext.

Controlled components

Komponentët e kontrolluar

Te një fushë e kontrolluar, vlera e <input> vjen nga state-i (value={emri}) dhe çdo shkronjë e përditëson state-in (onChange). Kështu React-i e di gjithmonë çfarë ka shkruar përdoruesi.

Cross-platform development

Zhvillimi për shumë platforma

Zhvillimi cross-platform do të thotë të shkruash një kod që punon në iOS, Android (dhe ndonjëherë web e kompjuter). React Native, Flutter dhe .NET MAUI e bëjnë këtë — kursen kohë, por ndonjëherë duhet kod i veçantë për secilën platformë.

CSS Modules

Me CSS Modules, çdo skedar .module.css ka klasat e veta që s'përplasen me klasat e skedarëve të tjerë — React-i i jep çdo klase një emër unik. Vite dhe Next.js e mbështesin pa konfigurim.

CSS-in-JS (styled-components, Emotion)

Me CSS-in-JS, stilet shkruhen brenda JavaScript-it, pranë komponentit: const Butoni = styled.button`…`. Ishte shumë popullor; sot shumë ekipe preferojnë Tailwind ose CSS Modules.

Custom fonts (expo-font)

Fontet e personalizuara

Për të përdorur një font tjetër (p.sh. Inter), e ngarkon me useFonts nga expo-font ose me paketat @expo-google-fonts, dhe pastaj e vendos te fontFamily. Kontrollo që fonti ka ë dhe ç!

Custom hooks

Hooks-et e tua

Një custom hook është funksioni yt që fillon me „use“ dhe përdor hooks të tjera brenda. Kështu e ndan logjikën e përsëritur — p.sh. useLocalStorage ose useDebounce — mes shumë komponentëve.

Dark mode in React Native (useColorScheme)

Pamja e errët në React Native

useColorScheme() të tregon nëse telefoni është në pamje të errët apo të çelët, dhe ndryshon vetë kur përdoruesi e ndërron. E përdor për të zgjedhur ngjyrat e duhura.

Deep links & universal links

Lidhjet e thella

Një deep link e hap aplikacionin direkt në një ekran të caktuar — p.sh. fjalori://term/api. „Universal links“ (iOS) dhe „App Links“ (Android) bëjnë që edhe një link i zakonshëm https të hapë aplikacionin nëse është i instaluar.

Deploying a React app

Publikimi i një aplikacioni React

Një aplikacion React publikohet lehtë në Vercel, Netlify ose GitHub Pages: lidh repository-n dhe çdo push ndërtohet vetë. Për SPA, serveri duhet t'i dërgojë të gjitha adresat te index.html — përndryshe /profili jep 404 pas rifreskimit.

Derived state

State-i i nxjerrë

Nëse një vlerë mund të llogaritet nga state-i që ke (p.sh. numri i termave të filtruar), mos e ruaj në state tjetër — llogarite gjatë shfaqjes. Kështu s'del kurrë jashtë sinkronizimit.

Development builds

Versionet për zhvillim

Një development build është versioni yt i Expo Go-së, me modulet vendase që i duhen aplikacionit tënd. E ndërton një herë, e instalon në telefon, dhe pastaj punon me fast refresh si me Expo Go.

Development vs production builds

Ndërtimi për zhvillim dhe për publikim

Gjatë zhvillimit (npm run dev), React-i jep paralajmërime të hollësishme dhe është më i ngadaltë. npm run build krijon versionin e optimizuar dhe të minifikuar në dosjen dist/ — atë që publikohet.

Drag and drop in React (dnd-kit)

Tërheqja dhe lëshimi në React

dnd-kit është libraria moderne për tërheq-dhe-lësho në React: lista që i rendit me maus ose gisht, tabela Kanban, ngarkim skedarësh — me mbështetje për tastierë dhe ekrane me prekje.

Drawer navigator

Menyja anësore

Drawer navigator-i hap një meny anësore që rrëshqet nga e majta — me ikonën ☰ ose duke tërhequr nga skaji i ekranit.

EAS Build

EAS Build e ndërton aplikacionin tënd për iOS dhe Android në serverët e Expo-s — s'të duhet as Mac për iOS. Me eas build -p all merr skedarët gati për App Store dhe Google Play.

EAS Update (over-the-air updates)

Përditësimet pa kaluar nga App Store

Me EAS Update mund ta dërgosh një rregullim të kodit JavaScript direkt te përdoruesit, pa pritur shqyrtimin e App Store-it. Kujdes: ndryshimet në kodin vendas kërkojnë gjithmonë version të ri në dyqan.

Effect cleanup

Pastrimi i efektit

Funksioni që kthen useEffect ekzekutohet kur komponenti hiqet ose para se efekti të ekzekutohet sërish — vendi për të fshirë kohëmatës, për t'u çabonuar ose për të anuluar kërkesa. Pa të, ke „rrjedhje“ memorieje.

Effect dependencies ([ ])

Varësitë e efektit

Vargu i dytë i useEffect thotë kur të ekzekutohet: [] — vetëm një herë në fillim; [id] — sa herë ndryshon id; pa varg — pas çdo shfaqjeje. Harrimi i një varësie është shkaku më i zakonshëm i gabimeve.

Elements vs components

Elementet dhe komponentët

Një komponent është funksioni (Karta); një element është objekti që del kur e përdor (<Karta />) — një përshkrim i asaj që duhet shfaqur. React-i i krahason elementet për të vendosur çfarë të ndryshojë në faqe.

End-to-end tests (Playwright, Cypress)

Testet nga fillimi në fund

Testet end-to-end hapin një shfletues të vërtetë dhe e përdorin aplikacionin si përdorues: klikojnë, shkruajnë, kontrollojnë faqet. Playwright dhe Cypress janë mjetet më të njohura.

Environment variables in Vite (VITE_)

Variablat e ambientit në Vite

Në Vite, variablat e ambientit lexohen me import.meta.env, dhe vetëm ato që fillojnë me VITE_ i dërgohen shfletuesit. Kujdes: çdo gjë që shkon te shfletuesi e sheh kushdo — mos fut kurrë sekrete aty.

Error boundaries

Kufijtë e gabimeve

Një error boundary kap gabimet që ndodhin brenda komponentëve fëmijë dhe shfaq një mesazh rezervë, në vend që e gjithë faqja të bëhet e bardhë. Libraria react-error-boundary e bën të lehtë.

Event handling in React (onClick)

Ngjarjet në React

Në React, ngjarjet shkruhen si props camelCase dhe marrin një funksion: onClick={ruaj}, jo onClick={ruaj()} — përndryshe funksioni thërritet menjëherë gjatë shfaqjes.

Expo

Expo-ja është mënyra e rekomanduar për të nisur me React Native: të jep mjete, qindra module të gatshme (kamera, njoftime, harta) dhe shërbime për ndërtim dhe publikim. Shumë aplikacione s'kanë kurrë nevojë të hapin Xcode.

Expo Go

Expo Go është një aplikacion falas në telefon: skanon kodin QR nga terminali dhe aplikacioni yt hapet menjëherë, pa ndërtim dhe pa kabllo. Ideal për të mësuar; për module vendase të veçanta të duhet një development build.

Expo Router

Expo Router e bën navigimin si në Next.js: çdo skedar te app/ është një ekran, dhe adresa e tij del nga emri i skedarit — app/term/[id].tsx bëhet /term/api. Deep links funksionojnë vetvetiu.

Expo SDK modules

Modulet e Expo-s

Expo SDK ka qindra module të gatshme dhe të testuara për iOS dhe Android: kamera, vendndodhja, njoftimet, sensorët, skedarët, biometria. I instalon me npx expo install, që zgjedh versionin e përputhshëm.

Fast Refresh

Fast Refresh e përditëson aplikacionin në telefon pothuajse menjëherë sa herë ruan një skedar, duke e ruajtur state-in — s'ke pse e rinis dhe të kthehesh te ekrani ku ishe.

Fetching data in React

Marrja e të dhënave në React

Mënyra më e thjeshtë është fetch brenda useEffect, por duhet të trajtosh vetë ngarkimin, gabimet, cache-in dhe kërkesat e dyfishta. Prandaj në aplikacione të vërteta përdoren TanStack Query, SWR ose Server Components.

File system (expo-file-system)

Skedarët në telefon

expo-file-system të lejon të lexosh, shkruash dhe shkarkosh skedarë brenda dosjes së aplikacionit në telefon — p.sh. për ta ruajtur një PDF ose fotot offline.

FlatList

FlatList është mënyra e duhur për lista të gjata në React Native: vizaton vetëm rreshtat që shihen dhe i ripërdor gjatë scroll-it. I jep të dhënat (data), funksionin që vizaton një rresht (renderItem) dhe keyExtractor.

Flexbox in React Native

Flexbox në React Native

Në React Native, çdo View përdor flexbox si parazgjedhje — por me drejtim vertikal (flexDirection: "column"), ndryshe nga web-i. flex: 1 i thotë elementit ta zërë gjithë hapësirën e mbetur.

Flutter vs React Native

Flutter dhe React Native

Të dyja ndërtojnë aplikacione iOS dhe Android nga një kod. React Native përdor JavaScript/TypeScript dhe komponentë vendas — ideal nëse e njeh React-in. Flutter-i përdor Dart-in dhe vizaton vetë çdo piksel me motorin e tij.

Folder structure in React projects

Organizimi i dosjeve në React

S'ka rregull të vetëm, por një strukturë e zakonshme: src/components (komponentë të ripërdorshëm), src/features ose src/pages (sipas faqeve/veçorive), src/hooks, src/lib. Për projekte të mëdha, grupimi sipas veçorive funksionon më mirë.

Fragments (<>…</>)

Fragmentet

Një komponent duhet të kthejë një element të vetëm. Kur s'do të shtosh një <div> të panevojshëm, i mbështjell elementet me një fragment <>…</>, që s'shfaqet në faqe.

Function components

Komponentët si funksione

Në React modern, një komponent është thjesht një funksion që merr props dhe kthen JSX. Emri fillon me shkronjë të madhe (Karta, jo karta), që React-i ta dallojë nga etiketat HTML.

Gatsby

Gatsby-ja ishte një framework i njohur React për faqe statike (blogje, portofolio) që i ndërton paraprakisht të gjitha faqet. Sot shumë projekte kanë kaluar te Next.js ose Astro, por do ta takosh ende.

Gesture Handler

Gjestet me gisht

React Native Gesture Handler i njeh gjestet me gisht — rrëshqitje, tërheqje, zmadhim me dy gishta, shtypje e gjatë — në thread-in vendas, që të jenë të shpejta dhe të sakta. Shkon bashkë me Reanimated.

Google Play Console

Google Play Console është paneli për të publikuar aplikacione në Google Play. Llogaria kushton 25 dollarë një herë, dhe ka „tracks“ për testim të brendshëm, të mbyllur dhe të hapur para publikimit për të gjithë.

Haptics (vibration feedback)

Dridhjet e lehta

Haptics janë dridhjet e vogla dhe të sakta që ndien kur shtyp një buton ose përfundon një veprim. Me expo-haptics i shton në aplikacion — e bëjnë të ndihet më „i vërtetë“, por mos e tepro.

Hermes

Hermes është motori JavaScript që Meta e krijoi posaçërisht për React Native: e nis aplikacionin më shpejt dhe përdor më pak memorie se motorët e zakonshëm. Është parazgjedhja.

Higher-order components (HOC)

Komponentët e rendit të lartë

Një HOC është funksion që merr një komponent dhe kthen një komponent të ri me aftësi shtesë — p.sh. withAuth(Paneli). Sot shumicën e kohës zëvendësohen nga custom hooks.

How JSX is compiled

Si përkthehet JSX-i

JSX-i s'është JavaScript i vërtetë: Vite, Babel ose TypeScript e kthejnë <h1>Tung</h1> në një thirrje funksioni që krijon një objekt — një „element React“. Prandaj JSX-i kërkon gjithmonë një hap ndërtimi.

How React Native works (JS & native)

Si punon React Native

Te React Native, kodi yt JavaScript ekzekutohet në telefon dhe i tregon pjesës vendase (iOS/Android) çfarë të vizatojë. Kështu butonat dhe listat janë komponentë të vërtetë vendas, jo faqe web brenda aplikacionit.

Hydration

Hidratimi

Kur faqja vjen gati si HTML nga serveri, React-i në shfletues i „jep jetë“ — i lidh butonat dhe ngjarjet. Kjo quhet hidratim. Nëse HTML-ja e serverit ndryshon nga ajo e shfletuesit, del gabimi „hydration mismatch“.

Icons in React Native

Ikonat në React Native

@expo/vector-icons të jep mijëra ikona (Ionicons, MaterialIcons, FontAwesome) si komponentë: <Ionicons name="home" size={24} />. Mprehen në çdo ekran, sepse janë vektorë.

Image (React Native)

<Image> shfaq foto, nga skedarët e aplikacionit (require("./logo.png")) ose nga interneti ({ uri: "https://…" }). Për fotot nga interneti duhet t'i japësh gjerësinë dhe lartësinë. expo-image është version më i shpejtë me cache.

Image picker

Zgjedhja e fotove

expo-image-picker e lejon përdoruesin të zgjedhë një foto nga galeria ose të bëjë një të re — p.sh. për foton e profilit. Kthen adresën e fotos që e shfaq ose e ngarkon në server.

Immutable state updates

Përditësimi i state-it pa e ndryshuar

S'duhet ta ndryshosh kurrë state-in direkt (lista.push(x)) — React-i s'e vë re. Krijo një vlerë të re: setLista([...lista, x]) ose setNxenesi({ ...nxenesi, nota: 5 }).

In-app purchases & subscriptions

Blerjet brenda aplikacionit

Për të shitur veçori ose abonime brenda një aplikacioni, Apple dhe Google kërkojnë që të përdorësh sistemet e tyre të pagesës (dhe marrin një përqindje). Shërbime si RevenueCat e bëjnë shumë më të lehtë.

Infinite render loops

Rishfaqjet pa fund

Gabimi „Too many re-renders“ ndodh kur ndryshon state-in direkt gjatë shfaqjes, ose kur një useEffect ndryshon një vlerë që është në varësitë e veta. Çdo ndryshim shkakton rishfaqje, e cila shkakton ndryshim tjetër…

Inline styles in React (style={{ }})

Stilet direkt në React

Në React, prop-i style merr një objekt JavaScript, prandaj ka dy kllapa: style={{ color: "red", fontSize: 18 }}. Emrat e vetive shkruhen camelCase, dhe numrat pa njësi kuptohen si px.

iOS vs Android differences

Dallimet mes iOS dhe Android

Edhe me React Native, iOS dhe Android ndryshojnë: butoni „Prapa“ i Android-it, hijet (shadow vs elevation), fontet e sistemit, lejet, njoftimet dhe rregullat e dyqaneve. Provoje gjithmonë në të dyja.

IPA (iOS)

IPA është skedari i një aplikacioni iOS, i nënshkruar dhe gati për t'u ngarkuar në App Store Connect ose në TestFlight. Ndryshe nga Android-i, s'mund ta instalosh lirisht në çdo iPhone.

JavaScript in JSX ({ })

JavaScript brenda JSX-it

Brenda kllapave gjarpër { } në JSX mund të fusësh çdo shprehje JavaScript — një variabël, një llogaritje, një thirrje funksioni. Por jo urdhra si if ose for; për to përdor ternary dhe map.

Jotai & atomic state

Jotai

Jotai-ja e ndan state-in në „atome“ të vogla të pavarura, që secili komponent i lexon dhe i ndryshon si useState — por të përbashkëta në gjithë aplikacionin.

JS thread & UI thread

Thread-i i JavaScript-it dhe i ndërfaqes

Në React Native, JavaScript-i punon në një thread, dhe ndërfaqja vendase në një tjetër. Nëse e bllokon thread-in e JS me punë të rënda, butonat dhe animacionet ngecin. Reanimated i ekzekuton animacionet direkt në thread-in e ndërfaqes.

JSX

JSX të lejon të shkruash diçka që duket si HTML brenda JavaScript-it: <h1>Tung, {emri}</h1>. Shfletuesi s'e kupton direkt — mjete si Vite ose Babel e kthejnë në thirrje JavaScript-i.

JSX vs HTML (className, htmlFor)

Dallimet mes JSX-it dhe HTML-së

JSX ngjan me HTML, por ka disa dallime: class shkruhet className, for shkruhet htmlFor, çdo etiketë duhet mbyllur (<img />), dhe atributet shkruhen camelCase (onClick, tabIndex).

KeyboardAvoidingView

Kur hapet tastiera në telefon, mund ta mbulojë fushën ku po shkruan. KeyboardAvoidingView e ngre përmbajtjen lart që fusha të mbetet e dukshme — sidomos e nevojshme në iOS.

Keys

Çelësat (key)

key është një prop i veçantë që i jep çdo elementi në një listë një identitet të qëndrueshëm. Përdor një ID nga të dhënat — jo indeksin e vargut, sepse kur renditja ndryshon, React-i i ngatërron elementet.

Lifting state up

Ngritja e state-it

Kur dy komponentë kanë nevojë për të njëjtat të dhëna, state-i zhvendoset te prindi i tyre i përbashkët, dhe ai ua jep të dyve me props. Është mënyra bazë si ndajnë të dhëna komponentët në React.

Loading & error states

Gjendjet e ngarkimit dhe gabimit

Çdo ekran që merr të dhëna ka tri gjendje: duke ngarkuar (spinner ose „skeleton“), gabim (mesazh dhe buton „Provo sërish“), dhe sukses. Harrimi i dy të parave është gabimi më i shpeshtë i fillestarëve.

Lottie animations

Animacionet Lottie

Lottie shfaq animacione të krijuara nga dizajnerët (në After Effects) si skedarë të vegjël JSON — p.sh. një shenjë ✓ që vizatohet ose një ilustrim që lëviz. Punon në web, iOS dhe Android.

Maps (react-native-maps)

Hartat

react-native-maps shfaq hartat vendase (Apple Maps në iOS, Google Maps në Android) me shënues, zona dhe rrugë. Bashkë me expo-location, tregon ku është përdoruesi.

Metro bundler

Metro-ja është bundler-i i React Native: e mbledh të gjithë kodin JavaScript në një paketë për telefonin dhe e rifreskon menjëherë kur ruan një skedar. Kur nis npx expo start, nis Metro.

MMKV

MMKV është një mënyrë shumë më e shpejtë se AsyncStorage për të ruajtur të dhëna të vogla në telefon — dhe është sinkron, pa await. E përdorin shumë aplikacione të mëdha.

Mobile end-to-end tests (Maestro, Detox)

Testet nga fillimi në fund në celular

Maestro dhe Detox e hapin aplikacionin në simulator ose telefon dhe e përdorin si njeri: shtypin, shkruajnë, rrëshqasin dhe kontrollojnë ekranet. Maestro-ja shkruhet me skedarë të thjeshtë YAML.

Mobile performance

Shpejtësia në celular

Një aplikacion i shpejtë mban 60 kuadro në sekondë. Shkaqet e zakonshme të ngadalësisë: lista pa FlatList, foto shumë të mëdha, rishfaqje të panevojshme dhe punë e rëndë në thread-in e JS. Provoje gjithmonë në versionin release dhe në një telefon të vjetër.

Mobile UX basics

Bazat e përvojës në celular

Në telefon, butonat duhet të jenë të paktën rreth 44 pikë që të preken lehtë me gisht, veprimet kryesore duhet të jenë ku arrin gishti i madh (poshtë), dhe teksti duhet të lexohet pa zmadhim.

Mock Service Worker (MSW)

MSW kap kërkesat fetch në shfletues ose në teste dhe kthen përgjigje false që i përcakton ti. Kështu e ndërton dhe teston frontend-in edhe para se të jetë gati backend-i.

Modal (React Native)

<Modal> shfaq një ekran mbi të tjerët — p.sh. për konfirmim ose një formular të shpejtë. Me animationType="slide" del nga poshtë. Për „bottom sheet“ që tërhiqen me gisht përdoren librari të veçanta.

Motion (Framer Motion)

Motion (dikur Framer Motion) është libraria më e njohur për animacione në React: <motion.div animate={{ opacity: 1 }}> dhe elementi animohet butë. Bën edhe animacione kur elementet hyjnë dhe dalin.

MUI (Material UI)

MUI është një nga libraritë më të mëdha të komponentëve për React, e bazuar në Material Design të Google-it. Ka qindra komponentë të gatshëm — butona, tabela, data picker — shumë të përdorur në panele administrimi.

Native modules

Modulet vendase

Kur të duhet diçka që JavaScript-i s'e bën dot vetë — p.sh. një sensor i veçantë — shkruan një modul vendas në Swift/Kotlin dhe e thërret nga JavaScript-i. Expo Modules API e bën këtë shumë më të lehtë.

Native vs cross-platform vs hybrid

Aplikacionet vendase, cross-platform dhe hibride

Aplikacionet vendase shkruhen në Swift (iOS) dhe Kotlin (Android) — dy kode të ndara. Cross-platform (React Native, Flutter) përdorin një kod që vizaton ndërfaqe vendase ose të vetat. Hibridët (Ionic) janë faqe web brenda një aplikacioni.

NativeWind (Tailwind for React Native)

NativeWind të lejon të përdorësh klasat e Tailwind-it në React Native: <View className="p-4 bg-white rounded-xl">. Nëse e njeh Tailwind-in nga web-i, s'ke pse mëson StyleSheet nga e para.

Navigation params

Parametrat e navigimit

Kur kalon te një ekran tjetër, mund t'i dërgosh të dhëna — p.sh. ID-në e termit. Ekrani i ri i lexon me route.params (React Navigation) ose useLocalSearchParams (Expo Router).

NetInfo (connectivity)

Gjendja e lidhjes

NetInfo të tregon nëse telefoni është i lidhur me internetin dhe si (WiFi apo të dhëna mobile). E përdor për të shfaqur „S'ka internet“ ose për të shtyrë kërkesat derisa të kthehet lidhja.

New Architecture (JSI, Fabric, TurboModules)

Arkitektura e re e React Native

Arkitektura e re e React Native (tani parazgjedhje) zëvendëson „urën“ e vjetër: me JSI, JavaScript-i flet direkt me kodin vendas, Fabric e vizaton ndërfaqen më shpejt, dhe TurboModules ngarkohen vetëm kur duhen.

Next.js App Router

Te App Router i Next.js, çdo dosje te app/ është një adresë dhe page.tsx është faqja e saj; layout.tsx është korniza e përbashkët. Komponentët janë Server Components si parazgjedhje.

Offline-first apps

Aplikacionet që punojnë pa internet

Një aplikacion offline-first i ruan të dhënat në telefon dhe punon edhe pa internet; kur kthehet lidhja, sinkronizohet me serverin. Shumë i rëndësishëm për përdoruesit me internet të dobët ose në udhëtim.

One-way data flow

Rrjedha e të dhënave në një drejtim

Në React, të dhënat rrjedhin vetëm nga prindi te fëmijët (përmes props). Kur fëmija do të ndryshojë diçka, thërret një funksion që ia ka dhënë prindi. Kështu e di gjithmonë nga vjen çdo vlerë.

Optimistic updates

Përditësimet optimiste

Te përditësimet optimiste, ndërfaqja e shfaq ndryshimin menjëherë — p.sh. mesazhi shfaqet në chat — para se serveri ta konfirmojë. Po dështoi, e kthen mbrapsht. Aplikacioni duket shumë më i shpejtë.

Platform-specific code (Platform.OS)

Kodi i veçantë për platformë

Ndonjëherë iOS dhe Android duan diçka ndryshe. Platform.OS të tregon ku je ("ios" ose "android"), Platform.select zgjedh vlerën, dhe skedarët Butoni.ios.js / Butoni.android.js zgjidhen automatikisht.

Portals

Portalet

createPortal e shfaq një komponent në një vend tjetër të faqes (zakonisht direkt te <body>), edhe pse në kod është brenda një prindi. E dobishme për modalë, tooltip-e dhe menu që s'duhen prerë nga overflow.

Prebuild & Continuous Native Generation

Krijimi automatik i projekteve vendase

Me Expo, dosjet ios/ dhe android/ s'i shkruan me dorë: npx expo prebuild i krijon nga app.json dhe „config plugins“. Kështu përditësimi i React Native-it bëhet shumë më i lehtë.

Pressable & buttons

Butonat në React Native

Në React Native, gjërat që preken bëhen me <Pressable> (ose TouchableOpacity i vjetër), dhe ngjarja quhet onPress, jo onClick. Mund të ndryshosh stilin kur gishti e shtyp.

Prop drilling

Kalimi i props-eve në shumë nivele

Prop drilling ndodh kur e kalon një vlerë me props nëpër shumë komponentë që s'e përdorin, vetëm që të arrijë te një fëmijë i thellë. Zgjidhje: Context, një librari state-i, ose komponentë të ndërtuar me children.

PropTypes (legacy)

PropTypes ishte mënyra e vjetër për të kontrolluar tipet e props-eve gjatë ekzekutimit. Sot zëvendësohet nga TypeScript-i, që i kontrollon para ekzekutimit, dhe React 19 nuk i kontrollon më.

Protected routes

Faqet e mbrojtura

Një rrugë e mbrojtur shfaqet vetëm nëse përdoruesi është i kyçur; përndryshe e çon te faqja e hyrjes. Kujdes: kontrolli në frontend është vetëm për komoditet — serveri duhet ta kontrollojë gjithmonë sërish.

Push notifications

Njoftimet push

Njoftimet push i dërgon serveri te telefoni edhe kur aplikacioni është i mbyllur — përmes shërbimeve të Apple-it (APNs) dhe Google-it (FCM). Me expo-notifications merr leje nga përdoruesi dhe një „push token“.

Radix & headless UI

Komponentët pa stil

Libraritë „headless“ si Radix dhe React Aria të japin komponentë që punojnë plotësisht — meny, dialogë, tab-e, me tastierë dhe qasshmëri — por pa asnjë stil. Pamjen ua jep ti.

Re-rendering

Rishfaqja

Një komponent rishfaqet kur ndryshon state-i i tij, kur ndryshojnë props-et ose kur rishfaqet prindi. Rishfaqja do të thotë që funksioni thërritet sërish — React-i pastaj ndryshon në faqe vetëm atë që ka ndryshuar vërtet.

React

React-i është një librari JavaScript për ndërtimin e ndërfaqeve nga komponentë. Kur ndryshojnë të dhënat, React-i e përditëson vetë vetëm pjesën e faqes që duhet.

React Compiler

React Compiler e analizon kodin gjatë ndërtimit dhe shton vetë optimizimet që dikur i shkruaje me useMemo, useCallback dhe memo. Kështu kodi mbetet i thjeshtë dhe aplikacioni i shpejtë.

React DevTools

React DevTools është shtesë për shfletuesin që të tregon pemën e komponentëve, props-et dhe state-in e secilit, dhe me Profiler-in të tregon cilët komponentë rishfaqen dhe sa kohë marrin.

React Hook Form

React Hook Form e bën ndërtimin e formularëve më të lehtë dhe më të shpejtë: regjistron fushat, i validon (shpesh me Zod) dhe shfaq gabimet, pa rishfaqur gjithë formularin me çdo shkronjë.

React Native

React Native të lejon të ndërtosh aplikacione të vërteta për iPhone dhe Android me JavaScript dhe React. Expo e bën fillimin shumë të lehtë — e provon aplikacionin në telefon menjëherë.

React Native DevTools

React Native DevTools (që zëvendësoi Flipper-in) të lejon të debug-osh aplikacionin si në Chrome: breakpoints, console, pema e komponentëve dhe profiler-i. E hap nga „dev menu“ duke tundur telefonin ose me j në terminal.

React Native for Web

React Native for Web i shfaq komponentët e React Native (View, Text) si HTML në shfletues. Me Expo, i njëjti projekt ndërtohet për iOS, Android dhe web — „aplikacione universale“.

React Native Skia

React Native Skia të jep një canvas me grafikë shumë të shpejta — i njëjti motor vizatimi që përdorin Chrome dhe Flutter. Për efekte vizuale, grafikë dhe lojëra të vogla.

React Navigation

React Navigation është libraria kryesore për të kaluar nga një ekran te tjetri në React Native: me stack, tab-e poshtë ose meny anësore. Expo Router ndërtohet mbi të.

React performance

Shpejtësia në React

Për ta bërë React-in më të shpejtë: mat së pari me Profiler-in, shmang rishfaqjet e panevojshme (memo, state afër vendit ku përdoret), virtualizo listat e mëdha, ngarko kodin me lazy, dhe mos optimizo para se të dish ku është problemi.

React Server Components

Komponentët e serverit

Server Components ekzekutohen vetëm në server: mund të lexojnë direkt nga databaza dhe s'i dërgojnë JavaScript shfletuesit. Komponentët interaktivë shënohen me "use client". Next.js i përdor si parazgjedhje.

React Testing Library

React Testing Library teston komponentët ashtu siç i përdor një njeri: gjen butona sipas tekstit, klikon dhe kontrollon çfarë shfaqet — jo detajet e brendshme. Përdoret bashkë me Vitest ose Jest.

React Three Fiber

React Three Fiber të lejon të ndërtosh skena 3D me Three.js duke shkruar komponentë React: <mesh>, <boxGeometry>, <ambientLight>. Shumë e përdorur për faqe interaktive dhe produkte 3D.

React versions (16.8, 18, 19)

Versionet e React-it

React 16.8 (2019) solli hooks-et; React 18 solli rendering-un konkurrent dhe useTransition; React 19 solli Actions, use(), ref si prop dhe React Compiler-in. Tutorialet para 2019 përdorin kryesisht klasa.

react-dom & createRoot

react-dom e lidh React-in me faqen web. Me createRoot(document.getElementById("root")).render(<App />) e nis aplikacionin brenda një elementi HTML. React Native përdor diçka tjetër në vend të react-dom.

React.lazy & code splitting

Ngarkimi i vonuar i komponentëve

React.lazy(() => import("./Paneli")) e ngarkon kodin e një komponenti vetëm kur shfaqet për herë të parë. Kështu faqja e parë hapet më shpejt, sepse s'shkarkon kodin e të gjitha faqeve njëherësh.

React.memo

memo(Komponenti) e pengon rishfaqjen e një komponenti kur props-et e tij s'kanë ndryshuar. E dobishme për komponentë të rëndë në lista të mëdha; mos e vendos kudo „për çdo rast“.

Reanimated

Reanimated është libraria kryesore për animacione të lëmuara në React Native: animacionet ekzekutohen direkt në thread-in e ndërfaqes, prandaj mbeten 60 kuadro në sekondë edhe kur JavaScript-i është i zënë.

Redux & Redux Toolkit

Redux-i e mban të gjithë state-in global në një „store“ të vetëm dhe e ndryshon vetëm përmes veprimeve dhe reducer-ave. Redux Toolkit e bën shumë më të shkurtër. Përdoret shumë në aplikacione të mëdha dhe të vjetra.

Refs to components (forwardRef, ref as prop)

Ref-et te komponentët

Për t'i dhënë një ref komponentit tënd që ta kalojë te një <input> brenda, dikur duhej forwardRef. Në React 19, ref është thjesht një prop si të tjerët.

Remix & React Router framework mode

Remix

Remix-i u bashkua me React Router: në „framework mode“, çdo rrugë ka një loader (që merr të dhënat në server) dhe një action (që trajton formularët). Ndjek nga afër standardet e web-it.

Rendering lists (map)

Shfaqja e listave

Për të shfaqur një listë në React, e kthen vargun në elemente JSX me .map(). Çdo element ka nevojë për një key unik, që React-i ta dijë cili është cili kur lista ndryshon.

Rules of Hooks

Rregullat e hooks-eve

Hooks-et kanë dy rregulla: thirri vetëm në nivelin e sipërm të komponentit (jo brenda if, for ose funksioneve të tjera), dhe vetëm nga komponentët ose custom hooks. React-i i njeh sipas radhës së thirrjes.

Safe areas (SafeAreaView)

Zonat e sigurta të ekranit

Telefonat modernë kanë „notch“, Dynamic Island dhe vijën e shtëpisë poshtë. SafeAreaView (nga react-native-safe-area-context) e mban përmbajtjen larg tyre, që të mos fshihet asgjë.

ScrollView

Në telefon, përmbajtja s'bën scroll vetë si në web — duhet ta futësh brenda një <ScrollView>. Për lista të gjata, përdor FlatList, sepse ScrollView i vizaton të gjitha elementet njëherësh.

SectionList

SectionList është si FlatList, por me grupe me tituj — p.sh. kontaktet sipas shkronjës së parë, ose termat sipas kategorisë.

SecureStore (Keychain & Keystore)

Ruajtja e sigurt

Për token-a hyrjeje dhe sekrete, mos përdor AsyncStorage: expo-secure-store i ruan të kriptuara në Keychain (iOS) ose Keystore (Android), ku aplikacionet e tjera s'i arrijnë.

Sensors (accelerometer, gyroscope)

Sensorët

Telefonat kanë sensorë: përshpejtuesin (lëvizja), xhiroskopin (rrotullimi), magnetometrin (busulla), numëruesin e hapave. expo-sensors t'i jep në JavaScript — për lojëra, fitness ose efekte.

shadcn/ui

shadcn/ui s'është një librari që e instalon, por një koleksion komponentësh të bukur (ndërtuar me Radix dhe Tailwind) që i kopjon direkt në projektin tënd dhe i ndryshon si të duash.

Share sheet

Ndarja me të tjerët

Share.share() hap dritaren e sistemit për të ndarë diçka — në WhatsApp, Viber, email ose ta kopjosh. Një rresht kod dhe përdoruesi zgjedh vetë aplikacionin.

Simulator & emulator

Simulatori dhe emulatori

Simulatori i iOS (në Xcode) dhe emulatori i Android-it (në Android Studio) të shfaqin një telefon virtual në kompjuter, që ta provosh aplikacionin pa telefon të vërtetë. Për kamerën dhe performancën, provo gjithmonë edhe në telefon.

Splash screen

Ekrani i hapjes

Ekrani i hapjes është ai që sheh për një moment kur hap aplikacionin — zakonisht logoja mbi një ngjyrë. Me expo-splash-screen e mban të dukshëm derisa të ngarkohen fontet dhe të dhënat e para.

SQLite in React Native (expo-sqlite)

SQLite në React Native

Për shumë të dhëna në telefon — p.sh. gjithë fjalori offline — përdoret një databazë SQLite e vërtetë me expo-sqlite. Query-t SQL punojnë njësoj si në server.

Stack navigator

Navigimi me stivë

Te një stack navigator, çdo ekran i ri vendoset mbi të vjetrin, dhe me „Prapa“ kthehesh te i mëparshmi — si në shumicën e aplikacioneve. Në iOS, ekrani rrëshqet nga e djathta.

Stale closures

Closure-t e vjetruara

Një funksion brenda komponentit „mban mend“ vlerat e state-it nga momenti kur u krijua. Nëse përdoret më vonë (në një setInterval ose efekt pa varësi të sakta), sheh vlera të vjetra. Zgjidhje: setX((x) => x + 1) ose varësi të sakta.

Starting a React project (Vite, Next.js)

Nisja e një projekti React

Mënyra e rekomanduar sot për të nisur me React: npm create vite@latest për një aplikacion të thjeshtë, ose një framework si Next.js ose React Router për faqe të plota. Create React App i vjetër është braktisur.

State colocation

Mbajtja e state-it afër

Mbaje state-in sa më afër vendit ku përdoret. Nëse vetëm një komponent ka nevojë për të, mbaje aty — jo në krye të aplikacionit. Kështu rishfaqet më pak kod dhe kodi lexohet më lehtë.

State machines (XState)

Makinat e gjendjeve

Një makinë gjendjesh përshkruan saktë në cilat gjendje mund të jetë diçka dhe si kalon nga njëra te tjetra — p.sh. „pritje → po paguan → paguar / dështoi“. XState i bën këto qartë dhe të sigurta në React.

StatusBar

StatusBar kontrollon shiritin në krye të ekranit me orën dhe baterinë: ngjyrën e teksteve (e çelët ose e errët) dhe nëse fshihet. Me expo-status-bar mjafton <StatusBar style="auto" />.

Storybook

Storybook-u të lejon t'i ndërtosh dhe t'i shohësh komponentët një nga një, veç aplikacionit, në të gjitha gjendjet e tyre (i ngarkuar, gabim, bosh). Shumë i dobishëm për ekipe dhe sisteme dizajni.

StrictMode

<StrictMode> e kontrollon aplikacionin për gabime gjatë zhvillimit: i ekzekuton disa funksione dy herë qëllimisht (prandaj useEffect duket sikur ekzekutohet dy herë) që të zbulojë efekte anësore. S'ka efekt në production.

StyleSheet

React Native s'ka CSS: stilet shkruhen si objekte JavaScript me StyleSheet.create, me emra camelCase (backgroundColor) dhe numra pa njësi. Shumë veti janë si në CSS, por jo të gjitha.

Suspense

<Suspense fallback={<Ngarkim />}> shfaq diçka rezervë ndërsa një pjesë e faqes po pret — kod që ngarkohet me lazy ose të dhëna me use(). Kur janë gati, shfaqet përmbajtja e vërtetë.

SVG in React Native

SVG në React Native

React Native s'i shfaq SVG-të vetë — të duhet react-native-svg, që të jep komponentë si <Svg>, <Circle>, <Path>. Ideal për ikona, grafikë dhe ilustrime që mbeten të mprehta.

SWR

SWR (nga Vercel) është një librari më e vogël për marrjen e të dhënave: të tregon menjëherë të dhënat nga cache-i (edhe nëse janë pak të vjetra) dhe i rifreskon në sfond. Emri vjen nga „stale-while-revalidate“.

Synthetic events

Ngjarjet sintetike

React-i i mbështjell ngjarjet e shfletuesit në „ngjarje sintetike“ që sillen njësoj në çdo shfletues. Kanë të njëjtat veti — e.target, e.preventDefault() — dhe ngjarja origjinale është te e.nativeEvent.

Tab navigator

Navigimi me tab-e

Tab navigator-i shfaq shiritin me ikona poshtë ekranit — si te Instagram-i — për të kaluar mes seksioneve kryesore të aplikacionit.

TanStack Query (React Query)

TanStack Query e menaxhon gjithçka rreth të dhënave nga serveri: i merr, i mban në cache, i rifreskon në sfond, provon sërish kur dështon dhe i ndan mes komponentëve. useQuery për lexim, useMutation për ndryshim.

TestFlight & beta testing

Testimi beta

TestFlight të lejon t'ua japësh aplikacionin iOS testuesve (deri në 10 000) para se ta publikosh. Google Play ka „internal testing“ për të njëjtën gjë. Mënyrë e shkëlqyer për të gjetur gabime me përdorues të vërtetë.

Testing on a real phone

Provimi në telefon të vërtetë

Simulatorët s'i tregojnë gjithçka: shpejtësinë e vërtetë, kamerën, sensorët, njoftimet push dhe ndjesinë e gishtit. Provoje gjithmonë në të paktën një telefon të vërtetë — mundësisht edhe një të vjetër dhe të ngadaltë.

Testing React Native (Jest & RNTL)

Testimi në React Native

Komponentët e React Native testohen me Jest dhe React Native Testing Library — i shfaq, i shtyp butonat (fireEvent.press) dhe kontrollon tekstin, njësoj si në web.

Text (React Native)

Në React Native, çdo tekst duhet të jetë brenda <Text> — s'mund të shkruash tekst direkt brenda një <View>. Stilet e tekstit (madhësia, ngjyra) vendosen te Text, jo te View.

TextInput

<TextInput> është fusha e shkrimit në React Native. Me keyboardType zgjedh tastierën (numra, email), me secureTextEntry fsheh fjalëkalimin, dhe me onChangeText merr tekstin direkt.

Toast notifications

Njoftimet e shkurtra

Një „toast“ është një njoftim i vogël që shfaqet për pak sekonda në cep të ekranit — „U ruajt!“, „Gabim në lidhje“ — dhe zhduket vetë. Libraritë si Sonner e bëjnë me një rresht.

Translations in React (i18next)

Përkthimet në React

Për aplikacione në disa gjuhë, libraritë si react-i18next i mbajnë tekstet në skedarë për çdo gjuhë (sq.json, en.json), dhe komponentët shkruajnë t("pershendetje") në vend të tekstit direkt — si ky fjalor me SQ/EN.

UI kits for React Native (Paper, Tamagui)

Libraritë e komponentëve për React Native

Libraritë si React Native Paper (Material Design), Tamagui dhe gluestack të japin butona, karta, dialogë dhe fusha të gatshme dhe të bukura për iOS dhe Android.

Uncontrolled components

Komponentët e pakontrolluar

Te një fushë e pakontrolluar, vlerën e mban vetë shfletuesi dhe e lexon kur të duhet — me një ref ose me FormData kur dërgohet formulari. Më pak kod, por React-i s'e di vlerën ndërsa shkruhet.

use (React 19)

use() (React 19) lexon vlerën e një Promise ose të një Context direkt brenda komponentit. Bashkë me Suspense, komponenti „pret“ të dhënat pa useEffect.

useCallback

useCallback e mban të njëjtin funksion mes shfaqjeve, në vend që të krijojë një të ri çdo herë. Ka rëndësi kur ia jep funksionin një komponenti të optimizuar me memo ose e përdor si varësi në useEffect.

useContext

useContext lexon një vlerë nga një Context — p.sh. përdoruesin e kyçur ose temën — pa pasur nevojë ta kalosh me props nëpër shumë nivele.

useEffect

useEffect ekzekuton kod pasi komponenti shfaqet — për gjëra „jashtë“ React-it: kohëmatës, abonime, titullin e faqes, lidhje me API. Sot për marrjen e të dhënave preferohen libraritë si TanStack Query.

useId

useId krijon një ID unike dhe të qëndrueshme për një komponent — e dobishme për të lidhur <label> me <input> përmes htmlFor, edhe kur komponenti shfaqet disa herë në faqe.

useLayoutEffect

useLayoutEffect është si useEffect, por ekzekutohet para se shfletuesi ta vizatojë ekranin. Përdoret rrallë — kur duhet të masësh një element dhe ta pozicionosh para se përdoruesi ta shohë (p.sh. tooltip-et).

useMemo

useMemo e mban mend rezultatin e një llogaritjeje të rëndë dhe e rillogarit vetëm kur ndryshojnë varësitë. Përdore vetëm kur llogaritja është vërtet e ngadaltë — React Compiler shpesh e bën vetë.

useReducer

useReducer është si useState, por për state më të ndërlikuar: shkruan një funksion „reducer“ që merr state-in dhe një veprim („shto“, „fshi“) dhe kthen state-in e ri. E gjithë logjika është në një vend.

useRef

useRef jep një „kuti“ që e mban vlerën mes shfaqjeve pa e rishfaqur komponentin kur ndryshon. Përdoret shumë për të arritur një element DOM — p.sh. për ta fokusuar një fushë.

useState

useState i jep një komponenti memorie: const [vlera, setVlera] = useState(fillimi). Kur thërret setVlera, React-i e rishfaq komponentin me vlerën e re.

useTransition & concurrent rendering

useTransition

useTransition i tregon React-it që një përditësim s'është urgjent — p.sh. filtrimi i një liste të madhe. React-i e mban ndërfaqen të gjallë (shkrimi në fushë mbetet i menjëhershëm) dhe e bën punën e rëndë në sfond.

useWindowDimensions

useWindowDimensions të jep gjerësinë dhe lartësinë e ekranit dhe përditësohet kur telefoni kthehet anash. E përdor për paraqitje që përshtaten — p.sh. dy kolona në tablet, një në telefon.

View (React Native)

<View> është kutia bazë e React Native — si <div> në web. Çdo ekran ndërtohet duke futur View brenda View-ve, dhe në telefon kthehet në elementin vendas të iOS-it ose Android-it.

Virtualized lists (TanStack Virtual)

Listat e virtualizuara

Kur ke 10 000 rreshta, s'i vizaton të gjithë: një listë e virtualizuar shfaq vetëm ata që shihen në ekran dhe i ndërron ndërsa bën scroll. Kështu edhe listat gjigante mbeten të shpejta. FlatList e bën këtë në React Native.

WebView

Një WebView shfaq një faqe interneti brenda aplikacionit tënd — p.sh. kushtet e përdorimit ose një formular pagese. react-native-webview e bën këtë dhe lejon komunikim mes faqes dhe aplikacionit.

Xcode

Xcode është IDE-ja e Apple-it për aplikacione iOS dhe macOS, dhe punon vetëm në Mac. Me React Native e përdor kryesisht për simulatorin e iPhone-it dhe për nënshkrimin — EAS Build mund ta bëjë ndërtimin pa të.

Zustand

Zustand-i është një librari state-i shumë e vogël dhe e thjeshtë: krijon një store me create(), dhe çdo komponent merr vetëm pjesën që i duhet. Shumë popullore si alternativë më e lehtë e Redux-it.