# Aufgabe

Erstellung einer wiederverwendbaren `UserCard`-Komponente, die Benutzerinformationen mithilfe von Props anzeigt.
Die `UserCard`-Komponente muss Folgendes enthalten:

1. Eine Überschrift (`h2`-Element). Der Textinhalt muss die `name`-Prop anzeigen.

2. Einen Absatz (`p`-Element). Der Textinhalt muss die `job`-Prop anzeigen.

Die `App`-Komponente rendert bereits mehrere `UserCard`-Komponenten mit unterschiedlichen Props.


## Startcode
Das Starterprojekt unten öffnen und die fehlenden Teile der Komponente ergänzen.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-02-starter?file=src%2FApp.jsx)



## Lösung

Das Ergebnis kann mit der finalen Lösung unten verglichen werden.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-02-solution?file=src%2FApp.jsx)

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.

Was ist der Hauptzweck von Props in React?

Welche Methode wird am häufigsten verwendet, um eine Liste von Elementen in React darzustellen?

Warum ist das Key-Prop beim Rendern von Listen wichtig?

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: Wiederverwendbare Benutzerkarten Erstellen

Aufgabe

Startcode

Lösung