Практикум: введение

Это практический раздел. В отличие от справочных глав A–D, здесь не теория, а тренажёр: ты пишешь код руками, а готовый эталон смотришь только чтобы свериться.

Что мы строим

Сквозное приложение — Task Tracker (менеджер задач). Одно и то же приложение мы соберём дважды:

• Часть E (этот раздел) — на чистом React + TypeScript с хуками.
• Часть F — то же приложение, переписанное на MobX, чтобы прочувствовать разницу подходов.

Приложение растёт от шага к шагу: начинаем с локального состояния списка, добавляем фильтры и поиск, загрузку с «сервера», оптимизацию рендера, сложное состояние и, наконец, выносим логику в кастомные хуки.

Как устроен каждый шаг

Каждая страница-шаг построена по одной схеме:

1. Постановка задачи — что конкретно нужно реализовать. Сначала пробуешь сам.

2. Какие API и зачем — список нужных хуков и методов с объяснением, почему именно они решают задачу. Это подсказка, если застрял.

3. Эталонная реализация — раскрываемый блок с правильным кодом. Открывай его, только когда написал свой вариант или хочешь свериться.

4. Ловушки — типичные ошибки по этой теме и как их избежать.

Как тренироваться эффективно

Не открывай эталон сразу. Сначала напиши свой код, запусти, поломай, исправь. Эталон — для сверки, а не для копирования. Учишься именно в момент, когда сам ищешь решение.

Сквозная модель данных

Весь практикум опирается на один тип задачи и один мок-API. Они определены в шаге Окружение (Vite) и не меняются между шагами — меняется только то, как мы с ними работаем.

// Тип задачи
interface Task {
  id: string;          // уникальный идентификатор
  title: string;       // текст задачи
  done: boolean;       // выполнена ли
  createdAt: number;   // метка времени создания (для сортировки)
}

// Фильтр отображения
type Filter = 'all' | 'active' | 'done';

Данные приходят не из настоящего сервера, а из мок-API — функций с setTimeout, которые имитируют сетевую задержку и иногда ошибку. Так можно тренировать загрузку, состояния loading/error и обработку гонок без бэкенда.

Маршрут практикума

Часть E — React + TypeScript:

1. Окружение (Vite) — создаём проект, структуру папок, тип Task и мок-API.
2. Шаг 1 — состояние списка (useState): добавление, удаление, переключение задач.
3. Шаг 2 — производное состояние (useMemo): фильтры, счётчики, поиск.
4. Шаг 3 — загрузка данных (useEffect): загрузка с мок-сервера, loading/error, гонки запросов.
5. Шаг 4 — ссылки и оптимизация (useRef, useCallback, React.memo).
6. Шаг 5 — сложное состояние (useReducer, useContext).
7. Шаг 6 — кастомные хуки (useTasks, useDebounce, useLocalStorage).

После Части E переходи в Часть F — там тот же Task Tracker переписывается на MobX.

Заметка

Предполагается, что базовый синтаксис хуков ты уже видел (или прочитал разделы A. React API & Hooks). Здесь упор на практику, а не на пересказ документации.