Components

A component is a function that returns JSX. Give it a capitalized name and use it like a tag. Values passed as attributes arrive in one props object:

function Card(props) {
  return <h2>{props.name}</h2>;
}

<Card name="Mug" />;

Components can live in their own files. Export one, import it where it's used, and render it as many times as you need.

Unlike in some frameworks, a Solid component function runs once, when it is created. It sets up the view and returns. Later lessons show how values change without running it again.

Try it: the shop repeats the same card markup three times. Finish Card in card.jsx so it reads props.name and props.price, then replace the three articles in main.jsx with three <Card /> elements.