Component Composition
React, INHERITANCE, KE, BAJAYE, COMPOSITION, KO, PREFER, KARTA, hai — CHHOTE, FOCUSED, COMPONENTS (jaise, Button, Card, Modal), COMBINE, HOKE, COMPLEX, UIs, BANATE, HAIN. YE, APPROACH, FLEXIBLE, aur, TESTABLE, CODE, DETA, hai.
EK, "CONTAINER", COMPONENT (jaise, Layout), DUSRE, COMPONENTS, KO, WRAP, KAR, SAKTA, hai, children PROP, KE, THROUGH — YE, "SLOT-BASED" DESIGN, ALLOW, KARTA, hai, JAHA, PARENT, CONTENT, DECIDE, KARTA, hai, LEKIN, WRAPPER, (STRUCTURE/STYLING) CHILD, DECIDE, KARTA, hai.
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="card-body">{children}</div>
</div>
);
}
// Composition — Card, apni CONTENT ke baare mein, KUCH nahi jaanta:
function App() {
return (
<Card title="Profile">
<img src="/avatar.jpg" alt="Avatar" />
<p>Bio goes here...</p>
</Card>
);
}- Composition, React ka, CORE PRINCIPLE hai (inheritance ke, BAJAYE)
- Chhote, focused, components, COMBINE hoke, complex UIs, BANATE hain
- children prop, "SLOT-based" design, ENABLE karta hai
EK, GENERIC, COMPONENT (jaise, Dialog), COMPOSITION, SE, MORE, SPECIFIC, COMPONENTS (jaise, ConfirmDialog, AlertDialog) BANANE, KE, LIYE, USE, HO, SAKTA, hai — SpecificDialog, GenericDialog, KO, RENDER, KARKE, USME, SPECIFIC, PROPS, PASS, KARTA, hai.
function ConfirmDialog(props) {
return <Dialog title="Confirm" {...props} />;
}Complex, LAYOUTS, KE, LIYE, MULTIPLE, "SLOTS" (jaise, header, footer) PROPS, KI, TARAH, PASS, KIYE, JA, SAKTE, HAIN (SIRF, EK, children, KE, BAJAYE) — jaise, <Layout header={<Nav />} footer={<Footer />} />.