https://peertube.lightnode.ru/videos/watch/bacdee32-5850-491a-9a11-f02a14899b5a Подробнее о сообществе: https://paromovevg.ru/evolution-community Карта всего контента сообщества: https://evocomm.space/map Антипаттерны React https://www.youtube.com/watch?v=b2o-iJzAfTc Курс по паттернам: https://evocomm.space/course/react-patterns Мой telegram канал: https://t.me/cleanfrontend Исходники: https://github.com/clean-frontend/miro-code/tree/miro-board Материалы: https://github.com/clean-frontend/miro-materials/blob/main/board/ui.tsx В видео мы разработаем копию miro доски на чистом React без использования стейт менеджеров. Реализуем: Работу со стикерами, перемещение, зум, svg стрелки Используем паттерны State и Decorator из GOF адаптированные по современный React 00:00:00 - 00 Что будет в видео 00:01:59 - 01 Базовая вёрстка 00:07:36 - 02 Добавление ноды 00:23:59 - 03 Считываем размер и положение canvas через реф 00:31:15 - 04 Обработка горячих клавиш 00:36:25 - 05 Фокус на переключение табов 00:39:20 - 06 Выделение по клику 00:52:08 - 07 Добавляем State паттерн 01:29:37 - 08 Добавляем окно выделения 02:21:05 - 09 Рефакторинг ui 02:24:28 - 10 Считываем размеры нод через реф 02:57:07 - 11 Редактирование текста ноды 03:12:54 - 12 Автоматический размер textarea 03:22:35 - 13 Рефакторинг idle state 03:40:46 - 14 Перетаскивание стикеров 04:01:40 - 15 Перемещение карты 04:25:23 - 16 Zoom на карте 04:45:38 - 17 Отрисовка точек через css переменные 04:53:01 - 18 Отрисовка стрелок через canvas 05:11:07 - 19 Добавление стрелок в логику состояний 05:37:18 - 20 Выносим общую логику actions в декоратор 05:46:38 - 21 Рисование стрелок на карте 05:59:59 - 22 Добавление относительных точек. И поддержка стрелок 06:42:55 - 23 Что дальше Mon, 27 Jul 2026 02:05:38 GMT https://validator.w3.org/feed/docs/rss2.html PeerTube - https://peertube.lightnode.ru https://peertube.lightnode.ru/client/assets/images/icons/icon-96x96.png https://peertube.lightnode.ru/videos/watch/bacdee32-5850-491a-9a11-f02a14899b5a All rights reserved, unless otherwise specified in the terms specified at https://peertube.lightnode.ru/about and potential licenses granted by each content's rightholder.