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 :

1. Créez un composant Card comme modèle de carte réutilisable.
2. 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.
3. Utilisez le composant Card deux fois dans le composant App 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 :

1. Vous pouvez utiliser le même composant Card pour les deux cartes et contrôler leur contenu en utilisant des props.
2. 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.
3. De même, créez des props pour alt et description et fournissez les valeurs appropriées.
4. Pour utiliser ces props dans le composant enfant Card, accédez-y en utilisant la notation par point puisque props est un objet.