Components and JSX

Components are React's unit of composition. JSX expresses UI structure as readable, testable code.

Functional components

function Badge({ label }) {
  return <span className="badge">{label}</span>;
}

Props contract

Props are input contracts for components. Keep prop APIs explicit and focused on one clear responsibility.

JSX rules

  • Return a single root node or fragment.
  • Use className instead of class.
  • Embed JavaScript expressions with braces.

Composition patterns

Prefer composition over inheritance by combining small components through props and children.

Professional tips

  1. Keep components focused and cohesive.
  2. Extract logic into hooks when complexity rises.
  3. Name components by business intent, not visual style only.

Practice

Build a reusable card system with header, body, and action slots, then use it in three different contexts.