https://github.com/avin/how-to-js-framework
Курс по созданию JavaScript-фреймворка
https://github.com/avin/how-to-js-framework
js-framework lessons russian
Last synced: 26 days ago
JSON representation
Курс по созданию JavaScript-фреймворка
- Host: GitHub
- URL: https://github.com/avin/how-to-js-framework
- Owner: avin
- Created: 2025-11-08T07:58:52.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-11-15T17:14:28.000Z (7 months ago)
- Last Synced: 2026-01-21T14:10:58.218Z (5 months ago)
- Topics: js-framework, lessons, russian
- Homepage:
- Size: 110 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Создание JS-фреймворка с Virtual DOM
Практический курс по созданию собственного JavaScript-фреймворка с нуля. Вы научитесь создавать современный фреймворк с Virtual DOM, реактивностью и компонентной архитектурой, понимая каждый аспект его работы.
## Для кого этот курс
- Разработчики, которые хотят понять внутреннее устройство фреймворков
- Те, кто использует React/Vue и хочет знать, что происходит "под капотом"
- Программисты, желающие улучшить свои навыки работы с DOM и алгоритмами
## Что вы создадите
В конце курса у вас будет собственный фреймворк со следующими возможностями:
- Virtual DOM и эффективный алгоритм обновления
- Функциональные компоненты
- Хуки (useState, useEffect)
- Система контекста для передачи данных
- Оптимизированная обработка событий
- Refs для работы с реальным DOM
## Структура курса
### Часть 1: Основы
1. [**Введение**](./lessons/01-introduction.md) - Что такое фреймворк и зачем он нужен
2. [**Virtual DOM - концепция**](./lessons/02-virtual-dom-concept.md) - Что такое VDOM и почему он используется
3. [**Представление элементов**](./lessons/03-element-representation.md) - Создание функции h() для описания виртуальных узлов
### Часть 2: Рендеринг
4. [**Первый рендеринг**](./lessons/04-first-rendering.md) - Превращение VDOM в реальный DOM
5. [**Работа с атрибутами и свойствами**](./lessons/05-attributes-and-properties.md) - Установка props, events, классов и стилей
6. [**Рендеринг списков и фрагментов**](./lessons/06-lists-and-fragments.md) - Обработка массивов детей
### Часть 3: Обновление
7. [**Алгоритм diffing**](./lessons/07-diffing-algorithm.md) - Сравнение старого и нового VDOM
8. [**Патчинг DOM**](./lessons/08-dom-patching.md) - Применение минимальных изменений
9. [**Keys и оптимизация списков**](./lessons/09-keys-and-optimization.md) - Как избежать лишних перерисовок
### Часть 4: Компоненты
10. [**Функциональные компоненты**](./lessons/10-functional-components.md) - Создание переиспользуемых блоков
11. [**Состояние (State)**](./lessons/11-state.md) - Реактивность и hooks (useState)
12. [**Жизненный цикл**](./lessons/12-lifecycle.md) - useEffect и побочные эффекты
13. [**Контекст**](./lessons/13-context.md) - Передача данных через дерево компонентов
### Часть 5: Продвинутые темы
14. [**Система событий**](./lessons/14-event-system.md) - Делегирование и синтетические события
15. [**Refs**](./lessons/15-refs.md) - Доступ к реальным DOM-элементам
16. [**Reconciliation**](./lessons/16-reconciliation.md) - Планирование обновлений и батчинг
17. [**Сборка приложения**](./lessons/17-todo-app.md) - Создание полноценного Todo-приложения
### Приложения
- [**A. Сравнение с React/Vue**](./appendix/a-comparison.md) - Что мы сделали и чем отличаемся
- [**B. Дальнейшее развитие**](./appendix/b-future-improvements.md) - Идеи для улучшения фреймворка