Фреймворки и компоненты

React, Vue, Web Components, состояние, навигация, работа с API, SSR, статическая генерация и организация проекта.

Материалы

• React: учебный каталог

  16 уроков React: собственный каталог карточек, состояние, загрузка, маршруты, форма и локальный CRUD API

• React и исходный проект

  Vite-проект с createRoot, StrictMode и отдельным App

• JSX в React: данные карточки каталога

  Первая учебная карточка использует выражения и безопасный текст

• React: компоненты и общие стили

  Navbar и Home разделены; общий CSS и системная типографика

• События и состояние в React

  Кнопки меняют фильтр темы через useState

• Списки и React DevTools

  Три карточки с устойчивыми key; исследование дерева компонентов

• Props в React: повторное использование компонента

  LessonList получает title и notes; две независимые подборки

• React: обратные вызовы между компонентами

  Кнопка скрывает карточку из локальной подборки через callback владельца состояния

• Эффекты в React: зависимости и обновление данных

  Заголовок документа синхронизируется с темой, cleanup восстанавливает прежний

• React: локальный API и первая загрузка

  Собственный Node fixture отдаёт те же карточки; Home читает API

• React: загрузка, пустой список и ошибки

  Экран различает loading/success/empty/error, явный повтор чтения

• Собственный хук React: загрузка и отмена запросов

  useResource выносит чтение; cleanup+AbortController+URL маркируют актуальность

• React: маршруты и ссылки приложения

  BrowserRouter/Routes/Route/Link отделяют каталог и новый материал

• React: параметр адреса и подробная карточка

  notes/:noteId читает одну карточку тем же hook

• Управляемая форма React: ввод и submit

  Поле title/body/topic/minutes и нормализованный снимок без POST

• React: создание записи и переход

  POST проверяет статус/тело; useNavigate после подтверждённого 201

• React: удаление, отсутствующая запись и границы SPA

  DELETE подтверждается 204; wildcard экран и HTTP404 различаются

• Next.js: диспетчерская «Смена»

  20 уроков App Router: маршруты, серверные компоненты, PostgreSQL, вход, полномочия, формы, действия и таблица заявок.

• Первый проект Next.js: путь HTTP-запроса

  Разделить страницу, корневую компоновку и среду выполнения приложения.

• Маршруты Next.js: вложенные страницы и параметры

  Построить список, карточку и пути с произвольным числом сегментов.

• Next.js App Router: layouts, templates и route groups

  Сохранить общую рабочую оболочку без изменения публичных адресов.

• Метаданные страницы в Next.js и изображение для превью

  Связать заголовок вкладки с содержимым и задать размеры иллюстрации.

• Навигация Next.js: активная ссылка и поиск в URL

  Передать поисковую строку через адрес и выделить текущий раздел.

• Next.js: loading, not-found и обработка ошибок

  Различить ожидание, неизвестный ресурс и отказ получения данных.