React kursi

Eng mashhur UI kutubxona. Komponentlar, hooks, state management va React ekotizimi.

O'rta · 90 ta dars · ~2 oy

Mavzular: JSX, Komponentlar, Props va State, Hooks, useEffect, Context API, React Router, Forms, Performance, Testing

Kirish va Asoslar

1. React nima? Nima uchun kerak, Virtual DOM qanday ishlaydi
2. Loyiha yaratish — Vite + React, tuzilishi, package.json
3. JSX — nima, JavaScript dan farqi, qoidalar
4. JSX — expression, conditional rendering, list rendering
5. Component — nima, Function Component, nima uchun kichik bo'laklarga bo'lamiz
6. Props — yuborish, qabul qilish, default qiymat, children
7. Props — readonly nima uchun, prop drilling muammosi

Hooks — Asosiy

1. useState — state nima, qanday ishlaydi, re-render tushunchasi
2. useState — ob'ekt va massiv state, nima uchun spread kerak
3. useEffect — nima, qachon ishlaydi, dependency array
4. useEffect — cleanup funksiya, nima uchun kerak
5. useEffect — asinxron funksiya, fetch bilan ishlash
6. useRef — DOM ga murojaat, focus, scroll
7. useRef — re-render bo'lmasdan qiymat saqlash, useState farqi
8. useMemo — qimmat hisoblashlarni keshlash, qachon kerak
9. useCallback — funksiyani keshlash, qachon kerak, useMemo farqi

Hooks — Ilg'or

1. useContext — Context nima, Provider, Consumer
2. useContext — global state, prop drilling muammosini hal qilish
3. useReducer — nima, useState dan farqi, qachon ishlatiladi
4. useReducer — action, dispatch, reducer funksiya
5. useReducer + useContext — o'z state manager ini yozish
6. useLayoutEffect — useEffect dan farqi, qachon kerak
7. useId — unique ID yaratish, accessibility uchun
8. Custom Hook — nima, qanday yoziladi, qoidalar
9. Custom Hook — useFetch, useLocalStorage, useDebounce

Component Patterns

1. Conditional Rendering — if/else, &&, ternary, null qaytarish
2. List Rendering — map, key nima uchun muhim, index ishlatmaslik
3. Controlled Component — input, select, textarea bilan ishlash
4. Uncontrolled Component — useRef bilan, qachon kerak
5. Component Composition — children, slot pattern
6. Higher Order Component — HOC nima, qachon kerak
7. Render Props pattern
8. Compound Component pattern
9. Forward Ref — ref ni child componentga uzatish

Stilizatsiya

1. CSS Modules — nima, qanday ishlaydi, global va local
2. Styled Components — CSS in JS, props bilan dinamik stil
3. Tailwind CSS — React bilan sozlash, classNames kutubxonasi
4. clsx va classnames — dinamik class boshqarish

Routing

1. React Router nima, o'rnatish, asosiy tushunchalar
2. BrowserRouter, Routes, Route — tuzilishi
3. Link, NavLink — a tegidan farqi, active holat
4. useNavigate — dasturiy navigatsiya
5. useParams — URL parametrlarni olish
6. useSearchParams — query parametrlar bilan ishlash
7. Nested Routes — ichma-ich route lar, Outlet
8. Protected Route — faqat login qilganlar uchun
9. Lazy Loading — Route larni bo'laklash, Suspense bilan

Ma'lumot olish

1. Fetch va Axios — React da HTTP so'rovlar
2. Loading, Error, Success holatlari boshqarish
3. Race Condition — nima, qanday hal qilinadi, AbortController (tez kunda)
4. TanStack Query — nima uchun kerak, o'rnatish (tez kunda)
5. TanStack Query — useQuery, isLoading, isError, data (tez kunda)
6. TanStack Query — useMutation, invalidateQueries (tez kunda)
7. TanStack Query — caching, refetching, pagination (tez kunda)
8. TanStack Query — Optimistic Update (tez kunda)

State Boshqarish

1. State boshqarish muammolari — qachon global state kerak (tez kunda)
2. Zustand — o'rnatish, store yaratish, ishlatish (tez kunda)
3. Zustand — async action, middleware, devtools (tez kunda)
4. Redux Toolkit — nima, Zustand dan farqi, qachon kerak (tez kunda)
5. Redux Toolkit — slice, reducer, action (tez kunda)
6. Redux Toolkit — createAsyncThunk, RTK Query (tez kunda)

Formalar

1. HTML forma bilan ishlash — onSubmit, preventDefault (tez kunda)
2. React Hook Form — o'rnatish, register, handleSubmit (tez kunda)
3. React Hook Form — validation, error xabarlar (tez kunda)
4. React Hook Form — Zod bilan schema validation (tez kunda)
5. React Hook Form — murakkab formalar, massiv maydonlar (tez kunda)

Performance

1. React rendering qanday ishlaydi — reconciliation, diffing (tez kunda)
2. React.memo — component ni keshlash, qachon kerak (tez kunda)
3. Code Splitting — dynamic import, lazy, Suspense (tez kunda)
4. Virtualization — react-virtual, katta ro'yxatlar (tez kunda)
5. React Profiler — sekin componentlarni topish (tez kunda)
6. Bundle Size — tahlil qilish, optimizatsiya (tez kunda)

Testing

1. Testing nima uchun kerak, qanday turlari bor (tez kunda)
2. Vitest — o'rnatish, birinchi test (tez kunda)
3. React Testing Library — render, screen, userEvent (tez kunda)
4. React Testing Library — async testlar, mock (tez kunda)
5. React Testing Library — Custom Hook testlash (tez kunda)
6. MSW — API mock qilish, real so'rovlarsiz test (tez kunda)

Ilg'or mavzular

1. Error Boundary — xatolarni ushlash, fallback UI (tez kunda)
2. Portals — modal, tooltip uchun, DOM dan tashqariga chiqish (tez kunda)
3. Suspense — data fetching, skeleton UI (tez kunda)
4. Concurrent Features — useTransition, useDeferredValue (tez kunda)
5. Server Components — nima, Client Components dan farqi (tez kunda)
6. Strict Mode — nima uchun kerak, double render sababi (tez kunda)

Ekotizim va Amaliyot

1. Axios Interceptor — token qo'shish, xatolarni markaziy ushlash (tez kunda)
2. i18n — react-i18next bilan ko'p tilli ilova (tez kunda)
3. PWA — React da Progressive Web App (tez kunda)
4. React bilan real loyiha arxitekturasi — papkalar tuzilishi (tez kunda)
5. React bilan real loyiha — API layer, hooks layer, UI layer (tez kunda)
6. Deployment — Vercel, Netlify ga deploy qilish (tez kunda)