Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Afficher un Élément dans React | Fondamentaux de React et Interface Utilisateur Basée sur les Composants
Maîtrise de React

bookDé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 et Solution. Cliquer sur Indice fournit de petites indications pour le défi en cours, tandis que le bouton Solution 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 :

  1. L'image du produit (élément img).
    • L'attribut src doit être égal à la variable imageUrl.
    • L'attribut alt doit être égal à la chaîne de caractères Computer.
    • L'attribut width doit être égal à 256.
  2. Le titre du produit (élément h3).
    • Son contenu textuel doit être Computer.
  3. Le prix du produit (élément span).
    • Son contenu textuel doit être Price: $129.99.
  4. La description du produit (élément p).
    • Son contenu textuel doit être New Model.
  1. L'attribut src doit contenir la variable imageUrl comme valeur. Utiliser des accolades {}.
  2. L'attribut alt doit contenir la chaîne "Computer" comme valeur. L'entourer de guillemets doubles.
  3. L'attribut width doit contenir le nombre 256 comme valeur. Utiliser des accolades {}.
  4. Vérifier que les éléments h3span et p ont les valeurs correctes.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 7

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

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

bookDé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 et Solution. Cliquer sur Indice fournit de petites indications pour le défi en cours, tandis que le bouton Solution 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 :

  1. L'image du produit (élément img).
    • L'attribut src doit être égal à la variable imageUrl.
    • L'attribut alt doit être égal à la chaîne de caractères Computer.
    • L'attribut width doit être égal à 256.
  2. Le titre du produit (élément h3).
    • Son contenu textuel doit être Computer.
  3. Le prix du produit (élément span).
    • Son contenu textuel doit être Price: $129.99.
  4. La description du produit (élément p).
    • Son contenu textuel doit être New Model.
  1. L'attribut src doit contenir la variable imageUrl comme valeur. Utiliser des accolades {}.
  2. L'attribut alt doit contenir la chaîne "Computer" comme valeur. L'entourer de guillemets doubles.
  3. L'attribut width doit contenir le nombre 256 comme valeur. Utiliser des accolades {}.
  4. Vérifier que les éléments h3span et p ont les valeurs correctes.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 7
some-alt