Herausforderung: Funktionale Komponenten

Aufgabe: Erstellen einer Enzyklopädie-Quelle

In dieser Aufgabe erstellen Sie eine Enzyklopädie-Quelle mit zwei Karten. Jede Karte zeigt ein Bild und eine Beschreibung an. Das Ziel ist es, das Erstellen von funktionalen Komponenten zu üben und Daten mithilfe von Props an Kindkomponenten zu übergeben.

Anweisungen:

1. Erstellen Sie eine Card-Komponente als wiederverwendbare Kartenvorlage.
2. Akzeptieren Sie in der Card-Komponente die folgenden Props:
   • link: Die URL des Bildes für die Karte;
   • alt: Der alternative Text für das Bild;
   • description: Der Beschreibungstext für die Karte.
3. Verwenden Sie die Card-Komponente zweimal in der App-Komponente, um zwei Karten mit folgendem Inhalt zu erstellen:

Karte 1 (Über die Sonne):

• Bild-URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
• Alternativtext: Geben Sie eine passende Beschreibung an.
• Beschreibung: "Die Sonne schien hell und warf einen warmen Schein über den ruhigen Strand."

Karte 2 (Über den Berg):

• Bild-URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
• Alternativtext: Geben Sie eine passende Beschreibung an.
• Beschreibung: "Der Wanderer schaute ehrfürchtig auf den majestätischen Berg, der sich vor ihm erhob."

Stellen Sie sicher, dass sowohl die Card- als auch die App-Komponenten entsprechend modifiziert werden, um die Karten korrekt anzuzeigen.

Hier ist ein Starter-Code mit Platzhaltern, den Sie vervollständigen können:

1. Sie können die gleiche Card-Komponente für beide Karten verwenden und deren Inhalt mit Props steuern.
2. Um die URL als Prop zu übergeben, erstellen Sie ein Prop namens link und geben Sie die URL als Wert an. Schließen Sie den Wert in doppelte Anführungszeichen ein, da es sich um einen String handelt.
3. Erstellen Sie ähnlich Props für alt und description und geben Sie die entsprechenden Werte an.
4. Um diese Props innerhalb der Kindkomponente Card zu verwenden, greifen Sie mit Punktnotation darauf zu, da props ein Objekt ist.