Components are the building blocks of React apps. Each component is an independent, reusable piece of UI. You can nest components inside other components to build complex UIs from simple pieces.
Modern React uses function components — simple JavaScript functions that return JSX.
// Simple function component
function Button({ label, onClick, variant = 'primary' }) {
return (
<button
className={`btn btn-${variant}`}
onClick={onClick}
>
{label}
</button>
);
}
// Component with children
function Card({ title, children }) {
return (
<div className="card">
<h3 className="card-title">{title}</h3>
<div className="card-body">{children}</div>
</div>
);
}
// Composing components
function App() {
const handleClick = () => alert('Clicked!');
return (
<Card title="My Card">
<p>This is the card content.</p>
<Button label="Click Me" onClick={handleClick} />
<Button label="Cancel" variant="secondary" />
</Card>
);
}