#Zustand

⚡️ Zustand: Eng Sodda State Management Kutubxonasi 🐻

Agar Redux sizga juda murakkab tuyulsa, yoki Context bilan ishlashdan charchagan bo‘lsangiz — Zustand sizning do‘stingiz. 🐻
Zustand — bu:
✔️ Minimal (faqat 1kb)
✔️ Qulay API
✔️ Hech qanday boilerplate yo‘q
✔️ React ichida yoki tashqarida ishlaydi

❗️ Qanday ishlaydi?
O‘rnatish:

npm install zustand

❗️ State yaratish

import { create } from "zustand";

// Store yaratamiz
const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

❗️ Komponent ichida ishlatish

function Counter() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>➕</button>
      <button onClick={decrease}>➖</button>
    </div>
  );
}

Nega Zustand❔

🤍Oddiy: Redux’dagi kabi “action”, “reducer”, “boilerplate” yo‘q.
🤍Global State: Prop drilling yo‘qoladi.
🤍Performans: Faqat kerakli komponent qayta render qilinadi.
🤍React tashqarisida ham ishlaydi (masalan, vanilla JS bilan).

🔥 Xulosa: Agar siz kichikdan tortib katta loyihalargacha tezkor va minimal state management istasangiz — Zustand sizga mos. 🐻💡

Telegram | YouTube

#React

👩‍💻 React Router DOM – SPA’da Navigatsiya Qutqaruvchisi.

React ilovalaringizni bir nechta sahifali ko‘rsatish uchun qayta yuklamasdan ishlashni xohlaysizmi? 👩‍💻
react-router-dom – aynan shuning uchun bor.
🔺 Asosiy tushunchalar:

• Router – butun ilovani o‘raydi.
• Route – path → element mosligi.
• Link/NavLink – sahifalar orasida o‘tish (reloadsiz).
• useNavigate – dasturiy navigatsiya.
• useParams / useSearchParams – URL parametrlar va query string.
• Outlet – nested yo‘llar uchun joy.

⚡️ Oddiy misol:

<BrowserRouter>
  <nav>
    <Link to="/">Home</Link> | <Link to="/about">About</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="*" element={<h1>404</h1>} />
  </Routes>
</BrowserRouter>

📌 Kuchli imkoniyatlar:

• Nested routes → Layout + <Outlet>
• Dynamic params → /posts/:id → useParams()
• useNavigate → tugmadan boshqa sahifaga o‘tish
• useSearchParams → qidiruv, filter, pagination
• Protected routes → login bo‘lmasa redirect

✅ Amaliy maslahatlar

404 uchun path="*" qo‘shing.
URL’ni “haqiqat manbai” sifatida ishlating.
NavLink yordamida aktiv havolani belgilash mumkin.

💡 Xulosa:
react-router-dom – React ilovalaringizni ko‘p sahifali va tartibli qilish uchun eng muhim kutubxona.

Telegram | YouTube

#Redux

👩‍💻 Redux – Katta React Ilovalarida Davlatni (State) Boshqarish

React’ning o‘zida ham state bor. Lekin ilova kattalashsa — komponentdan komponentga prop uzatish, global state boshqarish 😵‍💫 juda chalkash bo‘lib ketadi.
👉 Shu joyda Redux sahnaga chiqadi.

💠 Redux nima?
• Ilovaning butun state’ini bitta joyda (store) saqlaydi.
• Komponentlar o‘sha state’ni olishi yoki yangilashi mumkin.
• Predictable (bashorat qilinadigan) — qayerdan qanday o‘zgarish kelayotganini ko‘rasiz.

⚙️ Asosiy tushunchalar
• Store → barcha state shu yerda.
•Action → nima qilish kerakligini bildiruvchi obyekt.
• Reducer → action kelganda state qanday o‘zgarishini aniqlaydi.
• Dispatch → action’ni ishga tushirish.
• Selector → store’dan kerakli qiymatni olish.

🚀 Redux qachon kerak?
• Katta loyihalar, ko‘plab komponentlar global state’dan foydalanadigan joylarda.
• Auth (foydalanuvchi login/logout)
• Shopping cart, chat ilovalari
• Ko‘p joydan bir xil ma’lumotga murojaat qilish kerak bo‘lsa.

✅ Redux Toolkit – hozirgi kunda Redux’ni osonroq va qisqaroq kod bilan yozish uchun ishlatiladigan eng mashhur yechim.


💡 Xulosa: Redux — katta va murakkab React loyihalari uchun state boshqaruvining kuchli quroli.

Telegram | YouTube

💬 HTTP Status Kodlari – React yoki Webda tez-tez uchraydiganlari.

1️⃣ 200 – OK
Hammasi joyida ✅ So‘rov muvaffaqiyatli bajarildi.

2️⃣ 201 – Created
Yangi resurs yaratildi 📂 Masalan: yangi user ro‘yxatdan o‘tdi.

3️⃣ 400 – Bad Request
So‘rov noto‘g‘ri yuborilgan ❌ Masalan: formani xato to‘ldirish.

4️⃣ 401 – Unauthorized
Avtorizatsiya kerak 🔐 Masalan: login qilmasdan profilga kirishga urinish.

5️⃣ 403 – Forbidden
Ruxsat yo‘q 🛑 Hamma narsa to‘g‘ri, lekin huquqingiz yetmaydi.

6️⃣ 404 – Not Found
Topilmadi 🔍 Masalan: mavjud bo‘lmagan sahifaga kirish.

7️⃣ 500 – Internal Server Error
Serverning o‘zi xatolik berdi 💥 Masalan: backend kodida nosozlik.

💡 Ushbu status kodlari frontend va backend o‘rtasida til bo‘lib xizmat qiladi.
React’da ham API chaqirganda eng ko‘p shu kodlarni ko‘rasiz.

Telegram | YouTube

🧠 Kod intervyularida 7 bosqichli reja — qisqacha va amaliy

Intervyu stress? To‘g‘ri yondashsangiz natija yaxshilanadi. Quyidagi 7 bosqich men va ko‘pchilikka yordam bergan — oddiy, tartibli va samarali.

Eshitish
— Vazifani diqqat bilan tinglang. Suhbat beruvchining har bir tafsiloti muhim bo‘lishi mumkin.
— Savollar so‘rang: kutilayotgan input hajmi? chegaralar? edge-case’larni qanday ko‘rish kerak?

Misol yaratish
— Muammoni yaxshi ifodalovchi real misol tuzing (juda oddiy emas, lekin hammasini qamrab olsin).
— Intervyuerga “Bu misol muammo uchun to‘g‘rimi?” deb tekshirishni taklif qiling.

Brute force (oddiy ishlaydigan yechim)
— Avval ishlaydigan — hatto sekin — yechimni taklif qiling va uning murakkabligini ayting.
— Bu xatoliklarni kamaytiradi va keyingi optimizatsiya uchun poydevor beradi.

Optimize (BUD qoidasi)
— Bottlenecks (sekin joylarni aniqlang)
— Unnecessary work (keraksiz amallarni olib tashlang)
— Duplicated work (takror ishlarni bartaraf eting)
— Strukturalar va time–space trade-off’larni ko‘rib chiqing (hash map, stack, DP…).

Walk through (qadam-baqadam o‘tish)
— Algoritmni og‘zaki yoki qog‘ozda bir qadamdan keyingi qadamga ochib bering.
— Bu kodlashda kam xato qilishga yordam beradi va intervyuerga fikringizni ko‘rsatadi.

Kodlash
— Modular, o‘qilishi oson kod yozing; ma’noli o‘zgaruvchi nomlari; yuqori darajadan pastgacha yozish (helper funksiyalar).
— Yozish davomida izohlang — nimani va nega qilayotganingizni ayting.

Testlash
— Kodni qat’iy tekshirib chiqing: sintaksis, loop shartlari, indekslash, edge-case’lar.
— Oddiy test misollari bilan ishga tushiring va topilgan xatolarni tizimli tuzating.

Bonus: Kod ko‘rib chiqish va sifatni oshirish uchun AI yordamchilari (masalan, CodeRabbit) tez fikr, taklif va avtomatik tuzatishlar bilan vaqtni qisqartirishi mumkin — ochiq manbali repolar uchun bepul variantlar ham bor.

💡 Xulosa: Ha — rostan ham foydali.
Nega? Chunki strukturali yondashuv (tinglash → misol → ishlaydigan yechim → optimizatsiya → tekshirish) intervyuda sizni tartibli, ishonchli va tez moslashuvchi qilib ko‘rsatadi.

Telegram | YouTube

🔄 API Development o‘rganishda asosiy mavzular

Bugungi dasturlash olamida API deyarli hamma joyda ishlatiladi: web ilova, mobil ilova yoki hatto aqlli qurilma bo‘lsin. Shuning uchun API development — har bir dasturchi uchun zarur ko‘nikma.

Keling, bosqichma-bosqich mavzular xaritasini tuzib chiqamiz:

🔹 1. API Fundamentals (Asoslar)
• API nima va qanday ishlashini tushunish.
• Turlari:

• REST (eng mashhur, HTTP metodlarga asoslangan)
• SOAP (XML-based, eski tizimlarda ishlatiladi)
• GraphQL (faqat kerakli ma’lumotni olish imkoniyati)
• gRPC (Google’dan yuqori unumdor API framework)

• API vs SDK farqini bilib olish.

🔹 2. Requests va Responses (So‘rovlar va Javoblar)
• HTTP metodlari: GET, POST, PUT, DELETE, PATCH.
• Status kodlari:

200 OK → Muvaffaqiyatli
201 Created → Yaratildi
400 Bad Request → Noto‘g‘ri so‘rov
401 Unauthorized → Ruxsat yo‘q
404 Not Found → Topilmadi
500 Internal Server Error → Server xatosi

• Headers: Content-Type, Authentication token va h.k.

🔹 3. Authentication va Security (Xavfsizlik)
• API kalitlari (API Keys)
• Basic Auth (oddiy, lekin xavfsiz emas)
• OAuth 2.0 (Google bilan sign-in)
• JWT (stateless session tokenlari)
Qo‘shimcha: HTTPS, CORS, Rate limiting, Input validation.

🔹 4. API Design & Development
• RESTful prinsiplari:

• /users/123/orders kabi resursga asoslangan URL
• To‘g‘ri HTTP metodlar
• Stateless requestlar
• Versioning (/v1/users)
• Pagination (?page=2&limit=50)

• Asboblar:

• OpenAPI (Swagger) – hujjatlashtirish
• Postman, Insomnia – test va eksploratsiya

🔹 5. API Testing
• Postman, cURL, SoapUI, Newman kabi vositalar.
• Test qilish: status kodlar, ma’lumot aniqligi, auth flow, xato ishlov berish, performance.

🔹 6. Deployment & Integration
• API’ni AWS, Azure, Heroku kabi platformalarda deploy qilish.
• API Gateway’lar (routing, auth, caching, rate limiting):

• AWS API Gateway, Kong, Apigee

• API iste’mol qilishni turli tillarda mashq qilish:

• JS (fetch, Axios)
• Python (requests)
• Java (Retrofit, RestTemplate)

• Mashhur public API’lar bilan amaliyot: Google Maps, Stripe, Spotify, OpenWeather.

💬 Xulosa: Agar API developmentni shunday bosqichma-bosqich o‘rgansangiz, nafaqat API yozishni, balki uni sinash, xavfsiz qilish, deploy qilish va real ilovalarga integratsiya qilishni ham puxta egallaysiz.

Telegram | YouTube

🟡 10ta Eng Foydali Frontend UI & Animation Kutubxonalar

Bugungi frontend rivojlanishida vaqtni tejash va professional dizayn qilish uchun quyidagi kutubxonalar juda qo‘l keladi ⬇️

🎨 Design & Component Libraries

Tailark – Shadcn UI asosida tayyor marketing bloklari (hero, pricing, testimonials). Tez landing page qilish uchun ideal.
Shadcn.io – 200+ bepul React komponentlari (TypeScript + Tailwind + Radix UI). CLI orqali tez integratsiya.
SVGL – Eng katta SVG logotiplar kolleksiyasi. Demo, portfolio va client loyihalarda kerak bo‘ladi.
Skiper UI – Tailwind + Framer Motion asosidagi animatsiyali komponentlar (AI input, card carousel). Zamonaviy va “pop” effektlar.
Shadcn Extension – Shadcn UI uchun qo‘shimcha maxsus komponentlar.

🎬 Animation & Motion

Motion Primitives – Professional animatsiyali UI komponentlar. Ishonchli UX uchun juda yaxshi.
Animate UI – Shadcn bilan integratsiyalashgan animatsiyali komponentlar (dynamic background, animated text).

⛏ Specialized Tools

ReactBits.dev – React uchun komponentlar va resurslar hub’i.
Kibo UI – Enterprise darajadagi kengaytmalar: Gantt chart, Kanban, color picker, roadmap vizualizatsiya.
Magic UI – 150+ animatsiyali React komponentlar. ⭐️ (18k+ GitHub stars). Landing page uchun top tanlov.

❔ Nima uchun kerak?

Vaqt tejash – tayyor komponentlar
Sifat – accessibility va performance yuqori
Consistency – UI bir xil uslubda bo‘ladi
Zamonaviy standartlar – TypeScript, Tailwind, Motion
Community support – muntazam yangilanib boradi

💬 Qanday boshlash kerak?

Tez prototip → Magic UI / Shadcn.io
Marketing sayti → Tailark + Motion Primitives
Murakkab ilova → Kibo UI + Shadcn
Animatsiya → Motion Primitives / Animate UI

💡 Xulosa: Bu kutubxonalar nafaqat trendy, balki real muammolarni hal qiladigan vositalar. To‘g‘ri kombinatsiya qilsangiz, professional va zamonaviy web loyihalarni tez va samarali yaratishingiz mumkin. 🚀

Telegram | YouTube

#JS

👩‍💻 JavaScriptga kirish: Nima va qayerda ishlatiladi? ✦

JavaScript — bu dasturlash tili bo‘lib, asosan veb-sahifalarga interaktivlik qo‘shish uchun ishlatiladi.
Agar HTML sahifamiz tana bo‘lsa, CSS uning kiyimi, JavaScript esa unga jon baxsh etadigan miya 🧠 hisoblanadi.

⚙️ JavaScript nima qiladi?
🔸 Tugma bosilganda animatsiya yoki hodisa chiqaradi
🔸 Formadagi ma’lumotlarni tekshiradi
🔸 Veb-sahifaga dinamik o‘zgarishlar kiritadi (masalan, yangilanayotgan vaqt, slayder, modal oynalar)
🔸 Server bilan ma’lumot almashadi (chat dasturlari, onlayn xarid savatchasi)
🔸 Ma’lumotlar bilan hisob-kitob va manipulyatsiya qiladi

🌐 Qayerda ishlatiladi?

Frontend (React, Vue, Angular kabi frameworklarda)
Backend (Node.js orqali server dasturlarida)
Mobil ilovalar (React Native orqali)
Desktop dasturlar (Electron orqali, masalan, VS Code)
O‘yinlar 🎮 (Phaser.js kabi kutubxonalar yordamida)
Sun’iy intellekt 🤖 (TensorFlow.js orqali)
IoT qurilmalari (masalan, Arduino bilan JS orqali boshqarish)

❔ JavaScript nega muhim?
1. Hamma brauzerlar uni qo‘llab-quvvatlaydi
2. Juda kuchli ekotizim (minglab kutubxonalar va frameworklar mavjud)
3. Oson o‘rganiladi va yangi boshlovchilar uchun mos
4. Dunyoda eng ko‘p ishlatiladigan dasturlash tillaridan biri

🟡 Xulosa: JavaScript — bu eng mashhur va kuchli dasturlash tili bo‘lib, uni bilgan dasturchi frontenddan backendgacha, mobil ilovadan o‘yinga qadar turli loyihalarni yaratishi mumkin.🚀

Telegram | YouTube

#JS

👩‍💻 DevTools bilan tanishish: Console va Inspector

Dasturchi uchun brauzer — oddiy internet ko‘ruvchi emas, balki qudratli laboratoriya!
Shu laboratoriyaning eng muhim asboblaridan biri — DevTools.

⛏ DevTools nima?
DevTools — bu brauzer ichida yashiringan maxsus dasturchi asboblari bo‘lib, ular orqali:

Sahifangiz qanday ishlayotganini tekshirishingiz,
Koddagi xatolarni aniqlashingiz,
Dizaynni real vaqtda o‘zgartirishingiz mumkin.

🔍 Inspector (Tekshiruvchi)
Inspector orqali siz:

HTML va CSS kodini to‘g‘ridan-to‘g‘ri sahifada ko‘rasiz
Matn, rang yoki dizaynni real vaqtda o‘zgartirasiz
Responsive rejimda turli qurilmalarda sayt qanday ko‘rinishini tekshirasiz

Masalan: fon rangini o‘zgartirib, “demo” qilishingiz mumkin — ammo bu faqat sizning brauzeringizda amal qiladi

💻 Console (Konsol)
Console esa dasturchining “sirli daftariga” o‘xshaydi:

Kod yozib sinab ko‘rishingiz mumkin
Xatoliklar (error, warning) ko‘rinadi ⚠️
console.log() yordamida ma’lumotlarni chiqarib, kuzatib borasiz

Masalan:

console.log("Salom, DevTools!");

degan kodni yozsangiz, natija konsolda chiqadi. ✨

🟡 Xulosa
Inspector — ko‘rish va dizayn o‘zgartirish uchun,
Console — sinash va xatoliklarni topish uchun.

DevTools — bu dasturchining birinchi yordam qutisi . Uni o‘zlashtirsangiz, dasturlash jarayoni ancha tez va qiziqarli bo‘ladi! 🚀

❔ Siz ko‘proq Inspectordan foydalanasizmi yoki Consoledan?

Telegram | YouTube

#JS

👩‍💻 JavaScript’da O‘zgaruvchilar: var, let, const

JavaScript’da ma’lumotlarni saqlash uchun o‘zgaruvchilardan foydalanamiz. Ularni e’lon qilishning 3 usuli bor:

1️⃣ var — eski usul
- ES6 (2015) gacha faqat var ishlatilgan
- Function scope ga ega (faqat funksiyada cheklangan)
- Qayta e’lon qilish ham, qiymatini o‘zgartirish ham mumkin 🔄
- Kamchilik: xotiraga “yopishib” qoladi, chalkashlik keltirib chiqarishi mumkin

📌 Misol:

var ism = "Ali";
var ism = "Vali"; // qayta e’lon qilish mumkin

2️⃣ let — zamonaviy va xavfsizroq
- Block scope ga ega ({} ichida ishlaydi)
- Qiymatini o‘zgartirish mumkin, lekin qayta e’lon qilib bo‘lmaydi 🚫
- Amaliyotda ko‘p ishlatiladi

📌 Misol:

let yosh = 20;
yosh = 21; // qiymatini o‘zgartirish mumkin

3️⃣ const — o‘zgarmas qiymat
- Block scope ga ega
- Qiymati bir marta beriladi va o‘zgartirib bo‘lmaydi ❌
- Odatda doimiy qiymatlar uchun ishlatiladi (masalan, PI, API_URL)

📌 Misol:

const PI = 3.14;

🟡 Xulosa
- var — eski, hozir ishlatish tavsiya etilmaydi ❌
- let — o‘zgaruvchan qiymatlar uchun eng ko‘p ishlatiladigan usul 🔄
- const — o‘zgarmas qiymatlar uchun doimiy tanlov 🔐

💡 Oddiy qoida:
Avval const dan foydalaning, agar qiymat o‘zgarishi kerak bo‘lsa, let ga o‘ting.

Siz odatda ko‘proq let dan foydalansizmi yoki const dan? 🤔

Telegram | YouTube

#JS

👩‍💻 JavaScript’dagi Primitive turlar

JavaScript’da ma’lumotlar ikki turga bo‘linadi:
➡️ Primitive (asosiy)
➡️ Non-primitive (murakkab)

Bugun primitive turlar haqida gaplashamiz 👇

1️⃣ number — raqamli qiymatlar
Matematik hisob-kitoblar uchun ishlatiladi.
📘 Misol:

let yosh = 20;
let narx = 15.5;

💬 Har ikkalasi ham number turi hisoblanadi (butun yoki o‘nlik farqi yo‘q).

2️⃣ string — matnli qiymatlar
Qo‘shtirnoq yoki backtick (`) ichida yoziladi.
📘 Misol:

let ism = "John";
let salom = 'Salom, dunyo!';
let xabar = `Bugun ${new Date().getFullYear()}-yil`;

💬 String’lar bilan ishlashda + orqali birlashtirish yoki template literal (${}) ko‘p ishlatiladi.

3️⃣ boolean — mantiqiy qiymat
Faqat ikkita qiymat oladi:
✅ true — ha
❌ false — yo‘q
📘 Misol:

let kattaYosh = true;
let kichikYosh = false;

💬 Ko‘pincha shartlarda ishlatiladi (if, while va hokazo).

4️⃣ null — bo‘sh qiymat
Ma’lumot yo‘qligini atayin ko‘rsatadi.
📘 Misol:

let natija = null; // hozircha qiymat yo‘q

💬 Bu “bo‘sh joyni” anglatadi, lekin o‘zi mavjud.

5️⃣ undefined — belgilanmagan qiymat
O‘zgaruvchi e’lon qilingan, lekin qiymat berilmagan.
📘 Misol:

let ism;
console.log(ism); // undefined

💬 Ko‘pincha “hali qiymat berilmagan” degani.

6️⃣ symbol — noyob qiymat
Har bir symbol o‘ziga xos va takrorlanmas qiymatga ega 🔑
📘 Misol:

let id = Symbol("id");
let id2 = Symbol("id");
console.log(id === id2); // false

💬 Symbol’lar maxfiy identifikatorlar yaratishda ishlatiladi (masalan, object ichida).

7️⃣ bigint — juda katta sonlar uchun
🔢 number 2⁵³−1 gacha sonlarni saqlaydi, undan kattaroq qiymatlar uchun bigint ishlatiladi.
📘 Misol:

let kattaSon = 123456789012345678901234567890n;

💬 E’tibor bering: oxirida n qo‘shiladi.
Bu sonlarni aniqlikni yo‘qotmasdan saqlashga yordam beradi.

⚙️ Xulosa
🧠 Primitive turlar — 7 ta:

number
bigint
string
boolean
null
undefined
symbol

Ular o‘zgarmas (immutable) bo‘ladi va JavaScript’ning eng asosiy ma’lumot turlaridir.

💬 Siz undefined bilan null ni aralashtirib yuborgansizmi hech? 😅

Telegram | YouTube

***

🥳 Yilni nima bilan yakunlaymiz, albatta branch bilan :)👏

Happy Coding 🎆

Telegram | YouTube