МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

Чорноморський національний університет

імені Петра Могили
Факультет комп’ютерних наук
Кафедра інженерії програмного забезпечення

ЗВІТ
з лабораторної роботи № 5
«Cтворення React FrontEnd проекту»
Варіант №31
Дисципліна «Web Development»
Спеціальність «Інженерія програмного забезпечення»
121–ЛР.05–309.22110925

Cтудент __________А. Р. Швець

(підпис)
__07.11.2023 __
(дата)

Викладач _________ Є. Д. Стоєв

(підпис)
_____________
(дата)

Миколаїв – 2023
 ЛАБОРАТОРНА РОБОТА №4
Тема роботи: Cтворення React FrontEnd проекту.
Завдання:
- Реалізувати роботу даних через контекст
- Відобразити використання декількох контекстів

- Створити кілька посилань за допомогою react-router

- *За допомогою нього-ж створити посилання на всі категорії

- *Створити історію перебування користувача на різних посиланнях та

відобразити її в окремому тимчасовому вікні “debug”

Теоретична частина:

1. Контекст в React - це механізм, який дозволяє передавати дані вниз по

компонентній ієрархії без необхідності передачі пропсів через кожен проміжний
компонент. Використовується для спрощення обміну даними між компонентами.
2. React.createContext() - це функція для створення нового контексту, яку
ви використовуєте, щоб створити новий контекст для вашого додатку.
<MyContext.Provider> - це компонент-постачальник контексту, який дозволяє
вам передавати дані в контекст. Ви використовуєте <MyContext.Provider> для
встановлення значення контексту, яке потім можна отримати в споживачах
контексту.

3. Provider та Consumer - це частини контексту. Provider встановлює

значення контексту, і Consumer отримує це значення. Ви використовуєте Provider,
щоб надати дані в контекст, і Consumer, щоб отримати ці дані.

4. Щоб використовувати декілька контекстів, ви можете створити кілька

окремих контекстів за допомогою React.createContext() та використовувати їх
відповідно в компонентах за допомогою відповідних Provider та Consumer
компонентів.
 5. Основні компоненти бібліотеки React Router включають Route, Switch,
Redirect, Link, NavLink, та багато інших. Вони використовуються для реалізації
маршрутизації в React додатках.

6. Різниця між BrowserRouter та HashRouter полягає в тому, як вони

обробляють маршрути. BrowserRouter використовує стандартний шлях
(наприклад, "/about"), тоді як HashRouter використовує хеш-фрагменти
(наприклад, "/#about"). Також існують інші види Router, такі як MemoryRouter та
StaticRouter, які призначені для різних середовищ і використовуються для
серверного рендерингу та тестування.

7. Пошук елементу за маршрутом в React Router відбувається завдяки

відповідному Route компоненту, який визначає, які компоненти відображати при
певних URL-маршрутах.

8. React Router надає різні хуки для роботи з маршрутизацією, такі як

useHistory, useLocation, useParams, і useRouteMatch. Вони дозволяють вам
отримувати доступ до інформації про поточний маршрут, URL, параметри та
відповідність маршрутам.

9. History - це об'єкт, який використовується для маніпулювання історією

перегляду браузера, наприклад, для переходу на іншу сторінку, навігації
вперед/назад тощо.

10. Об'єкт локації - це об'єкт, який містить інформацію про поточний URL
та інші параметри локації (наприклад, pathname, search, hash). Ви можете
отримати доступ до нього за допомогою useLocation хука в React Router.

Практична частина:
https://github.com/SyntaxConqueror/webDev__Proj/tree/master
 Рисунок 1 ₋₋ Компоненти на сторінці
Висновки: у ході виконання роботи було створено два нових компоненти
HistoryProvider та DebugPage. Ці компоненти є функціональними, а також
виконують функцію провайдера та модального вікна. Звіт оформлено згідно
рекомендацій.