Components and Props
Composing Components
Written by Swapnil RajaPublished
An interface is a tree of small components. The skill is not writing them - it is deciding where one ends and the next begins.
Nesting is the whole mechanism
A component uses other components exactly as it uses HTML tags. There is no registration step and no import list beyond ordinary JavaScript - if the function is in scope, you can render it.
A tree three levels deep
jsx
function Badge({ text }) {
return (
<span style={{ background: "#e2e8f0", padding: "2px 8px", borderRadius: 999 }}>
{text}
</span>
)
}
function CardHeader() {
return (
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<strong>Ada Lovelace</strong>
<Badge text="Admin" />
</div>
)
}
function Card() {
return (
<div style={{ border: "1px solid #cbd5e1", borderRadius: 10, padding: 14 }}>
<CardHeader />
<p style={{ margin: "8px 0 0", color: "#475569" }}>Wrote the first algorithm.</p>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Card />)