React function component vs React class component

1.

React function component
vs
React class component

2.

Проще всего объявить React-компонент как функцию:
Эта функция — компонент, потому что она получает данные в одном объекте («пропсы») в качестве
параметра и возвращает React-элемент. Такие компоненты называются «функциональными», так
как они буквально являются функциями.

3.

Данный компонент выводит кнопку, нажатие на которую имитирует, с помощью функции setTimeout,
выполнение сетевого запроса, а затем выводит окно сообщения с подтверждением выполнения операции.
Например, если в props.user хранится 'Dan', то в окне сообщения, через три секунды, будет выведено
'Followed Dan'.

4.

Для каждой из этих кнопок, выполним следующую последовательность действий:
• Щёлкнем по кнопке.
• Изменим выбранный профиль до того, как после нажатия на кнопку прошли 3 секунды.
• Прочитаем текст, выведенный в окне сообщения.
В результате заметим следующие особенности:
• При щелчке по кнопке, сформированной функциональным компонентом, при выбранном профиле Dan и
при последующем переключении на профиль Sophie, в окне сообщения будет выведено 'Followed Dan'.
• Если сделать то же самое с кнопкой, сформированной компонентом, основанном на классе, будет
выведено 'Followed Sophie'.
В этом примере правильным является поведение функционального компонента.
«Если я подписался на чей-то профиль, а затем перешёл к другому профилю, мой компонент не должен
сомневаться в том, на чей именно профиль я подписался. Очевидно, реализация рассматриваемого механизма,
основанная на использовании классов, содержит ошибку .»

5.

Навигация с помощью ссылок
Параметры маршрутов

6.

Ссылки с параметрами

7.

Парсинг строки запроса
Из нее можно получить два объекта. Объект searchParams - по сути объект URLSearchParams, который доступен
в стандартном коде JavaScript и который позволяет получить из строки запроса параметры и управлять ими. И
объект setSearchParams - функция изменения объекта searchParams.
Используя функции get через searchParams можно получить параметры name и age:

8.

Условная переадресация
Программная навигация

9.

Задания
1. Подключить и настроить работу react-router так, чтобы на корневом маршруте / показывался набор
книг, на маршруте /addbook показывалась форма добавления, а на маршруте /about была информация
«о компании». На каждой странице должна быть возможность вернуться на главную страницу.
2. Сделать приложение со списком товаров. В котором есть возможность посмотреть данные
конкретного товара подробнее. А также, добавить возможность оставить отзыв о товаре на этой
странице. Все реализуем с помощью массива объектов. Для хранения отзывов создаем элемент
объекта, с данными о товаре, в виде объекта.