Программа курса "Веб-программирование с TypeScript и React"

Общая информация

Продолжительность: 8 занятий
Формат: 7 лекций (90 мин) + 7 лабораторных работ (180 мин) + 1 ознакомительное занятие
Целевая аудитория: Студенты с поверхностным знанием HTML, CSS, JavaScript и React

Технологический стек

• Основные технологии: TypeScript, React, Vite, Tailwind CSS
• Управление состоянием: MobX, Zustand
• Мобильная разработка: React + strict-dom
• Инструменты: ESLint, Prettier, Git

---

Занятие 0

Ознакомительное занятие

Цели:

• Онбординг студентов
• Знакомство с процессом работы (fork → pull request)
• Диагностика текущих знаний

Содержание:

• Введение в курс и методологию работы
• Диагностическая лабораторная работа (HTML, CSS, JavaScript)
• Настройка рабочего окружения (Git, IDE)

---

Занятие 1: Основы TypeScript

Лекция: Введение в TypeScript

Темы:

• Мотивация перехода с JavaScript на TypeScript
• Система типов: примитивы, объекты, массивы
• Union и intersection типы
• Интерфейсы и типы (type vs interface)
• Generics для начинающих
• Настройка tsconfig.json
• Работа с внешними библиотеками (@types)

Лабораторная работа: Практика TypeScript

Задачи:

• Рефакторинг существующего JavaScript кода в TypeScript
• Создание типизированных функций и объектов
• Работа с массивами и объектами сложной структуры
• Создание интерфейсов для API responses
• Практика с generics
• Решение типовых проблем типизации

---

Занятие 2: React + TypeScript

Лекция: React с типизацией

Темы:

• Быстрое освежение React: компоненты, props, state, хуки
• Типизация React компонентов:
  • Функциональные компоненты с TypeScript
  • Типизация props (включая children и callback props)
  • Типизация состояния (useState, useReducer)
  • Event handlers в TypeScript
  • Типизация useEffect и кастомных хуков
  • Работа с ref'ами

Лабораторная работа: Практика React + TypeScript

Задачи:

• Создание сложных типизированных компонентов
• Передача данных между компонентами с типизацией
• Работа с формами и валидацией
• Условный рендеринг и списки
• Композиция компонентов
• Создание переиспользуемых типизированных компонентов

---

Занятие 3: Современный стек разработки

Лекция: Vite + Tailwind CSS

Темы:

• Сравнение Vite с Create React App
• Настройка проекта: Vite + React + TypeScript
• Конфигурация Vite (vite.config.ts)
• Введение в Tailwind CSS
• Utility-first подход к стилизации
• Интеграция Tailwind с Vite
• Hot Module Replacement (HMR) и dev experience
• Настройка ESLint + Prettier для TypeScript

Лабораторная работа: Освоение стека

Задачи:

• Инициализация нескольких проектов с нуля
• Настройка полного dev окружения
• Создание компонентной библиотеки с Tailwind
• Responsive дизайн и мобильная адаптация
• Настройка линтинга и форматирования
• Оптимизация dev experience

---

Занятие 4: Управление состоянием - MobX + Zustand

Лекция: Современный state management

MobX:

• Концепции: Observable, Action, Computed
• Создание stores с TypeScript
• Интеграция с React (observer HOC/hook)
• Архитектурные паттерны с MobX
• Best practices и распространенные ошибки

Zustand:

• Минималистичный API
• TypeScript типизация store'ов
• Создание простых глобальных store'ов
• Middleware и persistence

Комбинирование:

• Когда использовать MobX vs Zustand
• Паттерны совместного использования
• Архитектурные решения

Лабораторная работа: Комплексное приложение с состоянием

Задачи:

• Создание MobX stores для бизнес-логики
• Zustand для UI состояния и пользовательских настроек
• API интеграция с обработкой ошибок
• Полная типизация всех store'ов
• Реализация оптимистичных обновлений
• Практика с различными сценариями состояния
• Отладка и профилирование состояния

---

Занятие 5: Продвинутые React паттерны + API

Лекция: Advanced React + работа с данными

Темы:

• Кастомные хуки с TypeScript
• Error Boundaries и обработка ошибок
• React.memo, useMemo, useCallback для оптимизации
• Suspense и concurrent features
• Паттерны работы с API (fetch, axios)
• Композиция компонентов и render props
• Контекст и провайдеры

Лабораторная работа: Архитектура и API интеграция

Задачи:

• Рефакторинг приложения под производительность
• Создание переиспользуемых архитектурных решений
• Сложные API интеграции с различными endpoints
• Кэширование данных и синхронизация
• Профилирование и оптимизация React приложения
• Создание системы компонентов

---

Занятие 6: Cross-platform разработка с React Native

Лекция: React + ReactStrict-DOM → React Native

Часть 1: Теория ReactStrict-DOM

• Концепция "write once, run everywhere"
• ReactStrict-DOM как мост между web и native
• Архитектура: общие компоненты + platform-specific код
• Сравнение с другими подходами (Expo, Flutter, PWA)

Часть 2: Настройка окружения

• Установка React Native CLI vs Expo CLI
• Настройка Android Studio / Xcode
• Создание проекта с ReactStrict-DOM
• Конфигурация Metro bundler для cross-platform
• Настройка TypeScript для React Native

Часть 3: Мобильная разработка

• Адаптация веб-компонентов под мобильные
• Навигация: React Navigation с TypeScript
• Мобильные UX/UI паттерны и компоненты
• Touch события, жесты и анимации
• Platform-specific код и условная компиляция
• Работа с нативными API (камера, геолокация, хранилище)

Лабораторная работа: Полноценное мобильное приложение (3 часа)

Этап 1: Настройка cross-platform проекта

• Создание React Native проекта с ReactStrict-DOM
• Настройка TypeScript конфигурации для mobile
• Интеграция существующих компонентов и stores (MobX/Zustand)
• Настройка hot reload для мобильной разработки
• Первый запуск на эмуляторе Android/iOS

Этап 2: Адаптация под мобильные

• Рефакторинг веб-компонентов для ReactStrict-DOM
• Создание мобильной навигации (стеки, табы, модалы)
• Адаптация форм под touch-интерфейсы
• Responsive компоненты с учетом размеров экрана
• Обработка состояний клавиатуры и orientation

Этап 3: Нативные возможности

• Интеграция с нативными API через ReactStrict-DOM
• Работа с камерой и галереей фотографий
• Push-уведомления и background tasks
• Offline functionality и синхронизация данных
• Тестирование на реальных устройствах

Бонусные задачи:

• Настройка CI/CD для автоматической сборки APK/IPA
• Публикация тестовой версии в Google Play Console/TestFlight
• Performance профилирование мобильного приложения
• Интеграция с нативными модулями

---

Занятие 7: Финализация проекта

Лекция: Итого

Темы:

• Build оптимизация и code splitting
• Environment variables и конфигурация
• Основы тестирования в production
• CI/CD пайплайны
• Безопасность + best practices
• Мониторинг и аналитика
• Обзор пройденного материала

Лабораторная работа: Финальная интеграция

Задачи:

• Завершение комплексного проекта
• Оптимизация bundle size
• Добавление тестов к ключевым компонентам
• ??? Деплой ???
• Code review и рефакторинг
• Презентация финальных проектов
• ??? Документирование кода ???

---

Финальный проект

К концу курса студенты создают полноценное веб-приложение, включающее:

Технические требования:

• Frontend: TypeScript + React + Vite + Tailwind CSS
• State Management: MobX для бизнес-логики + Zustand для UI состояния
• Мобильная поддержка: Адаптивный дизайн с элементами strict-dom
• API интеграция: Работа с внешними API и обработка ошибок
• Production ready: Оптимизированная сборка и деплой

Функциональные возможности:

• Аутентификация пользователей
• CRUD операции с данными
• Responsive дизайн для всех устройств
• Обработка состояний загрузки и ошибок
• Кэширование и оптимистичные обновления

---

Методология работы

Процесс выполнения лабораторных работ:

1. Форк репозитория курса
2. Выполнение задания (в классе или дома)
3. Отправка Pull Request для проверки

Материалы для подготовки:

• Конспекты в директориях lr*/docs/
• Интерактивные руководства
• Примеры кода

---

Ожидаемые результаты

По завершении курса студенты будут уметь:

• Разрабатывать типобезопасные React приложения с TypeScript
• Использовать современные инструменты разработки (Vite, Tailwind)
• Эффективно управлять состоянием приложения (MobX, Zustand)
• Создавать адаптивные и мобильные интерфейсы
• Интегрироваться с внешними API
• ? Оптимизировать производительность React приложений ?
• Следовать современным best practices веб-разработки