Скачать или смотреть Копия Miro на чистом React | Без стейт менеджеров! Часть 2

Подробнее о сообществе: https://paromovevg.ru/evolution-commu...

Карта всего контента сообщества:
https://evocomm.space/map

Антипаттерны React
   • ТОП 7 Антипаттернов React. Ошибки, которые...  

Курс по паттернам:
https://evocomm.space/course/react-pa...

Мой telegram канал:
https://t.me/cleanfrontend

Исходники:
https://github.com/clean-frontend/mir...

Материалы:
https://github.com/clean-frontend/mir...

В видео мы разработаем копию 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 Что дальше