Skip to main content

Describing the UI

Learn how React components describe what the UI should look like.

Official docs

Mirrors Describing the UI — react.dev.

Components​

Components let you split UI into independent, reusable pieces. Each component encapsulates its own markup and logic.

Passing Props​

Props are read-only inputs to a component:

function Avatar({ src, alt, size = 40 }) {
  return <img src={src} alt={alt} width={size} height={size} />;
}

Conditional Rendering​

function StatusBadge({ isOnline }) {
  return <span>{isOnline ? 'Online' : 'Offline'}</span>;
}

Rendering Lists​

Use map() with a stable key prop:

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

Further Reading​