Components and props

A component is a function whose name starts with a capital letter. React treats lowercase names as HTML tags (<div>) and capitals as components (<Profile />).

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

export default function App() {
  return (
    <header>
      <h1>Dashboard</h1>
      <Badge label="R2021" tone="info" />
    </header>
  );
}

label and tone are props. The parent decides their values; the child should treat them as read-only. Mutating props.label = 'x' is a bug — React will not reliably re-render, and it makes data flow impossible to follow.

Children

Whatever you put between tags arrives as props.children:

function Card({ children }) {
  return <div className="card">{children}</div>;
}
// <Card><p>Inside</p></Card>

Default export vs named

One component per file is common. export default function App is imported as import App from './App.jsx'. Named exports use curly braces. Either is fine; stay consistent.