Jetzt bauen wir unsere erste eigene, wiederverwendbare Komponente: ProductCard. Sie wird die Grundlage für unseren Produktkatalog, den wir durch das restliche Tutorial ausbauen.

Was sind Props?

"Props" (kurz für "properties") sind die Art, wie eine Komponente von außen Daten übergeben bekommt – vergleichbar mit HTML-Attributen wie <img src="..." alt="...">, nur dass Sie bei React-Komponenten selbst bestimmen, welche Props es gibt und was sie bedeuten. Dieses Konzept ist IDENTISCH zu React Native, falls Sie unser mobiles Tutorial kennen.

Die ProductCard-Komponente

Legen Sie einen neuen Unterordner src/components/ mit der Datei ProductCard.jsx darin an:

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 }} ist "Destrukturierung" – die Komponente holt sich diese vier benannten Werte aus dem Props-Objekt, das beim Verwenden übergeben wird. onClick={{onSelect}} zeigt: Auch FUNKTIONEN können Props sein, nicht nur Text oder Zahlen – der Elternteil entscheidet, was beim Klick passiert, ProductCard selbst weiß das gar nicht.

App.jsx aktualisieren: die Komponente verwenden

Ersetzen Sie den Inhalt von src/App.jsx, importieren Sie ProductCard und geben Sie ihr Beispieldaten:

import ProductCard from './components/ProductCard';

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

export default App;

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

Speichern Sie und schauen Sie in den Browser: eine klickbare Produktkarte. Jetzt können Sie beliebig viele <ProductCard /> mit unterschiedlichen Props nebeneinander verwenden – genau wie mehrere <img>-Tags mit unterschiedlichen src-Werten, nur dass hier eine ganze kleine Komponente mit Layout, Bild und Klick-Verhalten wiederverwendet wird.