Alle Herausforderungen erscheinen standardmäßig möglicherweise unvollständig. Sie enthalten leere Abschnitte, in die Sie den erforderlichen Code einfügen müssen. Sobald alle fehlenden Teile korrekt ausgefüllt sind, wird der vollständige Code auf der Live-Seite angezeigt.

Jede Herausforderung enthält zwei Hilfeschaltflächen:
- **Hinweis**: zeigt kleine Hinweise zur Orientierung an;
- **Lösung**: öffnet die vollständige Version in einem neuen Tab.

Hinweis

Sie können sich auch das kurze Video-Tutorial unten ansehen, um zu lernen, wie Sie mit CodeSandbox arbeiten.

## So arbeiten Sie mit CodeSandbox

## Aufgabe: Erstellen einer Produktkarte
Erstellen Sie eine einfache Produktkarte mit JSX und rendern Sie sie in das DOM. Die Produktkarte muss Folgendes enthalten:
1. Das Produktbild (`img`-Element).
   - Das `src`-Attribut muss dem Wert der Variablen `imageUrl` entsprechen.
   - Das `alt`-Attribut muss dem String `Computer` entsprechen.
   - Das `width`-Attribut muss `256` sein.
2. Den Produkttitel (`h3`-Element).
   - Der Textinhalt muss `Computer` sein.
3. Den Produktpreis (`span`-Element).
   - Der Textinhalt muss `Price: $129.99` sein.
4. Die Produktbeschreibung (`p`-Element).
   - Der Textinhalt muss `New Model` sein.

1. Das Attribut `src` muss die Variable `imageUrl` als Wert enthalten. Verwenden Sie geschweifte Klammern `{}`.
2. Das Attribut `alt` muss den String `"Computer"` als Wert enthalten. In doppelte Anführungszeichen setzen.
3. Das Attribut `width` muss die Zahl `256` als Wert enthalten. Verwenden Sie geschweifte Klammern `{}`.
3. Sicherstellen, dass die Elemente `h3`, `span` und `p` korrekte Werte enthalten.

Erkunden Sie die Grundlagen der Erstellung von Benutzeroberflächen mit React. Schwerpunkt auf Komponenten, JSX, Datenfluss, Zustand und Nebenwirkungen, wie sie in alltäglichen React-Anwendungen verwendet werden.

Untersuchung von React und dessen Rendering von Benutzeroberflächen. Schwerpunkt auf Komponenten, JSX-Syntax und der Anzeige von Elementen auf dem Bildschirm.

Vertiefung der Datenübergabe zwischen Komponenten und Steuerung der UI-Ausgabe. Schwerpunkt auf Props, bedingtem Rendern und dem Rendern von Datenlisten.

Erfahren Sie, wie Benutzerinteraktionen und externe Daten die Benutzeroberfläche im Laufe der Zeit verändern. Schwerpunkt auf dem Verwalten von Zustand und dem Umgang mit Seiteneffekten mithilfe von React Hooks.

Untersuchung gängiger Methoden zur Gestaltung von React-Komponenten. Schwerpunkt auf der Anwendung von Stilen mittels Inline-Styles und externer CSS.

Erfahren Sie, wie ein React-Projekt ausgeführt wird und wie dessen Struktur aufgebaut ist. Schwerpunkt auf dem Starten eines Projekts mit Vite und dem Navigieren durch die Projektdateien.

Herausforderung: Ein Element in React Rendern

So arbeiten Sie mit CodeSandbox

Aufgabe: Erstellen einer Produktkarte