Défi : Afficher un Élément dans React
Remarque
Tous les défis peuvent sembler défectueux par défaut, car ils contiennent des espaces vides où vous devez saisir le code nécessaire. Une fois ces espaces correctement complétés, le code final s'affichera sur la page en direct.
De plus, chaque défi propose deux boutons :
Indice
etSolution
. Cliquer surIndice
fournit de petites indications pour le défi en cours, tandis que le boutonSolution
ouvre un nouvel onglet avec le défi complété.
Comment utiliser Code Sandbox
Tâche : Création d'une carte produit
Créer la carte produit et l'afficher dans le DOM. La carte produit doit comporter :
- L'image du produit (élément
img
).- L'attribut
src
doit être égal à la variableimageUrl
. - L'attribut
alt
doit être égal à la chaîne de caractèresComputer
. - L'attribut
width
doit être égal à256
.
- L'attribut
- Le titre du produit (élément
h3
).- Son contenu textuel doit être
Computer
.
- Son contenu textuel doit être
- Le prix du produit (élément
span
).- Son contenu textuel doit être
Price: $129.99
.
- Son contenu textuel doit être
- La description du produit (élément
p
).- Son contenu textuel doit être
New Model
.
- Son contenu textuel doit être
- L'attribut
src
doit contenir la variableimageUrl
comme valeur. Utiliser des accolades{}
. - L'attribut
alt
doit contenir la chaîne"Computer"
comme valeur. L'entourer de guillemets doubles. - L'attribut
width
doit contenir le nombre256
comme valeur. Utiliser des accolades{}
. - Vérifier que les éléments
h3
,span
etp
ont les valeurs correctes.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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
Défi : Afficher un Élément dans React
Glissez pour afficher le menu
Remarque
Tous les défis peuvent sembler défectueux par défaut, car ils contiennent des espaces vides où vous devez saisir le code nécessaire. Une fois ces espaces correctement complétés, le code final s'affichera sur la page en direct.
De plus, chaque défi propose deux boutons :
Indice
etSolution
. Cliquer surIndice
fournit de petites indications pour le défi en cours, tandis que le boutonSolution
ouvre un nouvel onglet avec le défi complété.
Comment utiliser Code Sandbox
Tâche : Création d'une carte produit
Créer la carte produit et l'afficher dans le DOM. La carte produit doit comporter :
- L'image du produit (élément
img
).- L'attribut
src
doit être égal à la variableimageUrl
. - L'attribut
alt
doit être égal à la chaîne de caractèresComputer
. - L'attribut
width
doit être égal à256
.
- L'attribut
- Le titre du produit (élément
h3
).- Son contenu textuel doit être
Computer
.
- Son contenu textuel doit être
- Le prix du produit (élément
span
).- Son contenu textuel doit être
Price: $129.99
.
- Son contenu textuel doit être
- La description du produit (élément
p
).- Son contenu textuel doit être
New Model
.
- Son contenu textuel doit être
- L'attribut
src
doit contenir la variableimageUrl
comme valeur. Utiliser des accolades{}
. - L'attribut
alt
doit contenir la chaîne"Computer"
comme valeur. L'entourer de guillemets doubles. - L'attribut
width
doit contenir le nombre256
comme valeur. Utiliser des accolades{}
. - Vérifier que les éléments
h3
,span
etp
ont les valeurs correctes.
Merci pour vos commentaires !