Научиться отображать список курсов с использованием динамического рендеринга карточек.
Теоретическая часть
Динамический рендеринг — это процесс отображения элементов интерфейса на основе данных. Основные понятия:
map() — метод массива, который позволяет преобразовать каждый элемент массива и вернуть новый массив JSX-элементов
Ключи (keys) — уникальные идентификаторы для элементов списка, которые помогают React отслеживать изменения в списке
Композиция компонентов — построение сложных интерфейсов из более простых компонентов
В этой лабораторной работе мы создадим страницу "Курсы", где будут отображаться карточки с информацией о языковых курсах. Мы будем использовать компонент CourseCard, созданный в лабораторной работе №2, и массив данных о курсах.
Преимущества динамического рендеринга:
Упрощение кода
Легкость добавления/удаления элементов
Возможность фильтрации и сортировки данных
Интеграция с API и внешними источниками данных
Задание
Создать страницу "Курсы", которая отображает список курсов из массива данных с использованием компонента CourseCard.
Пошаговая инструкция
Создайте страницу Courses
В папке src/pages создайте файл Courses.js.
# В терминале
touch src/pages/Courses.js
Добавьте данные о курсах
Создайте массив с данными о курсах. Для начала можно использовать статический массив:
const coursesData = [
{
id: 1,
title: "Английский",
description: "Курс для начинающих и продолжающих. Уровни A1-C1.",
price: 15000,
image: "https://via.placeholder.com/300x200?text=Английский"
},
{
id: 2,
title: "Немецкий",
description: "Изучайте немецкий язык с носителями. Все уровни.",
price: 14000,
image: "https://via.placeholder.com/300x200?text=Немецкий"
},
{
id: 3,
title: "Французский",
description: "Курс французского языка для путешествий и работы.",
price: 13000,
image: "https://via.placeholder.com/300x200?text=Французский"
},
{
id: 4,
title: "Испанский",
description: "Испанский для начинающих и продолжающих.",
price: 12000,
image: "https://via.placeholder.com/300x200?text=Испанский"
}
];
Импортируйте компонент CourseCard
Убедитесь, что компонент CourseCard создан и доступен для импорта:
import CourseCard from '../components/CourseCard';
Создайте компонент Courses
Добавьте следующий код в файл Courses.js:
import React from 'react';
import CourseCard from '../components/CourseCard';
function Courses() {
const coursesData = [
// Данные о курсах из предыдущего шага
];
return (
Наши курсы
Выберите подходящий курс и начните обучение уже сегодня!
{coursesData.map(course => (
))}
);
}
export default Courses;
Модифицируйте компонент CourseCard
Откройте файл src/components/CourseCard.js и добавьте поддержку описания:
function CourseCard({ title, description, price, image }) {
return (
{title}
{description}
Цена: {price} руб.
);
}
Настройте маршрутизацию
Откройте файл src/App.js и добавьте маршрут для страницы Courses:
import Courses from './pages/Courses';
Затем добавьте новый маршрут в компонент Routes:
} />
Обновите навигацию
Откройте файл src/components/Navigation.js и убедитесь, что ссылка на страницу "Курсы" активна:
Курсы
Проверьте результат
Запустите проект (если еще не запущен):
npm start
Перейдите на страницу "Курсы" через навигационное меню и убедитесь, что все карточки курсов отображаются корректно.
Если вы видите 4 карточки с информацией о курсах, значит, динамический рендеринг реализован верно.
Пример страницы "Курсы" с динамическим рендерингом карточек
Критерии оценки
Критерий
Баллы
Карточки рендерятся через map()
4
Данные в массиве
3
Стили и структура
3
Итого
10
Связь с демонстрационным экзаменом
Эта лабораторная работа связана с профессиональной компетенцией:
ПК: Создавать программный код на стороне клиента в соответствии с техническим заданием
На демонстрационном экзамене вам потребуется реализовать страницу "Курсы" с динамическим отображением карточек, что является важной частью клиентской логики веб-приложения.
Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:
Навык разработки клиентской части веб-приложения в соответствии с техническим заданием
Умение применять выбранные языки программирования для написания программного кода
