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. Ziel ist es, das Erstellen von Funktionskomponenten und das Übergeben von Daten an Kindkomponenten mittels Props zu üben.

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 Alternativtext 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: "The sun shone brightly, casting a warm glow across the tranquil beach."

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: "The hiker gazed in awe at the majestic mountain towering before them."

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

Hier ist ein Startcode mit Platzhaltern, die Sie vervollständigen können:

1. Das gleiche Card-Komponent kann für beide Karten verwendet werden; der Inhalt wird über Props gesteuert.
2. Um die URL als Prop zu übergeben, eine Prop namens link erstellen und die URL als Wert angeben. Der Wert muss in doppelte Anführungszeichen gesetzt werden, da es sich um einen String handelt.
3. Ebenso Props für alt und description erstellen und die entsprechenden Werte zuweisen.
4. Um diese Props innerhalb der Kindkomponente Card zu verwenden, Zugriff über Punktnotation, da props ein Objekt ist.