Herausforderung: Ein Element in React Rendern
Hinweis
Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerstellen enthalten, in die der erforderliche Code eingefügt werden muss. Sobald diese Leerstellen korrekt ausgefüllt sind, 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
liefert kleine Hinweise zur aktuellen Aufgabe, während die Auswahl der SchaltflächeLösung
die vollständige Lösung in einem neuen Tab öffnet.
Arbeiten mit Code Sandbox
Aufgabe: Erstellen einer Produktkarte
Die Produktkarte erstellen und im DOM rendern. Die Produktkarte benötigt:
- Das Produktbild (
img
-Element).- Das
src
-Attribut muss dem Wert der VariablenimageUrl
entsprechen. - Das
alt
-Attribut muss dem StringComputer
entsprechen. - Das
width
-Attribut muss den Wert256
haben.
- Das
- Den Produkttitel (
h3
-Element).- Der Textinhalt muss
Computer
sein.
- Der Textinhalt muss
- Den Produktpreis (
span
-Element).- Der Textinhalt muss
Price: $129.99
sein.
- Der Textinhalt muss
- Die Produktbeschreibung (
p
-Element).- Der Textinhalt muss
New Model
sein.
- Der Textinhalt muss
- Das
src
-Attribut muss die VariableimageUrl
als Wert enthalten. Verwenden Sie geschweifte Klammern{}
. - Das
alt
-Attribut muss den String"Computer"
als Wert enthalten. In doppelte Anführungszeichen setzen. - Das
width
-Attribut muss die Zahl256
als Wert enthalten. Verwenden Sie geschweifte Klammern{}
. - Sicherstellen, dass die
h3
-,span
- undp
-Elemente die korrekten Werte enthalten.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to use the Hint and Solution buttons?
What should I do if the live page doesn't render after making changes?
Can you walk me through creating the product card step by step?
Awesome!
Completion rate improved to 2.17
Herausforderung: Ein Element in React Rendern
Swipe um das Menü anzuzeigen
Hinweis
Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerstellen enthalten, in die der erforderliche Code eingefügt werden muss. Sobald diese Leerstellen korrekt ausgefüllt sind, 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
liefert kleine Hinweise zur aktuellen Aufgabe, während die Auswahl der SchaltflächeLösung
die vollständige Lösung in einem neuen Tab öffnet.
Arbeiten mit Code Sandbox
Aufgabe: Erstellen einer Produktkarte
Die Produktkarte erstellen und im DOM rendern. Die Produktkarte benötigt:
- Das Produktbild (
img
-Element).- Das
src
-Attribut muss dem Wert der VariablenimageUrl
entsprechen. - Das
alt
-Attribut muss dem StringComputer
entsprechen. - Das
width
-Attribut muss den Wert256
haben.
- Das
- Den Produkttitel (
h3
-Element).- Der Textinhalt muss
Computer
sein.
- Der Textinhalt muss
- Den Produktpreis (
span
-Element).- Der Textinhalt muss
Price: $129.99
sein.
- Der Textinhalt muss
- Die Produktbeschreibung (
p
-Element).- Der Textinhalt muss
New Model
sein.
- Der Textinhalt muss
- Das
src
-Attribut muss die VariableimageUrl
als Wert enthalten. Verwenden Sie geschweifte Klammern{}
. - Das
alt
-Attribut muss den String"Computer"
als Wert enthalten. In doppelte Anführungszeichen setzen. - Das
width
-Attribut muss die Zahl256
als Wert enthalten. Verwenden Sie geschweifte Klammern{}
. - Sicherstellen, dass die
h3
-,span
- undp
-Elemente die korrekten Werte enthalten.
Danke für Ihr Feedback!