Kursinhalt
React-Meisterschaft
React-Meisterschaft
Herausforderung: Rendering-Element
Hinweis
Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerzeichen enthalten, in die Sie den erforderlichen Code eingeben müssen. Sobald Sie diese Leerzeichen korrekt ausgefüllt haben, wird der vollständige Code auf der Live-Seite angezeigt.
Zusätzlich verfügt jede Herausforderung über zwei Schaltflächen:
Hinweis
undLösung
. Ein Klick aufHinweis
bietet kleine Hinweise zur aktuellen Herausforderung, während die Auswahl der SchaltflächeLösung
einen neuen Tab mit der abgeschlossenen Herausforderung öffnet.
Wie man mit Code Sandbox arbeitet
Aufgabe: Erstellen einer Produktkarte
Erstellen Sie die Produktkarte und rendern Sie sie im DOM. Die Produktkarte benötigt:
Das Produktbild (
img
-Element).Das
src
-Attribut muss gleich der VariablenimageUrl
sein.Das
alt
-Attribut muss gleich dem StringComputer
sein.Das
width
-Attribut muss gleich256
sein.
Den Produkttitel (
h3
-Element).Der Textinhalt muss
Computer
sein.
Den Produktpreis (
span
-Element).Der Textinhalt muss
Preis: $129.99
sein.
Die Produktbeschreibung (
p
-Element).Der Textinhalt muss
Neues Modell
sein.
Das
src
-Attribut muss die VariableimageUrl
als Wert enthalten. Verwenden Sie geschweifte Klammern{}
.Das
alt
-Attribut muss den String"Computer"
als Wert enthalten. Umschließen Sie es in doppelte Anführungszeichen.Das
width
-Attribut muss die Zahl256
als Wert enthalten. Verwenden Sie geschweifte Klammern{}
.Stellen Sie sicher, dass die
h3
-,span
- undp
-Elemente die richtigen Werte haben.
Danke für Ihr Feedback!