React applications are built by composing small, isolated, reusable functional components together.
1. Building and Composing Components
⊞Code Example
// Button Component
function ActionButton({ label, onClick }) {
return (
<button
onClick={onClick}
className="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-xl transition-all"
>
{label}
</button>
);
}
// Header Component composing the button
export default function Header() {
return (
<header className="flex items-center justify-between p-4 bg-[#060c18] border-b border-slate-800">
<span className="font-extrabold text-white text-lg">NextSem Academy</span>
<ActionButton label="Get Started" onClick={() => alert("Welcome!")} />
</header>
);
}