Рекурсия, древовидная структура и drag-n-drop на примере реального React-компонента

У вашего броузера проблема в совместимости с HTML5

В этом ролике рассказывается о реализации рекурсивных алгоритмов, drag-n-drop и древовидной (а-ля файловой) структуры в рамках разработки React-компонента под конкретное ТЗ. То есть пример максимально реалистичный.

Я постарался “на пальцах” объяснить в практическом контексте работу рекурсии. Получилось достаточно длинно, однако, для полного понимания, даже внимательного просмотра недостаточно - нужно развернуть проект и себя и пройтись по всем сложным местам с помощью дебаггера, отслеживая что происходит.

А если у вас в процессе работы появятся мысли по улучшению и фиксу возможных багов, с удовольствием приму Pull Request’ы в репозиторий с исходнками, ссылку на который вы найдёте ниже.

СОДЕРЖАНИЕ РОЛИКА:
00:00:00 Вступление. Каков функционал и ограничения компонента?
00:02:30 Структура файлов. Процедура запуска проекта.
00:05:50 Рассматриваем как работает серверный код.
00:13:15 Как на сервере генерируется исходный JSON.
00:18:56 Начинаем смотреть фронтенд-код. Хелперы и дополнительный код.
00:29:51 Рассматриваем сам компонент FileStructure.
00:32:22 Про рекурсию в этом компоненте.
00:33:36 Обзорно про хендлеры в компоненте FileStructure.
00:36:17 Первичный запрос дерева и добавление uinqueId.
00:37:25 Разбираем рекурсию на примере функции transformJSONToAddUniqueIds. Сначала по логике кода.
00:47:38 Проходимся по функции transformJSONToAddUniqueIds пошагово с помощью дебаггера в браузере.
00:58:09 Как работает скрытие-раскрытие узлов дерева?
01:03:51 Про механизм переименования узлов дерева. Рекурсия в функции переименования узла.
01:11:21 Работа функции buildTree по формированию JSX-разметки. Окончание рассмотрения переименования.
01:20:52 Drag-n-Drop. Рассматриваем функции, отвечающие за него.
01:22:42 Рекурсивные функции для вырезания запрошенной ноды и вставка её в указанное место с обновлением дерева.
01:45:21 Функция сортировки узлов дерева.
01:50:03 Заключение, возможные баги и явный недостаток нынешней реализации для большого и вложенного дерева.

Ссылка на исходный код проекта: https://github.com/makewebme/video-observe-tree

????????????
Стань спонсором канала и получи бонусы: https://www.youtube.com/channel/UCt36CWL85NGtOgUMZ2X6x5g/join

???? ???? ????
Получи скидку 5% на первую оплату хостинга/домена в Reg.ru, используя промо-код:
948E-53B9-CF98-8204
Он вводится во время оплаты услуги.
Не забывай - ты не только получаешь скидку, но и поддерживаешь проект!

???? ???? ????
Присоединяйся к нашему Telegram-чату https://t.me/makewebme
Если не работает, то http://makeweb.me/telegram-mw-1 или http://makeweb.me/telegram-mw-2
Или по имени чата в поиске - @makewebme