Менторство Frontend-разработчиков на React

Упор на React и Redux Toolkit, Next.js и TypeScript. Работаем на реальных проектах с ревью кода, тренируем лайвкодинг и готовимся к собеседованиям на миддла.

блоков программы
7
приложения в портфолио
2-3
сразу, остальное после оффера
30 000 ₽

Какие технологии будем разбирать

По каждой теме определим, что нужно уметь на практике и что важно объяснить на собеседовании.

  • Frontend

    Frontend на React

    В случае фронтенда упор делаем на знание React и стейт-менеджера Redux Toolkit. Нужно знать несколько UI-библиотек, отличия сборщиков Vite и Webpack, уметь развернуть проект и настроить линтер. На выходе - знания ES6+, React, Next.js и полного инструментария современного фронтендера: TanStack Query, Zustand, Git (GitHub, GitLab). Быстро верстаем на MUI, Ant Design, Headless UI, shadcn и Tailwind, работаем с асинхронностью, интегрируемся с API, обрабатываем ошибки, применяем URL-параметры, TypeScript, формы React Hook Form и таблицы TanStack Table, пишем unit-тесты на Jest и Vitest. Дебажим API в Postman, используем React Profiler и Redux DevTools.

    • HTML5 + CSS3 (SCSS, Tailwind, CSS-in-JS)100%
    • Тонкости JS, TypeScript100%
    • Глубокое понимание React, Redux Toolkit / Zustand100%
    • Next.js, react-hook-form, TanStack Table90%
    • Material UI, shadcn, Ant Design85%
    • Vite, Webpack, CI/CD85%
    • CI/CD, ESLint, кодстайл80%
    • FSD, архитектура фронтенда70%
    • SEO, a11y, семантическая вёрстка70%
    • Storybook, скриншотные и unit-тесты, DevTools70%
    • Хуки React
    • SSR, SSG, ISR
    • Стейт-менеджеры
    • Дженерики TS
    • Формы и Zod
    • Вес селекторов

Написать в Telegram - скидка 10% по промокоду «careereugene»

Программа: темы трека

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

React и хуки

5 пунктов
  • Основные хуки: useState (управление состоянием), useEffect (побочные эффекты), useContext (доступ к контексту).
  • Дополнительные хуки: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect.
  • Правила хуков: Объяснение, почему хуки нельзя вызывать в циклах и условиях.
  • Кастомные хуки: Создание собственных хуков для переиспользования логики (например, useLocalStorage, useFetch).
  • Оптимизация с хуками: Использование useMemo и useCallback для мемоизации и избежания лишних рендеров.

Nextjs

7 пунктов
  • SSG (Static Site Generation): Генерация статических страниц на этапе сборки. Подход, идеальный для SEO и производительности.
  • SSR (Server-Side Rendering): Рендеринг на сервере при каждом запросе. Подход для динамических данных.
  • ISR (Incremental Static Regeneration): Обновление статических страниц после сборки без полного перестроения.
  • CSR (Client-Side Rendering): Рендеринг на клиенте. Подход для дашбордов и закрытых разделов
  • Гибридный подход: Комбинирование методов рендеринга в рамках одного приложения.
  • Роутинг: File-based routing, динамические роуты, API Routes.
  • Оптимизации: Встроенная оптимизация изображений, шрифтов, скриптов.

UI-либы

5 пунктов
  • shadcn/ui: Коллекция компонентов, которые копируются в проект. Построен на Tailwind и Radix UI.
  • MUI (Material UI): Полный комплект компонентов по гайдлайнам Material Design.
  • Ant Design: Популярная в enterprise-секторе библиотека.
  • Chakra UI: Доступность (a11y) и простота кастомизации.
  • Сборка UI-китов: Дизайн-токены, темизация, переиспользуемые компоненты.

Typescript

8 пунктов
  • Примитивные типы: string, number, boolean, null, undefined, symbol, bigint.
  • Составные типы: object, array, tuple, enum.
  • Типы высшего порядка: union, intersection, literal types.
  • Дженерики: Обобщённые типы для функций, интерфейсов и классов.
  • Утилиты типов: Partial, Required, Pick, Omit, Record.
  • Вывод типов: Как TypeScript определяет типы автоматически и как помочь ему с аннотациями.
  • Совместимость типов: Structural typing и нюансы совместимости объектов.
  • Интеграция с библиотеками: Подключение типов для сторонних библиотек (@types/).

Стейтменеджеры

5 пунктов
  • Redux Toolkit: Стандарт для сложного состояния. createSlice, createAsyncThunk, RTK Query для server state.
  • Zustand: Легковесный клиентский стейтменеджер. Минимум boilerplate, отличная TypeScript-поддержка.
  • TanStack Query (React Query): Управление server state. Кэширование, инвалидация, фоновое обновление, пагинация.
  • URL State: Управление состоянием через query-параметры (например, фильтры, сортировка).
  • Выбор инструмента: RTK для сложного клиентского состояния, React Query для данных с бэка, Zustand для простого глобального состояния.

Компоненты

5 пунктов
  • Формы: React Hook Form (высокая производительность, минимум перерендеров) + Zod для валидации.
  • Таблицы: Tanstack Table (headless, полный контроль над разметкой) и MUI X Data Grid (готовое решение с богатым функционалом).
  • Графики: Recharts (простота использования, хорошая кастомизация).
  • Диаграммы и ноды: React Flow для построения редакторов диаграмм и графов.
  • Валидация: Zod (TypeScript-first, вывод типов из схемы).

Подходы к CSS

6 пунктов
  • CSS Variables: Динамические переменные для тем и стилей.
  • SCSS: Препроцессор с миксинами, вложенностью, модулями.
  • Tailwind CSS: Utility-first подход, высокая скорость разработки.
  • CSS-in-JS: Styled-components, Emotion (стили в JS, динамические пропсы).
  • БЭМ: Методология именования классов для изоляции стилей.
  • Вес селекторов: Специфичность, каскад, как избежать important.

Что вы уже можете показать в коде?

Проверяйте навыки на маленьком приложении: объяснение решения важнее списка знакомых библиотек.

Отметьте то, что можете объяснить и показать в своём коде. Это самооценка, а не тест на трудоустройство.

  • Разобрать тему
  • Разобрать тему
  • Разобрать тему
  • Разобрать тему
  • Разобрать тему
  • Разобрать тему
Проверено: 0 из 6

Следующая тема для практики: Асинхронный JavaScript. Откройте разбор, повторите пример и добавьте свою проверку.

Разборы для frontend-разработчика

Все статьи

Оставить заявку на менторство или консультацию

Расскажи, где ты сейчас и какая цель. Отвечу лично и подскажу, подойдёт ли менторство и с чего начать.

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

Что не получается, что уже пробовали. От 100 знаков, сейчас 0.
Где работали или учились, сколько лет, какой стек, сколько откликов и собеседований. От 100 знаков, сейчас 0.
PDF или DOCX, до 5 МБ. Файл видит только администратор.
GitHub, hh, LinkedIn, сайт. Можно несколько, через пробел или с новой строки.