Зміст курсу
Опановуємо React
Опановуємо React
Челендж: Функціональні Компоненти
Завдання: Створення джерела енциклопедії
У цьому завданні вам потрібно створити джерело енциклопедії з двох карток. Кожна картка буде містити зображення та опис. Мета - попрактикуватися у створенні функціональних компонентів і передачі даних дочірнім компонентам за допомогою пропсів.
Інструкції:
Створіть компонент
Card
як шаблон картки для багаторазового використання.У компоненті
Card
прийміть наступні пропси:link
: URL-адреса зображення для картки.alt
: Альтернативний текст для зображення.description
: Текст опису для картки.
Двічі використовуйте компонент
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
належним чином модифіковані для коректного відображення карток.
You can use the same
Card
component for both cards and control their content using props.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.Similarly, create props for
alt
anddescription
and provide the appropriate values.To use these props within the child component
Card
, access them using dot notation sinceprops
is an object.
Дякуємо за ваш відгук!