# Aufgabe

Erstellung einer wiederverwendbaren `StatusCard`-Komponente, die je nach `online`-Prop unterschiedliche Nachrichten anzeigt.

Die `StatusCard`-Komponente muss Folgendes enthalten:

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

2. Einen Absatz (`p`-Element).

   * Wenn die `online`-Prop `true` ist, Anzeige von `Online`;
* Andernfalls Anzeige von `Offline`.

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


## Startcode
Öffne das folgende Starter-Projekt und vervollständige die fehlenden Teile der Komponente.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-starter-show-user-status-messages?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-03-solution-show-user-status-messages?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: Benutzerstatusmeldungen Anzeigen

Aufgabe

Startcode

Lösung