Build your first React project from scratch

Think in components

Before writing code, identify independent interface regions. Cards, toolbars, and empty states are good candidates with clear responsibilities and small APIs.

A reusable component

type ProjectCardProps = { title: string; mode: string };

export function ProjectCard({ title, mode }: ProjectCardProps) {
  return <article><h2>{title}</h2><p>{mode}</p></article>;
}

Keep state close to where it is used

• Do not make display-only state global without a reason.
• Compute derived data instead of storing duplicate state.
• Choose stable keys for rendered lists.

A good component is not merely short; it has a clear responsibility and predictable inputs.