🧠 Мини‑React: учебный проект «Как работает React внутри»

Этот проект я написал, чтобы разобраться во внутренностях React – не просто использовать хуки, а понять, как они устроены под капотом. Здесь реализованы основные концепты React: виртуальный DOM, согласование (reconciliation), функциональные компоненты, хуки (useState, useRef, useMemo), собственный шаблонизатор в стиле JSX (рантайм‑парсер HTML) и система обновления DOM.

Проект полностью рабочий – на нём можно сделать туду‑лист и убедиться, что всё обновляется, не пересоздавая лишние DOM‑узлы.

---

🎯 Цель проекта

• Узнать, что скрывается за вызовами createElement, useState, render.
• Понять, как работает виртуальное дерево и diffing.
• Написать свой алгоритм обновления DOM без полной перерисовки.
• Реализовать хуки с помощью глобального стейта, привязанного к компоненту.
• Создать парсер HTML (аналог JSX) в рантайме – чтобы писать компоненты без транспилятора.
• Заглянуть в будущее: подготовиться к изучению Fiber‑архитектуры (прерываемый рендер).

Проект учебный, поэтому некоторые вещи упрощены (например, хранение хуков в глобальной Map, синхронный рендер). Но это не мешает увидеть главные принципы React.

---

🧱 Что уже реализовано

• ✅ createElement – превращает JSX/шаблоны в объекты виртуального DOM.
• ✅ render – создаёт реальные DOM‑узлы из виртуальных объектов, обрабатывает ref, фрагменты.
• ✅ useState – базовый хук с функцией обновления, вызывающей перерендер.
• ✅ useRef – хук для доступа к DOM‑узлам без перерендера.
• ✅ useMemo – мемоизация результатов вычислений.
• ✅ Диффинг и патчинг – updateElement сравнивает старое и новое дерево, обновляет только изменившиеся атрибуты и детей.
• ✅ Поддержка массивов детей – корректная вставка/удаление элементов списка.
• ✅ Встроенный шаблонизатор html – парсит строки с тегами и интерполяцией, превращает их в createElement. Позволяет писать компоненты без Babel.
• ✅ Фрагменты – createFragment для группировки детей.
• ✅ Классовый стиль не поддерживается (только функции), но это сознательное решение – современный React всё больше уходит в функциональные компоненты.

---

🏗️ Что в планах (Fiber и дальше)

• 🔄 Реализовать Fiber‑архитектуру – разбить рендер на мелкие единицы работы, добавить возможность прерывать и возобновлять обновление.
• ⏱️ Приоритеты и планировщик – вдохновляясь React 18+.
• 🧪 useEffect – добавить эффекты с очисткой.
• 🗝️ Ключи (key) – оптимизировать переупорядочивание списков.
• ⚡ Мемоизация компонентов – аналог React.memo.

---

📚 Ресурсы, вдохновившие меня

• 📖 «Как писать свои фреймворки» – книга на oz.by – отличное погружение в архитектуру фронтенд‑библиотек.
• 🎥 Видео «Build your own React» от pomber – репозиторий didact и видео на YouTube – именно с него всё началось.
• 🧩 Статья на pomb.us/build-your-own-react – пошаговое руководство по созданию мини‑React.

---

🚀 Как запустить

1. Склонируйте репозиторий.
2. Установите зависимости (проект на чистом JS, сборщик – Vite).
3. Запустите pnpm start.
4. Откройте http://localhost:3000 – рабочий туду‑лист на вашем собственном React.

---

📁 Структура

• /core
  • my-react.js - библиотека
  • html.js - парсер шаблонов
• /component
  • Counter.js
  • Viewer.js - классические компоненты
  • Box.js - работа с атрибутами
  • TodoApp.js - todo-лист

---

💡 Что я понял, написав это

• React на самом деле не такой страшный «чёрный ящик».
• Хуки – это просто массив значений, привязанный к текущему компоненту.
• Виртуальный DOM нужен не для скорости, а для декларативности и возможности отложить настоящие изменения.
• Fiber – логическое продолжение идей: разбить работу на кусочки, чтобы не блокировать главный поток.

Если вы тоже хотите разобраться в React, советую написать свой мини‑клона – это даст понимание, которое никогда не даст просто чтение документации.

⚠️ Проект не предназначен для продакшна, но отлично подходит для обучения и экспериментов.

---