Челендж: Функціональні Компоненти

Завдання: Створення джерела енциклопедії

У цьому завданні вам потрібно створити джерело енциклопедії з двох карток. Кожна картка буде містити зображення та опис. Мета - попрактикуватися у створенні функціональних компонентів і передачі даних дочірнім компонентам за допомогою пропсів.

Інструкції:

1. Створіть компонент Card як шаблон картки для багаторазового використання.
2. У компоненті Card прийміть наступні пропси:
   • link: URL-адреса зображення для картки.
   • alt: Альтернативний текст для зображення.
   • description: Текст опису для картки.
3. Двічі використовуйте компонент Card в компоненті App для створення двох карток з наступним вмістом:

• Картка 1 (Про Сонце):
  • URL-адреса зображення: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
  • Альтернативний текст: Надайте відповідний опис.
  • Опис: "The sun shone brightly, casting a warm glow across the tranquil beach."
• Картка 2 (Про гору):
  • URL-адреса зображення: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
  • Альтернативний текст: Надайте відповідний опис.
  • Опис: "The hiker gazed in awe at the majestic mountain towering before them."

Переконайтеся, що компоненти Card та App належним чином модифіковані для коректного відображення карток.

1. You can use the same Card component for both cards and control their content using props.
2. To pass the URL as a prop, create a prop called link and provide the URL as its value. Enclose the value in double quotes since it's a string.
3. Similarly, create props for alt and description and provide the appropriate values.
4. To use these props within the child component Card, access them using dot notation since props is an object.