nmk

Практична робота №2 (2 години)

Тема: Трансформація масивів даних. Відпрацювання методів map, filter та reduce для підготовки даних до відображення в React-компонентах.

Мета: Навчитися перетворювати “сирі” дані (масиви об’єктів) у React-компоненти, зрозуміти принцип роботи списків та ключів (keys), а також реалізувати базову бізнес-логіку (фільтрацію та агрегацію) на стороні клієнта.

Необхідні інструменти: Проєкт, створений на Практичному занятті №1 (Vite + React), редактор коду (VS Code).

План заняття

  1. Підготовка даних (Mock Data)
  2. Рендеринг списку (Array.map)
  3. Фільтрація даних (Array.filter)
  4. Агрегація даних (Array.reduce)
  5. Фіксація змін (Git)

Хід виконання роботи

Ми продовжуємо роботу в репозиторії, створеному на попередньому занятті. Всі нові функції розробляємо в окремій гілці, після чого зливаємо їх у master (або main).

1. Підготовка даних (Mock Data)

Для роботи з методами масивів нам потрібне джерело даних. Оскільки ми ще не підключаємо зовнішнє API, створимо статичний масив.

  1. Відкрийте термінал у папці проєкту та створіть нову гілку для роботи.
  2. У папці src створіть файл data.js.
  3. Додайте туди масив об’єктів (наприклад, список студентів та їх балів), який ми будемо виводити та фільтрувати.

2. Рендеринг списку (Array.map)

React покладається на JavaScript для генерації списків. Найчастіше використовується метод .map(), який трансформує масив даних у масив JSX-елементів.

  1. Відкрийте файл src/App.jsx.
  2. Імпортуйте масив даних.
  3. Використайте .map() для виведення списку всіх студентів.
  4. Перевірте результат у браузері (npm run dev).

3. Фільтрація даних (Array.filter)

Часто нам потрібно відображати не всі дані, а лише ті, що відповідають певним критеріям. У React це робиться через ланцюжок методів filter().map().

Завдання: Вивести окремим списком тільки активних студентів, які мають бал вище 60.

  1. Додайте в App.jsx новий розділ.
  2. Зверніть увагу, що спочатку ми відфільтрували масив (зменшили кількість елементів), і тільки потім перетворили його на JSX.

4. Агрегація даних (Array.reduce)

Іноді потрібно вивести загальну статистику (наприклад, суму товарів у кошику або середній бал). Для цього ідеально підходить метод .reduce().

Завдання: Підрахувати та вивести середній бал усіх активних студентів.

  1. Обчисліть значення перед return у компоненті App.
  2. Виведіть результат у JSX.

5. Фіксація змін (Git)

Оскільки ми працюємо в одному репозиторії, необхідно коректно зберегти зміни та влити їх у master.

  1. Перевірте статус файлів.
  2. Додайте файли до індексу та зробіть коміт.
  3. Перейдіть на гілку master (або main). (Примітка: якщо ваша головна гілка називається main, використовуйте main).
  4. Злийте зміни з робочої гілки.
  5. Видаліть тимчасову гілку (опціонально).

Завдання для самостійного виконання

  1. Сортування: Використовуючи метод .sort(), відобразіть список студентів у порядку спадання їхніх балів (від найбільшого до найменшого). Підказка: .sort() мутує масив, тому краще спочатку зробити копію: [...students].sort(...).
  2. Стилізація статусу: Змініть основний список (з Кроку 2) так, щоб ім’я неактивних студентів відображалося сірим кольором та закресленим шрифтом (textDecoration: 'line-through'), використовуючи тернарний оператор у стилях.

Контрольні запитання

  1. Чому при рендерингу масивів у React обов’язково використовувати атрибут key? Що станеться, якщо його не вказати? (Див. Лекцію 2).
  2. У чому різниця між методами .map() та .forEach()? Чому .forEach() не підходить для відображення елементів безпосередньо в JSX?
  3. Чому не рекомендується використовувати індекс масиву (index) як ключ, якщо список може змінюватися (сортуватися, фільтруватися)?

Результат заняття

У вашому репозиторії в головній гілці має бути робочий React-додаток, який відображає списки студентів, фільтрує їх за критеріями успішності та виводить обчислену статистику.