> Hinweis
>
> Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerstellen enthalten, in die der erforderliche Code eingefügt werden muss. Sobald diese Leerstellen korrekt ausgefüllt sind, wird der vollständige Code auf der Live-Seite angezeigt.
>
> Zusätzlich verfügt jede Herausforderung über zwei Schaltflächen: `Hinweis` und `Lösung`. Ein Klick auf `Hinweis` liefert kleine Hinweise zur aktuellen Aufgabe, während die Auswahl der Schaltfläche `Lösung` die vollständige Lösung in einem neuen Tab öffnet.

## Aufgabe: Erstellen einer Produktkarte
Die Produktkarte erstellen und im DOM rendern. Die Produktkarte benötigt:
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 den Wert `256` haben.
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 `src`-Attribut muss die Variable `imageUrl` als Wert enthalten. Verwenden Sie geschweifte Klammern `{}`.
2. Das `alt`-Attribut muss den String `"Computer"` als Wert enthalten. In doppelte Anführungszeichen setzen.
3. Das `width`-Attribut muss die Zahl `256` als Wert enthalten. Verwenden Sie geschweifte Klammern `{}`.
3. Sicherstellen, dass die `h3`-, `span`- und `p`-Elemente die korrekten Werte enthalten.

Erlernen Sie die Entwicklung dynamischer, interaktiver Benutzeroberflächen mit React. Verstehen Sie zentrale Konzepte wie JSX, das virtuelle DOM und wiederverwendbare, komponentenbasierte Architekturen. Wenden Sie verschiedene Styling-Techniken mit Inline-Styles, externer CSS und CSS-Modulen für skalierbares Design an. Verwalten Sie Zustand und Nebeneffekte effizient mit React Hooks und teilen Sie Daten zwischen Komponenten mithilfe von Context.

Erhalten Sie ein Verständnis für die Kernprinzipien von React. Sie lernen JSX (JavaScript XML), den Aufbau wiederverwendbarer UI-Komponenten und das Rendern von Elementen kennen. Zusätzlich erfahren Sie mehr über die Bedeutung der Datenerfassung und der bedingten Darstellung in React-Anwendungen. Am Ende dieses Abschnitts verfügen Sie über ein solides Fundament der wesentlichen Konzepte von React, das Sie auf die weiterführenden Themen in den folgenden Abschnitten vorbereitet.

Untersuchen Sie die verschiedenen Methoden zur Hinzufügung von Styles in React-Anwendungen. Sie lernen, wie Sie Styles auf einzelne Komponenten anwenden, dynamische Styles nutzen und einen skalierbaren sowie wartbaren Styling-Ansatz in Ihren Projekten beibehalten.

Leistungsstarke Funktionen in der modernen React-Entwicklung. Hooks revolutionieren die Entwicklung von Funktionskomponenten, indem sie eine prägnante und intuitive Möglichkeit zur Verwaltung von Zustand und zur Ausführung von Seiteneffekten bieten. Im Gegensatz dazu ermöglicht Context das Teilen von Daten durch den Komponentenbaum, ohne Props weiterreichen zu müssen. Die Kombination von Hooks und Context ermöglicht ein effizientes Zustandsmanagement und eine vereinfachte Datenweitergabe in React-Anwendungen.

Schritt-für-Schritt-Anleitung zum Start eines praxisnahen React-Projekts. Von der Einrichtung der Entwicklungsumgebung über das Verständnis der Projektorganisation bis hin zu wichtigen Tools – Sie erwerben das Wissen und die Sicherheit, um Ihre React-Reise zu beginnen.

Herausforderung: Ein Element in React Rendern

Arbeiten mit Code Sandbox

Aufgabe: Erstellen einer Produktkarte

Awesome!

Herausforderung: Ein Element in React Rendern

Arbeiten mit Code Sandbox

Aufgabe: Erstellen einer Produktkarte