Скачать или смотреть ⚙️ Весь 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 ​