Now we'll build our first own, reusable component: ProductCard. It becomes the foundation for our product catalog, which we'll keep extending through the rest of the tutorial.

What are props?

"Props" (short for "properties") are how a component receives data from the outside – comparable to HTML attributes like <img src="..." alt="...">, except that with React components you decide yourself which props exist and what they mean. This concept is IDENTICAL to React Native, if you know our mobile tutorial.

The ProductCard component

Create a new subfolder src/components/ with the file ProductCard.jsx inside it:

function ProductCard({ name, price, imageUrl, onSelect }) {
  return (
    <div className="product-card" onClick={onSelect}>
      <img src={imageUrl} alt={name} className="product-card__image" />
      <div className="product-card__info">
        <h3 className="product-card__name">{name}</h3>
        <p className="product-card__price">${price.toFixed(2)}</p>
      </div>
    </div>
  );
}

export default ProductCard;

{{ name, price, imageUrl, onSelect }} is "destructuring" – the component pulls these four named values out of the props object it's given when used. onClick={{onSelect}} shows that FUNCTIONS can be props too, not just text or numbers – the parent decides what happens on click, ProductCard itself has no idea.

Updating App.jsx: using the component

Replace the content of src/App.jsx, import ProductCard, and give it sample data:

import ProductCard from './components/ProductCard';

function App() {
  return (
    <div className="app">
      <ProductCard
        name="Hiking Boots"
        price={89.99}
        imageUrl="https://picsum.photos/300"
        onSelect={() => alert('Hiking Boots tapped!')}
      />
    </div>
  );
}

export default App;

produktkatalog-web/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx                      (updated: imports ProductCard)
    ├── index.css
    └── components/
        └── ProductCard.jsx           ← NEW

Save and check your browser: a clickable product card. Now you can use as many <ProductCard /> as you like, side by side, with different props – just like multiple <img> tags with different src values, except here a whole small component with layout, image, and click behavior is being reused.