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

В этом ролике рассказывается о реализации рекурсивных алгоритмов, 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 Заключение, возможные баги и явный недостаток нынешней реализации для большого и вложенного дерева. Ссылка на исходный код проекта:
⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут:
Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату