Dé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 :
- Créer un composant
Cardservant de modèle de carte réutilisable. - 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.
- Utiliser le composant
Carddeux fois dans le composantAppafin 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 :
- Il est possible d'utiliser le même composant
Cardpour les deux cartes et de contrôler leur contenu à l'aide des props. - Pour transmettre l'URL en tant que prop, créer une prop nommée
linket fournir l'URL comme valeur. Encadrer la valeur par des guillemets doubles puisqu'il s'agit d'une chaîne de caractères. - De la même manière, créer des props pour
altetdescriptionet fournir les valeurs appropriées. - Pour utiliser ces props dans le composant enfant
Card, y accéder en utilisant la notation par points, carpropsest un objet.
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
Awesome!
Completion rate improved to 2.17
Dé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 :
- Créer un composant
Cardservant de modèle de carte réutilisable. - 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.
- Utiliser le composant
Carddeux fois dans le composantAppafin 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 :
- Il est possible d'utiliser le même composant
Cardpour les deux cartes et de contrôler leur contenu à l'aide des props. - Pour transmettre l'URL en tant que prop, créer une prop nommée
linket fournir l'URL comme valeur. Encadrer la valeur par des guillemets doubles puisqu'il s'agit d'une chaîne de caractères. - De la même manière, créer des props pour
altetdescriptionet fournir les valeurs appropriées. - Pour utiliser ces props dans le composant enfant
Card, y accéder en utilisant la notation par points, carpropsest un objet.
Merci pour vos commentaires !