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

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

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

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

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

(підпис)
__20.09.2023 __
(дата)

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

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

Миколаїв – 2023
 ЛАБОРАТОРНА РОБОТА №1
Тема роботи: Cтворення React FrontEnd проекту.
Завдання:
- Перетворити створені компоненти на елементи сайту(шапка, тіло, нижня
частина, меню) (якщо це не було зроблено)
- Створити список елементів (товарів наприклад) в App.js (це тимчасово)
- Передати список та створити на його основі компоненти з можливістю
натиснути checkbox для обирання товару
- *Кількість обраних товарів передавати через callback в компоненту яка в
собі містить компоненти з товарами ( можна зверху справа лічильник)
- *Реалізувати в окремі компоненти кнопки для входу та виходу (поки що
вікно входу не реалізовуємо) які змінюють один одного за допомогою state в
app.js та за допомогою props та callback передаються в компоненту меню (або
шапки, тут за бажанням щодо розміщення кнопки)
Теоретична частина:

1. State (стан): State - це спеціальний об'єкт, який використовується для

зберігання даних, які можуть змінюватися під час життєвого циклу компонента.
Кожен React-компонент може мати власний стан. Зміни стану спричиняють
перерендер компонента, що дозволяє оновлювати вміст інтерфейсу користувача.
2. Callback та Props, головні відмінності:

 Props (властивості) - це дані, які передаються компоненту ззовні. Вони є

нещільними (immutable), тобто компонент не може змінювати свої власності
(props). Властивості передаються вниз по ієрархії компонентів і
використовуються для передачі даних від батьківського компонента до
дочірнього.

 Callback - це функція, яка передається в компонент як частина props і

може бути викликана з компонента. Callbacks часто використовуються для
передачі функцій між компонентами, таким чином, що дочірній компонент може
сповістити батьківський компонент про подію або запит на зміну стану.

Головна відмінність полягає в тому, що props - це дані, а callback - це

функція для виконання певних дій. Проте обидва можуть передавати дані між
компонентами.

3. Зміна props: Props є нещільними (immutable), тобто компонент, який

отримує props, не повинен їх змінювати. Змінювати props за допомогою
this.props.element = є поганою практикою і призведе до непередбачуваного
поведінки. React рекомендує вважати props тільки для читання і використовувати
стан для зберігання змінних даних.
4. Різниця між componentWillMount та componentWillUnmount:

 componentWillMount: Цей метод викликається перед тим, як компонент

буде вставлений до DOM. Викликається лише один раз перед першим
рендерингом компонента. Це може бути використано для налаштування даних,
але зазвичай краще використовувати constructor для ініціалізації стану.

 componentWillUnmount: Цей метод викликається перед тим, як компонент

буде вилучений з DOM. Він викликається один раз, коли компонент видаляється з
DOM. Це може бути використано для очищення ресурсів, таких як підписки на
події або таймери, щоб уникнути утечок пам'яті.

Основна різниця полягає в моменті виклику та призначенні.

componentWillMount викликається перед першим рендерингом, а
componentWillUnmount перед вилученням компонента з DOM.

Практична частина:
https://github.com/SyntaxConqueror/webDev__Proj/tree/master
 Рисунок 1 ₋₋ Компоненти на сторінці
Висновки: у ході виконання роботи було створено новий компонент Main
Container. У цьому компоненті також було створено ще декілька: ProductsList та
ListItem, де описано список товарів, та створено лічильник відмічених товарів. У
компоненті Header було створено компоненти Login та Logout, які змінюються в
залежності від того який натиснено. Звіт оформлено згідно рекомендацій.