Components and Composition

The true power of React is composition. You can build large applications by combining smaller, reusable components.

Let’s build a profile card:

function Avatar() {
  return <img className="avatar" src="avatar.jpg" alt="User" />;
}

function UserInfo() {
  return (
    <div>
      <h2>Jane Doe</h2>
      <p>Software Engineer</p>
    </div>
  );
}

// Composing them together
function ProfileCard() {
  return (
    <div className="card">
      <Avatar />
      <UserInfo />
    </div>
  );
}