Chapter 15 — Children va Composition

PART 5'da children prop bilan tanishgan edik — endi uni composition patternlarida chuqurroq qo'llaymiz.

---

15.1 Composition Over Configuration

Example

App.jsx
React JSXNusxalash
01function Modal({ children, onClose }) {
02  return (
03    <div className="overlay">
04      <div className="modal">
05        {children}
06        <button onClick={onClose}>Yopish</button>
07      </div>
08    </div>
09  );
10}
11 
12<Modal onClose={closeModal}>
13  <LoginForm />
14</Modal>

Why Does It Exist?

Agar Card komponenti ichidagi har bir mumkin bo'lgan kontent uchun alohida prop qo'shsak, u tezda boshqarib bo'lmaydigan holga keladi. Composition bunday muammoni children orqali hal qiladi.

15.2 Bir Nechta "Slot" (Named Composition)

Example

App.jsx
React JSXNusxalash
01function PageLayout({ header, sidebar, children }) {
02  return (
03    <div>
04      <header>{header}</header>
05      <aside>{sidebar}</aside>
06      <main>{children}</main>
07    </div>
08  );
09}
10 
11<PageLayout header={<Navbar />} sidebar={<Filters />}>
12  <ProductGrid />
13</PageLayout>

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Card komponenti yarating, u istalgan children'ni ko'rsata olsin.

🔴 Exercise 2 — Hard

Task: header, sidebar, children uchun uchta "slot"i bo'lgan PageLayout yarating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Card({ title, description, footerText, footerButtonText, footerButtonAction }) {
02  // props soni ortib bormoqda...
03}

Your Task: Bu komponent qanday muammoga duch kelmoqda va uni qanday yechish mumkin?

<details> <summary>Solution</summary> Muammo — "props portlashi" (props explosion): har bir yangi imkoniyat uchun yangi prop qo'shilmoqda. Yechim — composition: ```jsx function Card({ children }) { return <div className="card">{children}</div>; } <Card> <h3>Sarlavha</h3> <p>Tavsif</p> <Footer> <button onClick={action}>Amal</button> </Footer> </Card> ``` </details>

📌 Chapter Summary

Composition — ko'p sonli configuration proplardan ko'ra moslashuvchanroq. children — komponentga ixtiyoriy JSX joylashtirish imkonini beradi.

🎯 Key Takeaways

• Composition — moslashuvchanlik uchun asosiy vosita
• children — universal "slot"
• Bir nechta slot kerak bo'lsa, nomlangan proplar orqali JSX uzatish mumkin

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01function Wrapper({ children }) { return <div>{children}</div>; }
02<Wrapper><Anything /></Wrapper>
03 
04function Layout({ header, children }) { return <><header>{header}</header><main>{children}</main></>; }
05<Layout header={<Nav />}><Content /></Layout>

---