Components

// A function component — just a JavaScript function
function CourseCard({ course }) {
  return (
    <div className="card">
      <h3>{course.title}</h3>
      <p>{course.description}</p>
      <span>{course.level}</span>
    </div>
  );
}

// Naming convention: PascalCase (first letter uppercase)
// This distinguishes components from regular HTML elements:
// <div> is HTML     <CourseCard /> is a React component

// Small, focused components compose into larger ones
function Avatar({ name, size = 40 }) {
  return (
    <div
      className="avatar"
      style={{ width: size, height: size }}
    >
      {name[0].toUpperCase()}
    </div>
  );
}

function UserCard({ user }) {
  return (
    <div className="user-card">
      <Avatar name={user.name} size={48} />
      <div>
        <p className="name">{user.name}</p>
        <p className="role">{user.role}</p>
      </div>
    </div>
  );
}

function TeamSection({ team }) {
  return (
    <section>
      <h2>Our Team</h2>
      {team.map(member => (
        <UserCard key={member.id} user={member} />
      ))}
    </section>
  );
}