⚙️ Весь React в 200 строках JavaScript — и Вы поймёте его навсегда

Хотите наконец понять, как работает React под капотом? В этом видео мы напишем мини-React с нуля — без зависимостей, без библиотек и без магии. Всего 200 строк чистого JavaScript, и вы увидите: • как создаётся Virtual DOM, • почему обновление интерфейса — это просто вызов функции, • как работает useState и useMemo, • и почему весь React — это не фреймворк, а идея. 👨💻 Мы шаг за шагом создадим свой движок, добавим поддержку JSX-подобного синтаксиса и напишем два компонента: Viewer и Counter. К концу видео вы сможете объяснить, как работает React… даже тем, кто его создал 😉 📘 Исходные коды проекта здесь: https://github.com/easy-linux/VanillaJS/tree/master/examples/MyOwnReact 💬 Делитесь в комментариях, что бы вы добавили в свой мини-React! ⏱ Таймкоды: 00:00 — Вступление. Что если React — это просто функции? 00:40 — Главная идея: UI как функция состояния 01:20 — Функция createElement - сердце виртуального мира React 02:37 — Функция для создания Fragment - контейнера, не влияющего на структуру DOM 03:24 — Рендеринг DOM руками 04:40 — Виртуальный DOM — зачем он нужен? 05:25 — Обновление элементов виртуального DOM 06:29 — Мини-реализация useState 08:34 — Мини-реализация useMemo 10:21 — Функция запуска рендера дерева виртуальных компонентов 11:37 — Функция запуска приложения 12:10 — Реализация корневого компонента App 12:34 — Какие задачи решает JSX и реализованный простой JSX- подобный парсер 13:48 — Парсер для разбора html подобной строки 15:10 — Разбор структуры корневого компонента App 15:50 — Запуск приложения 16:10 — Разбор компонентов Counter и Viewer 18:45 — Меняем рендер на базе createElement на использование JSX-подобного парсера 19:13 — Финальный запуск приложения и выводы 💡 Подходит для: фронтенд-разработчиков, студентов и всех, кто хочет понять, как под капотом работают React. 🔔 Подписывайтесь на канал, чтобы не пропустить новые видео 💎 Сериал "Создание SPA приложения на чистом JS": https://www.youtube.com/watch?v=eqAefmCqA6M&list=PLCh6bwt6jth_fkFrU15eyY6Hv18NuWcwa 💎 Полезные видео для лучшего понимания JS: Стрелочные функции 1 - https://youtu.be/21wNsy72BKg Стрелочные функции 2 - https://youtu.be/DlQYk3ZvERo Макро и микро задачи - https://youtu.be/cVzwEowLe08 Web worker - https://youtu.be/ZqjDBxt8DYo Service worker - https://youtu.be/kV9Gq6FrABg Debouncing/throttling - https://youtu.be/P09SxTfQkVY 💎 Видео по работе с vite.js: https://youtu.be/t98Q9hliZZo 💎 Полезные видео по настройке webpack: Минимальная конфигурация - https://youtu.be/unEl3Hezwpw Настройка горячей перезагрузки - https://youtu.be/oOpzkF2nU0s Настройка сборки проекта с подгрузкой файлов css/scss/изображений - https://youtu.be/3B-NGZmMe-Y Настройка сборки мультистраничного сайта - https://youtu.be/aMzCDR_MHF0 💎 Самый простой способ установить nodejs на Linux и Mac: https://youtu.be/gP4OPx2vBoc #easyit #javascript #js #vanillajs @EasyITChannel