Contenu du cours
Maîtrise de React
Maîtrise de React
Défi : Composants Fonctionnels
Tâche : Créer une Source d'Encyclopédie
Dans cette tâche, vous allez créer une source d'encyclopédie composée de deux cartes. Chaque carte affichera une image et une description. L'objectif est de pratiquer la création de composants fonctionnels et le passage de données aux composants enfants en utilisant des props.
Instructions :
Créez un composant
Card
comme modèle de carte réutilisable.Dans le composant
Card
, acceptez les props suivantes :link
: L'URL de l'image pour la carte ;alt
: Le texte alternatif pour l'image ;description
: Le texte de description pour la carte.
Utilisez le composant
Card
deux fois dans le composantApp
pour 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 : Fournissez une description appropriée.
Description : "Le soleil brillait intensément, projetant une lueur chaude sur la plage tranquille."
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 : Fournissez une description appropriée.
Description : "Le randonneur regardait avec admiration la montagne majestueuse qui se dressait devant lui."
Assurez-vous que les composants Card
et App
sont modifiés de manière appropriée pour afficher correctement les cartes.
Voici un code de départ avec des espaces réservés à compléter :
Vous pouvez utiliser le même composant
Card
pour les deux cartes et contrôler leur contenu en utilisant des props.Pour passer l'URL en tant que prop, créez une prop appelée
link
et fournissez l'URL comme valeur. Enclenchez la valeur entre guillemets doubles puisqu'il s'agit d'une chaîne de caractères.De même, créez des props pour
alt
etdescription
et fournissez les valeurs appropriées.Pour utiliser ces props dans le composant enfant
Card
, accédez-y en utilisant la notation par point puisqueprops
est un objet.
Merci pour vos commentaires !