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

Хотите наконец понять, как работает React под капотом? В этом видео мы напишем мини-React с нуля — без зависимостей, без библиотек и без магии. Всего 200 строк чистого JavaScript, и вы увидите: • как создаётся Virtual DOM, • почему обновление интерфейса — это просто вызов функции, • как работает useState и useMemo, • и почему весь React — это не фреймворк, а идея. Мы шаг за шагом создадим свой движок, добавим поддержку JSX-подобного синтаксиса и напишем два компонента: Viewer и Counter. К концу видео вы сможете объяснить, как работает React… даже тем, кто его создал Исходные коды проекта здесь:
Делитесь в комментариях, что бы вы добавили в свой мини-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": • SPA приложение на чистом JS - часть 1 #eas... Полезные видео для лучшего понимания JS: Стрелочные функции 1 - • Стрелочные функции | Arrow functions Стрелочные функции 2 - • Особенности стрелочных функций #easyit #n... Макро и микро задачи - • Макро и Микро задачи в JavaScript #easyit... Web worker - • Web worker - как распараллелить вычислени... Service worker - • Service worker - управление обработкой за... Debouncing/throttling - • Debouncing/Throttling - разгрузка обработч... Видео по работе с vite.js: • Знакомимся с Vitejs. Портирование проекта,... Полезные видео по настройке webpack: Минимальная конфигурация - • Настраиваем сборку проекта с помощью webpack Настройка горячей перезагрузки - • Webpack 5 Настройка горячей перезагрузки |... Настройка сборки проекта с подгрузкой файлов css/scss/изображений - • Webpack 5 Настройка сборки проекта с подгр... Настройка сборки мультистраничного сайта - • Пример конфигурации сборки мульти-страничн... Самый простой способ установить nodejs на Linux и Mac: • Установка Nodejs на Linux и MacOS. #easyit #javascript #js #vanillajs @EasyITChannel