Chapter 1 — React Nima va Nega Kerak?

React — JavaScript library, alohida til emas. Bu bobda declarative va imperative dasturlash farqini, hamda React qaysi muammoni yechishini o'rganamiz.

---

1.1 Imperative vs Declarative

Simple Explanation

Imperative — "qanday" qilishni bosqichma-bosqich aytish. Declarative — faqat "nima" kerakligini aytish, "qanday"ni tizim o'zi hal qiladi.

Example — Vanilla JS (Imperative)

script.js
JavaScriptNusxalash
01let count = 0;
02const button = document.querySelector("#btn");
03button.addEventListener("click", () => {
04  count++;
05  document.querySelector("#count").textContent = count;
06});

Example — React (Declarative)

App.jsx
React JSXNusxalash
01function Counter() {
02  const [count, setCount] = useState(0);
03  return <button onClick={() => setCount(count + 1)}>{count}</button>;
04}

Mental Model

🧠 UI = f(state) — UI har doim state'ning funksiyasi. State o'zgarsa, UI avtomatik yangilanadi.

1.2 Component-Based Architecture

Simple Explanation

UI mustaqil, qayta ishlatiluvchi bo'laklar (komponentlar)ga bo'linadi.

Example

code.text
TEXTNusxalash
01App
02├── Header
03├── Main
04│   ├── Hero
05│   └── Products
06└── Footer

Real-world Usage

Katta ilovalarda har bir UI qismi (navbar, karta, forma) alohida komponent sifatida yoziladi va boshqa joylarda qayta ishlatiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Vanilla JS'da oddiy "like" tugmasi yozing (bosilganda son oshadi).
Hint: addEventListener va textContentdan foydalaning.

🟡 Exercise 2 — Medium

Task: Xuddi shu "like" tugmasini React komponent sifatida useState bilan qayta yozing.
Hint: const [likes, setLikes] = useState(0);

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Counter() {
02  let count = 0;
03  return <button onClick={() => { count++; console.log(count); }}>{count}</button>;
04}

Your Task: Tugma bosilganda konsolda son oshadi, lekin ekrandagi son o'zgarmaydi. Nega?

<details> <summary>Solution</summary> `count` — oddiy o'zgaruvchi, React uni kuzatmaydi. `count++` qiymatni o'zgartiradi, lekin React bu haqda bilmagani uchun komponentni qayta render qilmaydi (UI yangilanmaydi).

Yechim: useState ishlatish kerak:

App.jsx
React JSXNusxalash
01function Counter() {
02  const [count, setCount] = useState(0);
03  return <button onClick={() => setCount(count + 1)}>{count}</button>;
04}

</details>

📌 Chapter Summary

React — declarative UI kutubxonasi. UI = f(state) — bu React'ning asosiy mental modeli. Component-based architecture UI'ni mustaqil, qayta ishlatiluvchi bo'laklarga bo'ladi.

🎯 Key Takeaways

• React — framework emas, declarative UI kutubxonasi
• UI = f(state) — state o'zgarsa, UI avtomatik yangilanadi
• Component-based architecture — scalable UI'ning asosi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Imperative: "qanday" qilishni ayting (vanilla JS)
02Declarative: "nima" kerakligini ayting (React)
03UI = f(state)

---