Пошаговая инструкция
Создайте папку для компонентов
В папке src вашего проекта создайте новую папку с именем components.
# В терминале, находясь в папке проекта
mkdir src/components
Создайте файл компонента
Внутри папки components создайте файл CourseCard.js.
# В терминале
touch src/components/CourseCard.js
Напишите компонент CourseCard
Откройте файл CourseCard.js и добавьте следующий код:
import React from 'react';
function CourseCard({ title, price, image }) {
return (
);
}
export default CourseCard;
{title}
Цена: {price} руб.
Импортируйте компонент в App.js
Откройте файл src/App.js и добавьте импорт компонента:
import CourseCard from './components/CourseCard';
Используйте компонент в App.js
Замените содержимое функции return() на следующий код:
return (
Проверьте результат
Сохраните все изменения и проверьте, что в браузере отображаются три карточки с информацией о языковых курсах.
Если вы видите карточки с названиями курсов, ценами и изображениями, значит, задание выполнено верно.