Лабораторная работа №4: Условный рендеринг и списки

Цель работы

Научиться использовать map() и условный рендеринг для отображения списков данных.

Теоретическая часть

В React часто требуется отображать списки данных. Для этого используются методы JavaScript, такие как map(). Также важно уметь условно отображать элементы в зависимости от определенных условий.

Основные понятия:

map() — метод массива, который позволяет преобразовать каждый элемент массива и вернуть новый массив
Условный рендеринг — отображение элементов в зависимости от условия
Ключи (keys) — уникальные идентификаторы для элементов списка, которые помогают React отслеживать изменения в списке

Примеры условного рендеринга:

Тернарный оператор: {condition ? : }
Логический оператор &&: {condition && }
if-else в функции компонента

Задание

Отобразить список курсов. Если курс "Английский", выделите его красным цветом.

Пошаговая инструкция

Создайте компонент списка курсов

В папке src/components создайте новый файл CourseList.js.

# В терминале
touch src/components/CourseList.js

Создайте массив курсов

Откройте файл CourseList.js и добавьте массив курсов:

const courses = [
  { id: 1, title: "Английский", price: 15000 },
  { id: 2, title: "Французский", price: 13000 },
  { id: 3, title: "Немецкий", price: 14000 },
  { id: 4, title: "Испанский", price: 12000 }
];

Создайте компонент CourseList

Добавьте следующий код в файл CourseList.js:

function CourseList() {
  return (
    
      {courses.map(course => (
        
          {course.title} — {course.price} руб.
        
      ))}
    
  );
}

export default CourseList;

Импортируйте компонент в App.js

Откройте файл src/App.js и добавьте импорт компонента:

import CourseList from './components/CourseList';

Используйте компонент в App.js

Замените содержимое функции return() на следующий код:

return (
  
    Список курсов
    
);

Проверьте результат

Сохраните все изменения и проверьте, что в браузере отображается список курсов, где курс "Английский" выделен красным цветом.

Если курс "Английский" отображается красным цветом, а остальные курсы — черным, значит, условный рендеринг реализован верно.

Дополнительное задание

Модифицируйте компонент так, чтобы он отображал только курсы с ценой больше 13000 рублей.

function CourseList() {
  return (
    
      {courses.filter(course => course.price > 13000).map(course => (
        
          {course.title} — {course.price} руб.
        
      ))}
    
  );
}

Ожидаемый результат

Вы должны увидеть на странице список из четырех языковых курсов, где курс "Английский" выделен красным цветом, а остальные — черным. Если вы выполнили дополнительное задание, то должны увидеть только два курса (Английский и Немецкий), так как их цена больше 13000 рублей.

Критерий	Баллы
Использован `map()`	3
Условный рендеринг (if или тернарный оператор)	3
`key` в списке	2
Без ошибок	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать программный код на стороне клиента в соответствии с техническим заданием

На демонстрационном экзамене вам потребуется отображать список курсов с использованием динамического рендеринга, что является важной частью клиентской логики веб-приложения.

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Список курсов

Ожидаемый результат

Критерии оценки

Связь с демонстрационным экзаменом