🔷 ЗАДАЧИ ПО useContext (1–10)
Цель: понять, как использовать контекст для передачи данных
между компонентами без проброса пропсов.
ЗАДАЧА 1: Создай и используй контекст
Цель: Создать UserContext и отобразить имя пользователя в
дочернем компоненте.
Описание:
1. Создай контекст UserContext со значением { name: 'Алина' }.
2. В компоненте App оберни Profile в [Link].
3. В компоненте Profile с помощью useContext выведи имя
пользователя.
Подсказка:
const user = useContext(UserContext);
ЗАДАЧА 2: Передача объектов через контекст
Цель: Передать через контекст пользователя с несколькими полями
(name, age).
Описание:
1. В контексте передай объект: { name: 'Айдар', age: 30 }.
2. Отобрази в Profile: "Имя: Айдар, Возраст: 30".
ЗАДАЧА 3: Изменение темы через контекст
Цель: Переключение темы (light/dark) через контекст.
Описание:
1. Создай ThemeContext с темой по умолчанию.
2. В компоненте ThemeSwitcher выведи текущую тему и кнопку
"Сменить тему".
3. При нажатии тема меняется.
ЗАДАЧА 4: Авторизация через контекст
Цель: Управлять авторизацией пользователя через контекст.
Описание:
1. В AuthContext передай: { isLoggedIn: true, login: () => {}, logout:
() => {} }
2. В компоненте Header покажи кнопку "Выйти", если
пользователь вошёл.
ЗАДАЧА 5: Изменение значения контекста
Цель: Передавать и изменять значение через useContext + useState.
Описание:
1. В LanguageContext — язык приложения (ru, en).
2. В LanguageSwitcher — кнопка смены языка.
3. В App — надпись "Привет" или "Hello" в зависимости от языка.
ЗАДАЧА 6: Контекст для глобального счётчика
Цель: Управлять глобальным счётчиком через контекст.
Описание:
1. Создай CounterContext со значениями count, increment,
decrement.
2. Покажи счётчик и две кнопки в разных компонентах.
ЗАДАЧА 7: Контекст корзины товаров
Цель: Создать CartContext и передавать товары.
Описание:
1. В CartProvider — список товаров и методы addToCart,
removeFromCart.
2. В ProductList — кнопка "Добавить".
3. В Cart — отображаются добавленные товары.
ЗАДАЧА 8: Контекст + React Router
Цель: Передача пользователя и маршрутизация.
Описание:
1. В UserContext — логин и логика авторизации.
2. Если пользователь не авторизован — показать LoginPage, иначе
Dashboard.
ЗАДАЧА 9: Контекст + useEffect
Цель: Подгрузить данные в контекст асинхронно.
Описание:
1. В UserProvider загрузи данные пользователя через useEffect.
2. Пока данные загружаются — показывай Loading....
ЗАДАЧА 10: Множественные контексты
Цель: Использовать два контекста одновременно.
Описание:
1. ThemeContext и UserContext.
2. В компоненте Dashboard покажи имя пользователя и текущую
тему.
🔷 ЗАДАЧИ ПО useEffect (1–10)
Цель: научиться реагировать на монтирование, обновление и
размонтирование компонентов.
ЗАДАЧА 1: Привет при загрузке
Цель: Вывести [Link]('Привет') один раз при загрузке
компонента.
Подсказка:
useEffect(() => {
[Link]('Привет');
}, []);
ЗАДАЧА 2: Заголовок страницы
Цель: Изменять [Link] при изменении состояния.
Описание:
1. Создай счётчик count.
2. При каждом изменении count, обновляй заголовок: Счёт: 5
ЗАДАЧА 3: Таймер
Цель: Реализовать секундомер.
Описание:
1. Каждую секунду увеличивай count.
2. Используй setInterval и очищай его при размонтировании.
ЗАДАЧА 4: Получение данных с API
Цель: Загрузить данные из API при загрузке.
Описание:
1. Используй fetch('[Link]
2. Покажи список пользователей.
ЗАДАЧА 5: Зависимость от состояния
Цель: Отслеживать изменение переменной query.
Описание:
1. При каждом изменении query, логируй в консоль.
ЗАДАЧА 6: useEffect с localStorage
Цель: Сохранять значение в localStorage при изменении состояния.
Описание:
1. При каждом изменении name, сохраняй в localStorage.
ЗАДАЧА 7: Анимация при появлении
Цель: Запустить анимацию при появлении элемента.
Описание:
1. При монтировании добавь класс fade-in.
2. Через setTimeout убери его.
ЗАДАЧА 8: Очистка setInterval
Цель: Таймер с остановкой при размонтировании.
Описание:
1. В useEffect запусти setInterval.
2. В return очисти интервал через clearInterval.
ЗАДАЧА 9: useEffect + props
Цель: Следить за изменением пропса и обновлять данные.
Описание:
1. Если [Link] меняется, загрузи пользователя с этим id из API.
ЗАДАЧА 10: Комбинированный useEffect
Цель: Комбинировать setInterval, обновление состояния, и очистку.
Описание:
1. Раз в секунду увеличивай счётчик.
2. Если счётчик достиг 10 — очисти таймер и выведи “Готово!”.