Components & Props

A component is just a function; props are the arguments you pass it, written like HTML attributes.

Example: the same component, reused with different data

function Greeting(props) {
  return <p>Hello, {props.name}! You're studying {props.track}.</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Ada" track="Frontend" />
      <Greeting name="Chidi" track="Cybersecurity" />
    </div>
  );
}

Inside the component, every prop you passed arrives bundled into a single object — props.name, props.track. This is exactly what makes one component definition reusable across an entire app: Greeting is written once, but rendered twice above with completely different data each time, the same way a function can be called repeatedly with different arguments.

A common shortcut: destructuring props

function Greeting({ name, track }) {
  return <p>Hello, {name}! You're studying {track}.</p>;
}

This is functionally identical to the version above — it just unpacks name and track directly out of the props object in the function's parameter list, which is common enough in real React code that it's worth recognizing even before you're writing it yourself.