Архитектура Frontend'a для React разработчиков (Матвей Кленов)

​

Код дешевеет. Системное мышление дорожает. Сформируй навык, который не заменит ИИ.
Архитектурный фундамент → практика на React → production-задачи.

Что меняется в мышлении после курса:
Курс даёт архитектурное мышление, которое повышает твою ценность как инженера в эпоху ИИ.

Когда инструменты меняются всё быстрее, именно архитектурное мышление остаётся стабильной основой профессионального роста.
Этот курс — про навыки, которые не устаревают.

Метод обучения:

1. Курс построен вокруг одного приложения на React, которое последовательно эволюционирует от версии к версии.
2. Для каждой итерации создаётся Excalidraw-доска, на которой разбираются архитектурные принципы и решения.
3. После этого решения немедленно внедряются в код.

Такой формат позволяет изучать архитектуру через практику — наблюдая, как изменения структуры влияют на развитие и масштабирование системы.

Темы, которые проходим в процессе:

Архитектурный фундамент:

• MVC / MVVM и применимость во Frontend
• SOLID, Dependency Injection, Inversion of Control, Service Locator
• Model-first подход
• Принцип наименьших привелегий
• Паттерны: Builder, Observer, Facade, Gateway, Publisher-Subscriber
• Что такое Domain и Bounded Context
• Low coupling/High cohesion

Практика на React:

• Как правильно адаптировать фундаментальные знания под React
• Пишем на разных техологиях: Reactuse, Zustand, Preact/signals, Effector, Reatom и др. Делаем упор на то, как меняется архитектура в целом, а не какой API мы используем
• Структура папок и построение слоев приложения
• Что такое инфраструктурный код на React
• Обработка ошибок в React-приложении
• Гайд на State-Management
• Паттерны для композиции компонентов: renderProp, slot, HOC
• Как масштабировать Frontend-архитектуру при росте сложности
• Зачем писать бизнес-логику вне UI на самом деле
• Inversion of Control на практике (Inversify, needle-di)
• Микрофронтенды

Production-задачи:

• Ролевая модель и доступы
• Аутентификация и авторизация
• Feature flags
• Правильная работа с формами
• Интернационализация

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...