Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Créer des Composants Fonctionnels | Fondamentaux de React et Interface Utilisateur Basée sur les Composants
Maîtrise de React

bookDéfi : Créer des Composants Fonctionnels

Tâche : Création d'une source encyclopédique

Dans cette tâche, il s'agit de créer une source encyclopédique composée de deux cartes. Chaque carte affichera une image et une description. L'objectif est de s'exercer à la création de composants fonctionnels et à la transmission de données aux composants enfants via les props.

Instructions :

  1. Créer un composant Card servant de modèle de carte réutilisable.
  2. Dans le composant Card, accepter les props suivantes :
    • link : L'URL de l'image pour la carte ;
    • alt : Le texte alternatif pour l'image ;
    • description : Le texte descriptif pour la carte.
  3. Utiliser le composant Card deux fois dans le composant App afin de créer deux cartes avec le contenu suivant :

Carte 1 (À propos du Soleil) :

  • URL de l'image : https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
  • Texte alternatif : Fournir une description appropriée.
  • Description : "The sun shone brightly, casting a warm glow across the tranquil beach."

Carte 2 (À propos de la Montagne) :

  • URL de l'image : https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
  • Texte alternatif : Fournir une description appropriée.
  • Description : "The hiker gazed in awe at the majestic mountain towering before them."

S'assurer que les composants Card et App sont correctement modifiés pour afficher les cartes de manière appropriée.

Voici un code de départ avec des espaces réservés à compléter :

  1. Il est possible d'utiliser le même composant Card pour les deux cartes et de contrôler leur contenu à l'aide des props.
  2. Pour transmettre l'URL en tant que prop, créer une prop nommée link et fournir l'URL comme valeur. Encadrer la valeur par des guillemets doubles puisqu'il s'agit d'une chaîne de caractères.
  3. De la même manière, créer des props pour alt et description et fournir les valeurs appropriées.
  4. Pour utiliser ces props dans le composant enfant Card, y accéder en utilisant la notation par points, car props est un objet.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 10

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

Awesome!

Completion rate improved to 2.17

bookDéfi : Créer des Composants Fonctionnels

Glissez pour afficher le menu

Tâche : Création d'une source encyclopédique

Dans cette tâche, il s'agit de créer une source encyclopédique composée de deux cartes. Chaque carte affichera une image et une description. L'objectif est de s'exercer à la création de composants fonctionnels et à la transmission de données aux composants enfants via les props.

Instructions :

  1. Créer un composant Card servant de modèle de carte réutilisable.
  2. Dans le composant Card, accepter les props suivantes :
    • link : L'URL de l'image pour la carte ;
    • alt : Le texte alternatif pour l'image ;
    • description : Le texte descriptif pour la carte.
  3. Utiliser le composant Card deux fois dans le composant App afin de créer deux cartes avec le contenu suivant :

Carte 1 (À propos du Soleil) :

  • URL de l'image : https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
  • Texte alternatif : Fournir une description appropriée.
  • Description : "The sun shone brightly, casting a warm glow across the tranquil beach."

Carte 2 (À propos de la Montagne) :

  • URL de l'image : https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
  • Texte alternatif : Fournir une description appropriée.
  • Description : "The hiker gazed in awe at the majestic mountain towering before them."

S'assurer que les composants Card et App sont correctement modifiés pour afficher les cartes de manière appropriée.

Voici un code de départ avec des espaces réservés à compléter :

  1. Il est possible d'utiliser le même composant Card pour les deux cartes et de contrôler leur contenu à l'aide des props.
  2. Pour transmettre l'URL en tant que prop, créer une prop nommée link et fournir l'URL comme valeur. Encadrer la valeur par des guillemets doubles puisqu'il s'agit d'une chaîne de caractères.
  3. De la même manière, créer des props pour alt et description et fournir les valeurs appropriées.
  4. Pour utiliser ces props dans le composant enfant Card, y accéder en utilisant la notation par points, car props est un objet.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 10
some-alt