PROWIDIT Education Academy

Bloq
Haqqımızda
Necə işləyir?
FAQ

+994 77 333 38 36 Sınaq dərsi Kabinet

AZ RU EN

Kursu dəyişinReact kursu

Proqramçılar üçün AI kursu104
Alqoritmlər və verilənlər strukturları kursu129
Django & FastAPI kursu140
Docker və Deploy kursu103
Full Stack Developer kursu270
Git & GitHub kursu103
HTML & CSS kursu154
JavaScript kursu169
Laravel kursu136
Operator şəbəkələri: MPLS, BGP və BNG81
Next.js kursu113
Node.js kursu123
PHP kursu144
Python kursu153
React kursu122
SQL və verilənlər bazaları kursu122
TypeScript kursu112
Vue.js kursu111

React ilə tanışlıq
React nədir və nə üçün lazımdır Pulsuz
Vite ilə React layihəsinin yaradılması
Layihənin strukturu: index.html, main.jsx və createRoot
JSX: JavaScript daxilində markup və fiqurlu mötərizələrdə ifadələr
JSX qaydaları: tək kök element, fraqmentlər və ekranda nə göstərilir
Tərtibatçı alətləri: React DevTools və ESLint
Komponentlər və props
Funksional komponentlər: yaradılma, iç-içə yerləşdirmə, import və export
Props: komponentə məlumat ötürülməsi
children və komponentlərin kompozisiyası
Şərti render: if, ternar operator və &&
Siyahıların render edilməsi və açarlar (key)
Təmiz komponentlər və StrictMode
Layihə: komponentlərdən ibarət portfolio səhifəsi
Hadisələr və state
Hadisələrin emalı: onClick, onChange və hadisə obyekti
useState hook-u: komponentin state-i
React ekranı necə yeniləyir: trigger, render və commit
Snapshot kimi state və yeniləyici (updater) funksiya
State-dəki obyektlərin mutasiyasız yenilənməsi
State-dəki massivlərin yenilənməsi: əlavə etmə, silmə, dəyişmə
State-in düzgün strukturlaşdırılması
State-in yuxarı qaldırılması və vahid həqiqət mənbəyi
State-in qorunması və sıfırlanması: ağacdakı mövqe və key
Layihə: sayğac və tapşırıqlar siyahısı (Todo)
Formalar
İdarə olunan sahələr: input və textarea
Select, checkbox və radio ilə iş
Formanın göndərilməsi: onSubmit, preventDefault və FormData
İdarə olunmayan sahələr: defaultValue və fayl yükləmə
Formaların əl ilə validasiyası: xətalar, touched və əlçatan mesajlar
Komponentlərin stilizasiyası
CSS-in qoşulması: className, qlobal və inline stillər
CSS Modules: komponentlər üçün izolyasiya olunmuş stillər
Şərti siniflər və komponent variantları: clsx
Tailwind CSS: Vite-də quraşdırma və utility siniflərin əsasları
Tailwind komponentləri: cn, variantlar və qaranlıq tema
Layihə: filtrlər və sıralama ilə məhsul kataloqu
Ref-lər, effektlər və portallar
useRef: yenidən render-ə səbəb olmayan dəyərlər
Ref vasitəsilə DOM-a müraciət: fokus, scroll və ölçmələr
Prop kimi ref və useImperativeHandle
useEffect: xarici sistemlərlə sinxronizasiya
Effektin asılılıqları: effekt nə vaxt yenidən işə düşür
Effektlərin təmizlənməsi: taymerlər, abunələr və hadisə dinləyiciləri
useEffect-də məlumat yükləmə: loading, xətalar və race condition
Effekt nə vaxt lazım deyil: tipik antipattern-lər
useEffectEvent: hadisələrin effektlərdən ayrılması
Portallar: modal pəncərələr, tooltip-lər və bildirişlər
Layihə: açıq API ilə film axtarışı
useReducer, Context və xüsusi hook-lar
useReducer: state məntiqinin reducer-ə köçürülməsi
Context API: prop drilling olmadan məlumat ötürülməsi
Context və useReducer birlikdə: miqyaslanan state idarəetməsi
Context-in performansı və onun kifayət etmədiyi hallar
Xüsusi hook-lar: məntiqin ayrılması və təkrar istifadəsi
Praktik hook-lar: useLocalStorage, useDebounce, useFetch və digərləri
Komponent pattern-ləri: compound components, render props və HOC
Layihə: useReducer və Context ilə viktorina tətbiqi
Suspense, xəta sərhədləri və React 19
Suspense: yüklənmə zamanı ehtiyat UI
Komponentlərin lazy yüklənməsi və kodun bölünməsi
Sinif əsaslı komponentlər: köhnə (legacy) kod üçün icmal
Xəta sərhədləri (Error Boundaries)
useTransition: keçidlər və asinxron Actions
Formalarda Actions: action prop-u və useFormStatus
useActionState: Action nəticələri və xətalar
useOptimistic: interfeysin optimist yenilənməsi
use() API: promise və kontekstin oxunması
React 19 yenilikləri: sənəd metadata-sı, Activity və resurslar
Layihə: Actions və useOptimistic ilə şərhlər lenti
Marşrutlaşdırma: React Router v7
React Router v7: quraşdırma, rejimlər və ilk marşrutlar
Naviqasiya: Link, NavLink və useNavigate
İç-içə marşrutlar, Outlet və layout marşrutları
Dinamik seqmentlər: marşrut parametrləri və useParams
Sorğu sətrinin parametrləri: useSearchParams və URL-də state
Marşrut məlumatlarının yüklənməsi: loader və useLoaderData
Router-də mutasiyalar: action, Form və useFetcher
Marşrut xətalarının emalı: ErrorBoundary və 404
Qorunan marşrutlar və yönləndirmələr
Layihə: marşrutlaşdırma ilə admin paneli (dashboard)
Server məlumatları: TanStack Query
Tətbiqin API qatı: fetch üçün wrapper və HTTP xətalarının emalı
TanStack Query: server state və ilk useQuery
Sorğu açarları və keş: staleTime, gcTime və təkrar sorğular
Səhifələmə və sonsuz scroll: placeholderData və useInfiniteQuery
Mutasiyalar: useMutation və keşin invalidasiyası
TanStack Query-də optimist yeniləmələr
TanStack Query və React Router: loader-də əvvəlcədən yükləmə və Suspense
Layihə: TanStack Query ilə CRUD qeydlər tətbiqi
Qlobal state: Zustand və Redux Toolkit
State növləri və düzgün alətin seçilməsi
Zustand: sadə qlobal store
Praktikada Zustand: persist, devtools və slice-lar
Redux Toolkit: store, slice-lar, useSelector və useDispatch
Redux-da asinxron məntiq: createAsyncThunk
RTK Query: Redux ekosistemində məlumat yükləmə
Layihə: qlobal state ilə səbəti olan internet mağaza
TypeScript ilə React
React layihəsində TypeScript: react-ts şablonu və tsconfig
Props və children-in tiplənməsi
State və hadisələrin tiplənməsi
useRef, useReducer və Context-in tiplənməsi
Generic komponentlər və xüsusi hook-ların tiplənməsi
Layihə: internet mağazanın TypeScript-ə köçürülməsi
Peşəkar formalar: React Hook Form və Zod
React Hook Form: register, handleSubmit və xətalar
Zod: validasiya sxemləri və məlumat tipləri
React Hook Form və Zod: zodResolver və xəta mesajları
Controller və useFieldArray: kənar komponentlər və dinamik sahələr
Formanın serverə göndərilməsi: isSubmitting, setError və mutasiyalar
Layihə: çoxaddımlı müraciət forması
Performans
Komponent niyə yenidən render olunur: səbəblər və artıq render-lər
Profilləşdirmə: React DevTools Profiler və Performance tracks
memo və useMemo: render-lərin ötürülməsi və hesablamaların keşlənməsi
useCallback və memoizasiyanın zərərli olduğu hallar
React Compiler: avtomatik memoizasiya
useDeferredValue: ağır render zamanı interfeysin cəldliyi
Uzun siyahıların virtualizasiyası
Testləşdirmə: Vitest və React Testing Library
Vitest: quraşdırma və ilk testlər
React Testing Library: render və elementlərin axtarışı
Testlərdə qarşılıqlı əlaqə: user-event və mock funksiyalar
Asinxron testlər və MSW ilə API mock-u
Provider-lər, router və xüsusi hook-larla testlər
Layihə: internet mağazanın testlərlə əhatə olunması
Production: əlçatanlıq, autentifikasiya və deploy
Əlçatanlıq (a11y): semantika, ARIA və fokusun idarə olunması
React tətbiqinin arxitekturası: feature-lara görə struktur və alias-lar
Vite-də mühit dəyişənləri: .env faylları və build rejimləri
JWT ilə autentifikasiya: giriş, tokenin saxlanması və sessiya
Tokenlərin yenilənməsi: refresh token və 401 xətasında sorğunun təkrarı
Build və deploy: Vercel və Netlify
Server Components icmalı: Next.js-ə körpü
Final layihə: tam funksional React tətbiqi

React kursu · Komponentlərin stilizasiyası

Şərti siniflər və komponent variantları: clsx

🔒 Bu, dərsin əvvəlidir. Tam versiyası abunə ilə əlçatandır.

Hesab yarat Daxil ol

← Əvvəlki dərs🔒 CSS Modules: komponentlər üçün izolyasiya olunmuş stillər Növbəti dərs →🔒 Tailwind CSS: Vite-də quraşdırma və utility siniflərin əsasları

PROWIDIT Education Academy

Bakıda onlayn proqramlaşdırma kursları. Canlı dərslər, 80% praktika, mentor dəstəyi və işə düzəlməyə kömək.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Alqoritmlər Django & FastAPI Node.js Full Stack

Alətlər və AI

Git & GitHub Docker və Deploy Proqramçılar üçün AI

Faydalı

Pulsuz sınaq dərsi Mentorluq və müsahibəyə hazırlıq Şirkətlər üçün Bloq FAQ

Əlaqə

+994 77 333 38 36 info@prowid.com Video dərslər Müraciət göndər

© 2021 – 2026 Prowid — IT Education Academy. Bütün hüquqlar qorunur. Bakı, Azərbaycan