Лабораторна робота №7: React. Компоненти, стан, властивості

Опис проєкту

Цей проєкт є React-застосунком, що складається з двох частин:

1. Реалізація функціоналу Лабораторної роботи №4 з використанням компонентного підходу React. Включає функціональні та класові компоненти, керування станом та передачу функцій через props.
2. Створення галереї товарів з використанням багаторазового компонента GoodsCard та передачі даних через props.

Використані концепції React

• Компоненти: Застосунок розділено на логічні частини (Header, Content, Image, GoodsCard).
• Функціональні та Класові компоненти: Header, Image, GoodsCard реалізовані як функціональні компоненти, а Content — як класовий.
• Стан (State): Використовується хук useState в App.js для керування зображенням та this.state в Content.js для підсвічування елементів.
• Властивості (Props): Дані та функції-обробники передаються від батьківських компонентів до дочірніх.
• Рендеринг списків: Галерея товарів генерується динамічно за допомогою методу .map().
• JSX: Розмітка створюється за допомогою синтаксису JSX.

---

Використані технології

• React — бібліотека для створення користувацьких інтерфейсів.
• Node.js / npm — середовище виконання та менеджер пакетів.
• Create React App — інструмент для швидкого налаштування React-проєктів.
• JavaScript (ES6+) — основна мова програмування.
• HTML5 & CSS3 — для структури та стилізації.

---

Документація

• Офіційна документація React: https://react.dev/
• Компоненти та props: https://react.dev/learn/passing-props-to-a-component
• Стан та життєвий цикл: https://react.dev/learn/state-a-components-memory
• Create React App: https://create-react-app.dev/docs/getting-started

---

Локальний запуск

Щоб запустити проєкт локально, виконайте наступні кроки:

1. Клонуйте репозиторій:

   git clone https://github.com/Ratarekko/Front-End-Lab7

2. Перейдіть до папки проєкту:

   cd Front-End-Lab7

3. Встановіть залежності:

   npm install

4. Запустіть застосунок:

   npm start

Після цього проєкт відкриється у вашому браузері за адресою http://localhost:3000.