1 of 8

React

Лабораторна робота №2. Props, state, hooks

2 of 8

React Hook

React-хук - це функція, яка дозволяє використовувати та змінювати стан компоненту без написання класу

React постачає готовий набір хуків для побудови компонентів

Можна створювати власні хуки, для створення специфічної поведінки компонентів

3 of 8

Створіть проект new-app з create-react-app

Для дизайну використати один із React UI-фреймворків

https://react-bootstrap.netlify.app/docs/components/carousel

​

4 of 8

Створіть компонент для зміни текстового рядка.

Завдання 1. Зміна стану компоненту (useState)

5 of 8

Завдання 2. Компонент MyCounter

Створіть компонент з лічильником. Додайте можливість зміни рахунку.

Початкове, мінімальне та максимальне значення передаються через props

6 of 8

Завдання 3. Список компонентів MyCounter

Використайте компонент MyCounter для створення списку лічильників.

Вихідні дані для лічильників беруться з масиву.

Додайте значення за замовчуванням

7 of 8

Завдання 4. Компонент ProductApp

8 of 8

Завдання 5. Компонент Слайдер(анімація не обов'язкова)

Вимоги:

  • Зображення динамічні (надходять з масиву)
  • Слайдер циклічний
  • Кнопки управління динамічні (їх к-сть залежить від к-сті зображень)