💻 easy.advice

React: 100 дней стажировки

Погрузись в мир реальных задач React-разработчика: решай практические задания, которые ты встретишь на работе. Стань частью команды и прокачай свои навыки от новичка до профессионала.

Добро пожаловать в команду!

Представь, что ты только что присоединился к команде разработчиков. Тебе предстоит пройти 100-дневную стажировку, во время которой ты будешь решать реальные задачи, с которыми сталкиваются React-разработчики каждый день.

Тимлид React-стажировки

Познакомься со своим тимлидом

Это Александр — твой тимлид на стажировке. Он делится опытом, даёт честную обратную связь и помогает довести каждую задачу до уровня боевого проекта.

Что тебя ждет?

  • Реальные задачи из практики от тимлида — никакой теории, только то, что действительно нужно уметь на работе
  • Постепенное усложнение — от базовых компонентов до сложной архитектуры приложений
  • Полный охват экосистемы React — хуки, контекст, роутинг, управление состоянием и многое другое

Как проходить тренажер?

  1. Выбирай задачу по порядку или по интересующей теме
  2. Читай требования и пиши код в редакторе
  3. Переходи к следующей задаче после успешного выполнения

Интервью-блок

Задачи, которые дают перед оффером

Это короткое тестовое перед тем, как тебя возьмут в штат. Закрой две задачи — и тебя приглашают на работу.

🔥 Интервью-кейс #1: Hello World

Покажи тимлиду, что ты сходу поднимаешь React-компонент и выводишь контент без лишней магии — базовый фильтр перед собеседованием.

🟨 React 🎚️ Легкая 🕐 10 минут

🔥 Интервью-кейс #2: Кнопка для продакшена

Заключительный прогон перед оффером: собери Button, который меняет стиль по пропсу и выглядит как настоящий продакшен-компонент.

🟨 React 🎚️ Легкая 🕐 10 минут

Тренажёр из реальных задач и рабочих навыков

Задача №01

React: Карточка пользователя

Первая задача стажировки — собрать карточку участника, которая умеет принимать имя и email через пропсы.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №02

React: Условное приветствие

Сделать условный рендеринг “Привет, user” или “Войдите”. Без useState.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №03

React: Колбэк по клику

Передать onClick через пропсы и вызвать при клике.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №04

React: Карточки товаров через map

Создать список карточек товаров из массива с помощью map.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №05

React: Вынести повторяющийся UI в компонент

Повторяющийся блок вынеси в отдельный компонент и используй его.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №06

React: Скомпоновать мелкие компоненты в одном

Собери несколько небольших компонентов в составной компонент ProductCard.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №07

React: Показать/скрыть заголовок

Показать/скрыть заголовок по нажатию на кнопку.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №08

React: Количество товара в корзине

Кнопки +/- для изменения количества до нуля и не выше остатка; цена пересчитывается.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №09

React: Инпут и счётчик символов

Сделай контролируемый инпут и показывай длину не более 32.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №10

React: Чекбоксы с ограничением выбора

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

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №11

React: Секундомер / таймер — старт, стоп, сброс

Реализуй секундомер с кнопками запуска, остановки и сброса, и корректным подсчётом времени.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №12

React: Список задач (to-do) — добавление, удаление, отметка

Сделай to-do: добавляй задачи в state, отмечай выполненные и удаляй.

🟨 React 🎚️ Легкая 🕐 1 story point
Задача №13

React: Управляемая форма и отправка

Соберите управляемую форму с несколькими полями и чекбоксом. При отправке покажите данные.

🟨 React 🎚️ Легко 🕐 1 story point
Задача №14

React: Прогресс‑бар по значению input

Управляемый input (0–100) заполняет прогресс‑бар. Валидация и визуализация процента.

🟨 React 🎚️ Легко 🕐 1 story point
Задача №15

React: Сообщение в консоль при первом рендере (useEffect)

Выведите важное сообщение в консоль один раз при монтировании компонента, используя useEffect.

🟨 React 🎚️ Легко 🕐 1 story point