## Aufgabe
Wir erstellen nun die Komponente `Alert`, die alle als Children übergebenen Elemente rendert und spezifische Stile darauf anwendet. Die Aufgabe lautet:
1. Erstellen Sie die Komponente `Alert`, die ein `div`-Element enthält.
2. Das `div`-Element soll den Klassennamen `alert` besitzen.
3. Das `div`-Element soll die `children`-Prop als Inhalt haben.
4. Das `div`-Element soll folgendes CSS erhalten.
```css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
```

1. Um ein `div`-Element in der Komponente zu erstellen, verwenden Sie `<div>...</div>`.
2. Um `props.children` als Textinhalt zu übergeben, schließen Sie es in `{...}` ein und setzen Sie `props.children`. Ergebnis: `<div>{props.children}</div>`.
3. Um einen Klassennamen zum `div`-Element hinzuzufügen, verwenden Sie das Attribut `className` und setzen Sie es auf `alert`. Ergebnis: `className="alert"`.
4. Um die Datei mit den Stilen in der `index.js`-Datei zu importieren, verwenden Sie die `import`-Anweisung und geben Sie den korrekten Pfad zur Datei an. Ergebnis: `import './index.css'`.
5. Um Stile auf das `div`-Element anzuwenden, verwenden Sie den Klassenselektor `.alert` und fügen Sie die Stile aus der Aufgabe ein.

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: Eine React-Anwendung Stylen

Aufgabe

Herausforderung: Eine React-Anwendung Stylen

Aufgabe