Chapter 0 — JavaScript Asoslari React uchun

React 100% JavaScript ustiga qurilgan. Bu bobda React kodida doimo uchraydigan JS conceptlarni React kontekstida ko'rib chiqamiz.

---

0.1 Destructuring

Simple Explanation

Destructuring — obyekt yoki massivdan qiymatlarni to'g'ridan-to'g'ri o'zgaruvchilarga ajratib olish usuli.

Why Does It Exist?

React'da deyarli har bir komponent props'ni destructuring orqali qabul qiladi — bu kodni qisqa va o'qilishi oson qiladi.

Example

App.jsx
React JSXNusxalash
01function UserCard({ name, age }) {
02  return <p>{name} — {age}</p>;
03}

How It Works

props obyektidan name va age maydonlari to'g'ridan-to'g'ri parametr sifatida ajratib olinadi — bu const { name, age } = props; yozishga teng.

0.2 Spread Operator

Simple Explanation

... — obyekt yoki massivning barcha elementlarini "yoyib" yangi obyekt/massivga nusxalash uchun ishlatiladi.

Why Does It Exist?

React state'ni hech qachon mutate qilmaslik kerak. Spread operator eski qiymatlarni saqlab, faqat kerakli qismini o'zgartirgan holda yangi obyekt yaratish imkonini beradi.

Example

App.jsx
React JSXNusxalash
01const user = { name: "Abbos", age: 26 };
02const updated = { ...user, age: 27 };

⚠️ Common Mistake
user.age = 27 deb to'g'ridan-to'g'ri o'zgartirish — bu mutation, React state uchun taqiqlangan.

0.3 Array Methods: map, filter, reduce

Simple Explanation

map — har bir elementni o'zgartirib yangi massiv qaytaradi, filter — shartga mos elementlarni tanlaydi, reduce — massivni bitta qiymatga "yig'adi".

Example

App.jsx
React JSXNusxalash
01const activeUsers = users.filter((u) => u.isActive);
02const total = cart.reduce((sum, item) => sum + item.price, 0);

Real-world Usage

React'da ro'yxatlarni render qilish uchun map, shartli ro'yxat uchun filter, savat narxini hisoblash uchun reduce doimiy ishlatiladi.

0.4 Closures

Simple Explanation

Closure — funksiya o'zi yaratilgan muhitdagi (scope) o'zgaruvchilarni "eslab qolishi".

Mental Model

🧠 Har bir render — funksiyaning yangi chaqiruvi, va shu chaqiruv ichidagi barcha o'zgaruvchilar shu render'ga "yopishib qoladi" (closure). Bu keyinchalik useEffect'dagi "stale closure" muammosini tushunish uchun juda muhim.

Example

App.jsx
React JSXNusxalash
01function useCounter() {
02  let count = 0;
03  function increment() {
04    count++; // yopiq o'zgaruvchiga murojaat
05  }
06  return { count, increment };
07}

0.5 Optional Chaining va Async/Await

Simple Explanation

?. — obyekt ichidagi maydon mavjud bo'lmasa xatolik bermay undefined qaytaradi. async/await — Promise'lar bilan sinxron ko'rinishda ishlash imkonini beradi.

Example

App.jsx
React JSXNusxalash
01const city = user?.address?.city ?? "Noma'lum";
02 
03async function getUser() {
04  const res = await fetch("/api/user");
05  return await res.json();
06}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: { title, price } obyektidan destructuring qilib, <ProductCard> komponentiga prop sifatida uzating.
Hint: Funksiya parametrida to'g'ridan-to'g'ri destructuring qiling.

🟡 Exercise 2 — Medium

Task: users massividan yoshi 18dan katta bo'lganlarini filter qiling, keyin map bilan ismlarini ro'yxat qilib render qiling.
Hint: .filter().map() zanjiridan foydalaning.

🔴 Exercise 3 — Hard

Task: cart massividagi barcha mahsulotlar narxini reduce bilan jamlab, { ...state, total } orqali yangi state yarating (mutation'siz).
Hint: reducening ikkinchi argumenti — boshlang'ich qiymat (0).

🔮 Predict the Output

App.jsx
React JSXNusxalash
01const user = { name: "Ali" };
02const updated = { ...user, name: "Vali" };
03console.log(user.name, updated.name);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> Ali Vali

Why?
Spread operator yangi obyekt yaratadi, asl user o'zgarmaydi. Shuning uchun user.name hamon "Ali", updated.name esa "Vali".

</details>

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01const [items, setItems] = useState([]);
02function addItem(item) {
03  items.push(item);
04  setItems(items);
05}

Your Task: Bu kod nega UI'ni yangilamaydi? Sababini tushuntiring va tuzating.

<details> <summary>Solution</summary> Muammo: `items.push(item)` — mavjud massivni mutate qiladi. React `setItems(items)` chaqirilganda, massiv reference'i o'zgarmagani uchun "yangi state" deb tanimasligi mumkin.

Yechim:

App.jsx
React JSXNusxalash
01function addItem(item) {
02  setItems([...items, item]);
03}

</details>

📌 Chapter Summary

React kodi to'liq JavaScript ustida quriladi. Destructuring, spread, array metodlar, closures va async/await — bular React'ni tushunish uchun majburiy asos.

🎯 Key Takeaways

• JSX — compile bo'lgan JavaScript, sehr emas
• Har doim immutable update qiling (spread, yangi array/obyekt)
• Closures — hook'lar va event handlerlar ishlashining asosi
• Optional chaining/nullish coalescing — real API ma'lumotlari bilan ishlashda muhim

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01Destructuring:     const { a, b } = obj;
02Spread:            { ...obj, key: value }  /  [...arr, item]
03Filter+map:        arr.filter(fn).map(fn)
04Optional chaining: obj?.prop?.nested ?? default
05Async:             const data = await fetch(url).then(r => r.json())

---