Components & Composition
Components are self-contained, reusable building blocks that accept props and return JSX.
Mental Model
"LEGO Bricks: Small specialized bricks snap together to build castles, spaceships, or entire cities."
Interactive Engine Simulation
Instead of one giant file, React encourages small, focused components that compose together to form complex interfaces.
Executable Code Snippet
1function Button({ children }) {
2 return <button className="btn">{children}</button>;
3}
4
5function Card({ title, body }) {
6 return (
7 <div className="card">
8 <h3>{title}</h3>
9 <p>{body}</p>
10 <Button>Learn More</Button>
11 </div>
12 );
13}- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. Thinking in Components
The genius of React is its **fractal** nature. You build a button, then a form, then a page, then an app. Each layer is just a component composed of smaller components. This allows for total **separation of concerns**—one developer can perfect the Button's accessibility while another builds the Login logic.
Isolation
Styles and logic don't leak out.
Reusability
Write once, use across the cosmos.
02. Composition vs Inheritance
React favors **Composition**. Instead of creating a `SpecialButton` class that inherits from `Button`, you pass `props.children` or specialized props to a generic `Button` component. This "has-a" relationship is much more flexible than the "is-a" relationship found in traditional OOP.
Architectural Advice
"If a component is getting too large (over 200 lines), it's a sign that it should be broken down into smaller sub-components. Aim for components that do one thing and do it perfectly."