Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

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

Автор: Easy IT

Загружено: 2025-10-19

Просмотров: 7749

Описание:

Хотите наконец понять, как работает 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 ​

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

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(20) { ["W7topHn4kIo"]=> object(stdClass)#10506 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "W7topHn4kIo" ["related_video_title"]=> string(110) "🤖 GPT убьёт программистов? Правда, о которой молчат! #easyit @Easy IT" ["posted_time"]=> string(25) "3 месяца назад" ["channelName"]=> NULL } ["uXEJAg0vbv4"]=> object(stdClass)#10519 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "uXEJAg0vbv4" ["related_video_title"]=> string(153) "На работе, в ВУЗе, в школе заставляют ставить мессенджер MAX. Как защищаться по закону" ["posted_time"]=> string(19) "1 час назад" ["channelName"]=> NULL } ["Rg9CKBDEMRs"]=> object(stdClass)#10507 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "Rg9CKBDEMRs" ["related_video_title"]=> string(89) "Реактивность в JavaScript: от Object.defineProperty до Proxy и Computed" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> NULL } ["Z_cUS7kCAsE"]=> object(stdClass)#10504 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "Z_cUS7kCAsE" ["related_video_title"]=> string(25) "Docker за 20 минут" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> NULL } ["FWtKVtB-qsQ"]=> object(stdClass)#10499 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "FWtKVtB-qsQ" ["related_video_title"]=> string(90) "Ставлю 340 нейросетей на ПК за 15 минут (не кликбейт)" ["posted_time"]=> string(22) "12 дней назад" ["channelName"]=> NULL } ["JVtWJ6BxKas"]=> object(stdClass)#10520 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "JVtWJ6BxKas" ["related_video_title"]=> string(52) "5 продвинутых паттернов в React" ["posted_time"]=> string(28) "10 месяцев назад" ["channelName"]=> NULL } ["vNYRwSNUnvY"]=> object(stdClass)#10496 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "vNYRwSNUnvY" ["related_video_title"]=> string(99) "💡 JavaScript: Callable, Thenable, Promise, Array-like, Iterable, Observable, Streams, Disposable" ["posted_time"]=> string(25) "3 недели назад" ["channelName"]=> NULL } ["QI7oUwNrQ34"]=> object(stdClass)#10516 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "QI7oUwNrQ34" ["related_video_title"]=> string(86) "Цепи Маркова — математика предсказаний [Veritasium]" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> NULL } ["RKUVSORSLJk"]=> object(stdClass)#10501 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "RKUVSORSLJk" ["related_video_title"]=> string(49) "Зеленский летит в пропасть" ["posted_time"]=> string(24) "16 часов назад" ["channelName"]=> NULL } ["iSpUBvY1Ok4"]=> object(stdClass)#10517 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "iSpUBvY1Ok4" ["related_video_title"]=> string(127) "Как создать WebSocket-бота через Chrome Extension — полный разбор на примере игры" ["posted_time"]=> string(25) "4 месяца назад" ["channelName"]=> NULL } ["RM6ZspkOJCc"]=> object(stdClass)#10495 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "RM6ZspkOJCc" ["related_video_title"]=> string(86) "Почему ВСЕ ХЕЙТЯТ 1С, но он приносит сотни тысяч" ["posted_time"]=> string(25) "3 недели назад" ["channelName"]=> NULL } ["fKZoF-cqino"]=> object(stdClass)#10505 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "fKZoF-cqino" ["related_video_title"]=> string(99) "Не делай такое с useState! Топ 5 ошибок junior React-разработчика" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> NULL } ["nk1ephmx71k"]=> object(stdClass)#10500 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "nk1ephmx71k" ["related_video_title"]=> string(103) "НОВЫЙ способ создания фильмов В НЕЙРОСЕТЯХ | В ФОРМАТЕ 4К" ["posted_time"]=> string(21) "9 дней назад" ["channelName"]=> NULL } ["S85hMU5K7CM"]=> object(stdClass)#10497 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "S85hMU5K7CM" ["related_video_title"]=> string(149) "Как расти как разработчик - что реально замечают в твоей работе #программирование" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> NULL } ["01RzTvpK2x8"]=> object(stdClass)#10498 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "01RzTvpK2x8" ["related_video_title"]=> string(136) "Началась МАССОВАЯ БЛОКИРОВКА карт по 115-ФЗ! Как спасти свои деньги от банка" ["posted_time"]=> string(24) "20 часов назад" ["channelName"]=> NULL } ["6D2LfKoWDuc"]=> object(stdClass)#10486 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "6D2LfKoWDuc" ["related_video_title"]=> string(103) "GPT-5 пишет код лучше меня? Проверяю на реальном С++ проекте" ["posted_time"]=> string(21) "5 дней назад" ["channelName"]=> NULL } ["YWNcYnZgYWg"]=> object(stdClass)#10487 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "YWNcYnZgYWg" ["related_video_title"]=> string(110) "🧠 ChatGPT не сделает из тебя программиста. Вот почему! #easyit @Easy IT" ["posted_time"]=> string(25) "3 месяца назад" ["channelName"]=> NULL } ["RHxuUQ58yjc"]=> object(stdClass)#10493 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "RHxuUQ58yjc" ["related_video_title"]=> string(79) "ЭТИ АЛГОРИТМЫ СДЕЛАЮТ ИЗ ТЕБЯ ПРОГРАММИСТА" ["posted_time"]=> string(25) "3 недели назад" ["channelName"]=> NULL } ["HXnRJZlLtwA"]=> object(stdClass)#10494 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "HXnRJZlLtwA" ["related_video_title"]=> string(81) "Тёма Сенюков — Next.js. Как ты вообще рендеришь?" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> NULL } ["EJzitviiv2c"]=> object(stdClass)#10492 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "EJzitviiv2c" ["related_video_title"]=> string(29) "КАК УСТРОЕН TCP/IP?" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> NULL } }
🤖 GPT убьёт программистов? Правда, о которой молчат! #easyit @Easy IT

🤖 GPT убьёт программистов? Правда, о которой молчат! #easyit @Easy IT

На работе, в ВУЗе, в школе заставляют ставить мессенджер MAX. Как защищаться по закону

На работе, в ВУЗе, в школе заставляют ставить мессенджер MAX. Как защищаться по закону

Реактивность в JavaScript: от Object.defineProperty до Proxy и Computed

Реактивность в JavaScript: от Object.defineProperty до Proxy и Computed

Docker за 20 минут

Docker за 20 минут

Ставлю 340 нейросетей на ПК за 15 минут (не кликбейт)

Ставлю 340 нейросетей на ПК за 15 минут (не кликбейт)

5 продвинутых паттернов в React

5 продвинутых паттернов в React

💡 JavaScript: Callable, Thenable, Promise, Array-like, Iterable, Observable, Streams, Disposable

💡 JavaScript: Callable, Thenable, Promise, Array-like, Iterable, Observable, Streams, Disposable

Цепи Маркова — математика предсказаний [Veritasium]

Цепи Маркова — математика предсказаний [Veritasium]

Зеленский летит в пропасть

Зеленский летит в пропасть

Как создать WebSocket-бота через Chrome Extension — полный разбор на примере игры

Как создать WebSocket-бота через Chrome Extension — полный разбор на примере игры

Почему ВСЕ ХЕЙТЯТ 1С, но он приносит сотни тысяч

Почему ВСЕ ХЕЙТЯТ 1С, но он приносит сотни тысяч

Не делай такое с useState! Топ 5 ошибок junior React-разработчика

Не делай такое с useState! Топ 5 ошибок junior React-разработчика

НОВЫЙ способ создания фильмов В НЕЙРОСЕТЯХ | В ФОРМАТЕ 4К

НОВЫЙ способ создания фильмов В НЕЙРОСЕТЯХ | В ФОРМАТЕ 4К

Как расти как разработчик - что реально замечают в твоей работе #программирование

Как расти как разработчик - что реально замечают в твоей работе #программирование

Началась МАССОВАЯ БЛОКИРОВКА карт по 115-ФЗ! Как спасти свои деньги от банка

Началась МАССОВАЯ БЛОКИРОВКА карт по 115-ФЗ! Как спасти свои деньги от банка

GPT-5 пишет код лучше меня? Проверяю на реальном С++ проекте

GPT-5 пишет код лучше меня? Проверяю на реальном С++ проекте

🧠 ChatGPT не сделает из тебя программиста. Вот почему! #easyit @Easy IT

🧠 ChatGPT не сделает из тебя программиста. Вот почему! #easyit @Easy IT

ЭТИ АЛГОРИТМЫ СДЕЛАЮТ ИЗ ТЕБЯ ПРОГРАММИСТА

ЭТИ АЛГОРИТМЫ СДЕЛАЮТ ИЗ ТЕБЯ ПРОГРАММИСТА

Тёма Сенюков — Next.js. Как ты вообще рендеришь?

Тёма Сенюков — Next.js. Как ты вообще рендеришь?

КАК УСТРОЕН TCP/IP?

КАК УСТРОЕН TCP/IP?

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]