Kursinhalt
React-Meisterschaft
React-Meisterschaft
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:
Erstellen Sie eine
Card
-Komponente als wiederverwendbare Kartenvorlage.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.
Verwenden Sie die
Card
-Komponente zweimal in derApp
-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:
Sie können die gleiche
Card
-Komponente für beide Karten verwenden und deren Inhalt mit Props steuern.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.Erstellen Sie ähnlich Props für
alt
unddescription
und geben Sie die entsprechenden Werte an.Um diese Props innerhalb der Kindkomponente
Card
zu verwenden, greifen Sie mit Punktnotation darauf zu, daprops
ein Objekt ist.
Danke für Ihr Feedback!