Components

Functional Components

Components are the building blocks of React applications. A component is a JavaScript function that returns JSX. Components let you split the UI into independent, reusable pieces.

Component names must start with an uppercase letter. This is how React distinguishes components from HTML elements.

// A simple component
function Button({ label }) {
  return <button className="btn">{label}</button>;
}

// A card component using other components
function UserCard({ name, role }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{role}</p>
      <Button label="View Profile" />
    </div>
  );
}

// Using the component
function App() {
  return (
    <div>
      <UserCard name="Alice" role="Developer" />
      <UserCard name="Bob" role="Designer" />
    </div>
  );
}

• Components are JavaScript functions that return JSX
• Component names must start with an uppercase letter
• Components can be composed — use components inside other components
• Keep components small and focused on one responsibility
• Components can accept inputs called props