Chapter 4 — Komponentlar

JSX — UI tasvirlash tili. Komponent — shu JSX'ni qayta ishlatiluvchi funksiyaga aylantiruvchi qurilma.

---

4.1 Funksional Komponentlar

Simple Explanation

Komponent — JSX qaytaradigan oddiy JavaScript funksiyasi.

Example

App.jsx
React JSXNusxalash
01function Button() {
02  return <button>Click</button>;
03}

Why Does It Exist?

Butun ilova UI'sini bitta katta funksiyada yozish — o'qish, testlash va qayta ishlatishni deyarli imkonsiz qiladi. Komponentlar UI'ni mustaqil, nomlangan bo'laklarga bo'ladi.

⚠️ Common Mistake
Komponent nomini kichik harf bilan yozish (function button()) — React buni oddiy HTML tegi deb qabul qiladi.

4.2 Komponentlar Kompozitsiyasi

Example

App.jsx
React JSXNusxalash
01function Header() {
02  return (
03    <header>
04      <Logo />
05      <Navigation />
06    </header>
07  );
08}

Visual — Component Tree

code.text
TEXTNusxalash
01App
02├── Header
03├── Sidebar
04└── Main
05    ├── ProductList
06    │   ├── ProductCard
07    │   └── ProductCard
08    └── Footer

4.3 Single Responsibility Principle

Simple Explanation

Har bir komponent faqat bitta aniq vazifaga ega bo'lishi kerak.

Real-world Usage

ProductCard — faqat bitta mahsulotni ko'rsatadi; savatga qo'shish mantig'ini alohida funksiyaga (onAddToCart) beradi, o'zi buni bajarmaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Badge nomli oddiy komponent yarating, u ichiga matn qabul qilsin.

🟡 Exercise 2 — Medium

Task: Header, Main, Footer komponentlaridan iborat oddiy landing page tuzilmasini yarating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function userCard() {
02  return <p>Salom</p>;
03}
04 
05function App() {
06  return <userCard />;
07}

Your Task: Bu kod nega ishlamaydi?

<details> <summary>Solution</summary> `userCard` kichik harf bilan boshlangan, shuning uchun React uni HTML tegi (`<usercard>`) deb qabul qiladi, komponent sifatida emas. Nomi katta harf bilan boshlanishi kerak: ```jsx function UserCard() { return <p>Salom</p>; }

function App() {
return <UserCard />;
}

</details>

## 📌 Chapter Summary
Komponent — UI qaytaruvchi oddiy funksiya. Kichik, mas'uliyati aniq komponentlar — scalable UI'ning asosi.

## 🎯 Key Takeaways
- Komponent nomi har doim katta harf bilan boshlanadi
- Komponentlar kompozitsiya orqali birlashtiriladi
- Har bir komponent bitta aniq mas'uliyatga ega bo'lishi kerak

## ⚡ Quick Cheat Sheet
```jsx
function ComponentName() {
  return <div>...</div>;
}

<>
  <Header />
  <Main />
  <Footer />
</>

---