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

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

Хотите наконец понять, как работает React под капотом? В этом видео мы напишем мини-React с нуля — без зависимостей, без библиотек и без магии. Всего 200 строк чистого JavaScript, и вы увидите: • как создаётся Virtual DOM, • почему обновление интерфейса — это просто вызов функции, • как работает useState и useMemo, • и почему весь React — это не фреймворк, а идея. 👨‍💻 Мы шаг за шагом создадим свой движок, добавим поддержку JSX-подобного синтаксиса и напишем два компонента: Viewer и Counter. К концу видео вы сможете объяснить, как работает React… даже тем, кто его создал 😉 📘 Исходные коды проекта здесь: https://github.com/easy-linux/Vanilla... 💬 Делитесь в комментариях, что бы вы добавили в свой мини-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 ​