Components & JSX
JSX, props & composition
How JSX compiles, one-way data flow, and composition over inheritance.
JSX is syntactic sugar for React.createElement(type, props, ...children), producing plain objects (elements) that describe UI. Because elements are just data, rendering is cheap to reason about and diff.
JSX is a blueprint the renderer reads; props are the labelled parcels a parent hands its child, and the child may open but never rewrite them.
Key concepts
1
Props flow one way, parent → child, and are immutable inside the child. This unidirectional flow is what makes React predictable; to change parent state a child calls a callback prop.
Propsone waycallback prop
2
React favours composition over inheritance: build flexible components by passing elements via children or render props, not by subclassing. The special children prop is how a layout wraps arbitrary content.
composition over inheritancechildren
3
Pitfall: creating new object/array/function props inline on every render defeats memo on children (referential inequality). Interview angle: "why composition over inheritance in React?" — components compose by passing elements, which is more flexible and avoids fragile base classes.
Pitfall:Interview angle:memo
jsx
// children-based composition
function Card({ title, children }) {
return (
<section className="card">
<h2>{title}</h2>
{children}
</section>
);
}
<Card title="Report">
<Chart data={data} />
<button onClick={onExport}>Export</button>
</Card>