---

React.js o'zbek tilida to'liq kurs.

1-dars. 💎

Kursga kirish

Reja:

• Node.js nima?

  JavaScript kodlarimizni browserdan tashqarida ishlatishga imkon beruvchi environment.

  information

• npm (Node Package Manager) nima?

  Node.js.ga kiritilgan paketlar menejeri.

  Umuman olganda, paket bizning ilovamizga ba'zi funktsiyalarni qo'shishga yordam beradigan bitta fayl yoki ko'p kodli fayllardan iborat bo'lgan va hamma uchun ochiq bo'lgan kodlar toplami.

  exp: Express.js, Axios.js

  information

• SPA (Single-page application) nima?

  Bir sahifali app (SPA)-bu veb-brauzerning yangi sahifalarni yuklashning odatiy usuli o'rniga, joriy veb-sahifani veb-serverdan yangi ma'lumotlar bilan dinamik ravishda qayta yozish orqali foydalanuvchi bilan o'zaro aloqada bo'ladigan veb-app yoki veb-sayt.

  SPA frameworks examples: React, Angular, Vue, Svelte

  information

• React nima?

  React - bu foydalanuvchi interfeyslarini yasash uchun JavaScript kutubxonasi. React yangicha tildan foydalanadi u qaysiki unda HTML va JavaScriptni aralashtirib yozish mumkin.

  React projects examples: Facebook.js, Instagram.com

  information

• create-react-app ni kompiyuterga sozlash.

  // create-react-app ni o'rnatish
  npm install create-react-app -g
  
  npm               ->  node package manager
  install           ->  install
  create-react-app  ->  node package nomi
  -g                ->  globall
  
  // versiyasini aniqlash
  create-react-app --version
  
  // yangi react app ni o'rnatish
  npx create-react-app my-app

• Reactda file structure

  1. Default directory

  2. node_modules faylining ichida node packagelar kodlari saqlanadi.

  3. public fayilining ichida asosiy public ma'lumotlar saqlanadi

  4. src fayilining ichida dasturimizning asosiy source kodlari saqlanadi.

• React componentlar

  React component based dizayinda tuziladi, yani Reactda hamma narsa component.

• package json

• nodemon

• https://learn.javascript.ru/import-export

componentlardan foydlanish

fragment

html taglar orasida JS o'zgaruvchilardan foydalanish interpolation

---

2-dars. 💎💎

Reja:

1. File Architechture: Assets | Images | Fonts | Lib
2. Node Sass npm i node-sass
3. styling
4. Props , Children
5. useState , 👉 Batafsil o'qish
6. map , key

Uyga vazifa:

1. amaliyot

3-dars.

1. useState , 👉 Batafsil o'qish. takrorlash
2. Vite v3 vs Reactjs (FAST SPEED RENDERING)
3. Todo App ni boshlash.
4. useRef , 👉 Batafsil o'qish
5. Forms
6. Conditional rendering

4-dars.

1. useRef , 👉 Batafsil o'qish (takrorlsh)
2. componentLifecycles 👉 Batafsil o'qish
3. useEffect , 👉 Batafsil o'qish
4. fetch vs axios
5. REST API ,
6. React ROUTER DOM ga kirish 👉 Batafsil o'qish

5-dars.

1. Props drilling
2. Error handling in React best practices
3. useContext , 👉 Batafsil o'qish
4. Multilanguage app
5. Dark / Light mode

6-dars.

1. Nested Routes
2. useParams , useNavigate , useLocation , OutLet . . .
3. JSON SERVER
4. C R U D (application) (fetch vs axios)

7-dars.

1. Custom API methods Architechture
2. Dynamic paging
3. Custom Hook
4. React memo
5. useId

---

8-dars.

1. Authentication
2. Public routes
3. Protected routes

9-dars.

1. React.Memo() (useMemo) 👉 Batafsil o'qish
2. useCallback 👉 Batafsil o'qish
3. useReducer
4. Hook useLayoutEffect
5. Hook useImperativeHandle

10-dars.

0. repetition Advanced Hooks
1. Prop types
2. Styled Component
3. MATERIAL UI , REACT SUITE (UI KITS)
4. React js BEST practices 👉 Batafsil o'qish

11-dars.

1. REDUX BASIC
2. Store vs createStore
3. Payload bilan ishlash
4. useSelector
5. reducer & action yozish
6. redux Developer tools (exstension)
7. Redux Toolkit (o'qib bajaramiz), 👉 Redux Toolkit 10 qadamda o'rganamiz

12-dars.

1. Redux Thunk
2. Redux Toolkit. ConfigureStore
3. Redux Toolkit. CreateAction
4. Redux Toolkit. CreateReducer
5. Redux Toolkit. CreateSlice
6. reducer & action yozish
7. redux Developer tools (exstension)
8. Redux Toolkit. CreateAsyncThunk
9. Redux Tooklit. CreateEntityAdapter

13 -dars

o'rganish tavfsiya etiladi quyidagilar mavzu sifatida.

1. JWT token
2. Next.js
3. Redux Saga
4. Redux Toolkit
5. Zustand vs Mobx

Qo'shimcha Feedbacklar reduxni takrorlash bo'yicha.