Chapter 17 — Qayta Ishlatiluvchi Componentlar

---

17.1 Variant Pattern (Button)

Example

App.jsx
React JSXNusxalash
01function Button({ variant = "primary", children }) {
02  const base = "px-6 py-3 rounded-lg font-medium transition duration-200";
03  const variants = {
04    primary: "bg-blue-500 hover:bg-blue-600 text-white",
05    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
06  };
07  return <button className={`${base} ${variants[variant]}`}>{children}</button>;
08}

17.2 Modal va Card Componentlari

Example

App.jsx
React JSXNusxalash
01function Modal({ isOpen, onClose, children }) {
02  if (!isOpen) return null;
03  return (
04    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
05      <div className="bg-white rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
06        {children}
07      </div>
08    </div>
09  );
10}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Button componentini yarating, kamida 2 ta variant bilan (primary, secondary).

🟡 Exercise 2 — Medium

Task: Card componentini yarating va uni 3 marta turli ma'lumotlar bilan render qiling.

🔴 Exercise 3 — Hard

Task: To'liq Modal componentini yarating — ochilish/yopilish state'i bilan (useState), fonga bosilganda yopiladigan qilib.

---

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Badge({ status }) {
02  return <span className={styles[status]}>{status}</span>;
03}

Your Task: Agar status="unknown" uzatilsa (obyektda mavjud bo'lmagan kalit), nima bo'ladi va qanday tuzatasiz?

<details> <summary>Solution</summary> `styles[status]` `undefined` qaytaradi, `className={undefined}` esa hech qanday klass bermaydi (xato emas, lekin uslubsiz badge chiqadi). Yechim: default variant qo'shish — `styles[status] || styles.default`. </details>

---

📌 Chapter Summary

Component — bir xil klasslarni takrorlash o'rniga, stil+xatti-harakatni birlashtirish. Variant pattern (object orqali klass tanlash) — Button, Badge kabi ko'p holatli componentlar uchun standart yechim.

🎯 Key Takeaways

• base + variants obyekt patterni — DRY tamoyilining amaliy qo'llanilishi
• Modal uchun fixed inset-0 bg-black/50 flex items-center justify-center standart naqsh
• Har doim noma'lum variant holatlari uchun fallback/default qo'ying

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Naqsh: base classes + variant classes (object orqali tanlash)
02Modal: fixed inset-0 bg-black/50 flex items-center justify-center
03Card:  rounded-xl shadow-md overflow-hidden

---