Aufgabe

Wir werden nun das Alert-Komponente erstellen, das alle als Kinder übergebenen Elemente rendert und einige spezifische Stile darauf anwendet. Die Aufgabe ist:

1. Erstellen Sie die Komponente Alert, die das div-Element enthält.

2. Das div-Element sollte den Klassennamen alert haben.

3. Das div-Element sollte die children-Eigenschaft als Inhalt haben.

4. Das div-Element sollte das folgende CSS haben.

css

1. Um ein div-Element im Component 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 dem div-Element einen Klassennamen hinzuzufügen, verwenden Sie das className-Attribut 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 Klassennamen-Selektor .alert und fügen Sie die Stile aus der Aufgabe ein.