Этап 1 из 12 · ≈ 4 ч

Старт и JSX

Основа с Junior

Создать проект на Vite, понять JSX и первый компонент — с чего начинается React.

React — библиотека для построения интерфейсов из компонентов. Компонент — функция, которая принимает данные и возвращает описание интерфейса на JSX. Когда данные меняются, React вызывает функцию заново и обновляет только изменившиеся части DOM.

npm create vite@latest shop -- --template react-ts
cd shop && npm install && npm run dev

Create React App устарел и больше не развивается: для SPA берут Vite, для сайтов с SSR — Next.js или React Router в режиме фреймворка.

Что важно знать до старта

JavaScript: деструктуризация, spread, стрелочные функции, методы массивов map и filter, модули, промисы. Без уверенного JS React кажется магией, а ошибки — непонятными.

Темы этапа

  • JSX и условный рендеринг Основа

    Разметка внутри JavaScript — выражения, атрибуты, условия и фрагменты.

  • События Основа

    Обработчики событий, передача колбэков детям и синтетические события.

Критерии освоения

Junior ≈ 4 ч

  • Создаёт React-проект на Vite с TypeScript и запускает его
  • Объясняет, почему React перерисовывает интерфейс при изменении состояния

Практика. Создать проект на Vite, сделать в нём счётчик и список с добавлением элементов.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как создать React-проект и почему React перерисовывает интерфейс при изменении состояния?Junior

Проект создают сборщиком Vite: npm create vite@latest app -- --template react-ts, затем npm install и npm run dev. React декларативный: вы описываете, как интерфейс выглядит при данном состоянии, а не какие DOM-операции выполнить. Когда состояние меняется…

Полный разбор
Что такое JSX и как вставлять в него выражения и фрагменты?Junior

JSX — синтаксис, который компилируется в вызовы создания элементов (<div className="a"> → jsx("div", {className: "a"})). В фигурных скобках — любое выражение JavaScript: переменная, вызов функции, тернарный оператор, map по массиву; инструкции (if, for) …

Полный разбор
Чем state отличается от props в React?Junior

props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз; ребёнок сообщает об изменениях родителю через колбэки в props. Общее состояние…

Полный разбор
Как сделать условный рендеринг в React и в чём ловушка с && и нулём?Junior

Способы: тернарный оператор {cond ? <A/> : <B/>}, логическое И {cond && <A/>}, ранний return из компонента, переменная с элементом. Ловушка &&: если слева число 0, React его выведет на страницу ({items.length && <List/>} покажет «0»). Лечится явным булевым…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования