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

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

Основа с Junior

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

JSX — синтаксис, который компилируется в вызовы создания элементов. Внутри фигурных скобок — любое выражение JavaScript.

function OrderCard({ order }) {
  return (
    <>
      <h3 className="title">Заказ №{order.id}</h3>
      {order.paid ? <Badge>Оплачен</Badge> : <PayButton id={order.id} />}
      {order.comment && <p>{order.comment}</p>}
    </>
  );
}

Что важно знать

  • className вместо class, htmlFor вместо for, стили — объектом: style={{ marginTop: 8 }}.
  • Один корневой элемент; фрагмент <>…</> — без лишнего div.
  • Условия: тернарный оператор, &&, ранний return null.
  • Ловушка &&: {count && <List />} при count = 0 выведет «0» — писать {count > 0 && …}.
  • Компоненты называются с большой буквы — иначе JSX считает их HTML-тегом.
  • Вставленные строки экранируются автоматически — защита от XSS; dangerouslySetInnerHTML её отключает.

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

Junior ≈ 3 ч

  • Пишет JSX с выражениями, условным рендерингом и фрагментами
  • Знает ловушку && с нулём и экранирование вставленных строк

Практика. Сверстать карточку заказа в JSX со всеми состояниями — оплачен, не оплачен, с комментарием и без.

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

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

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

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

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

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

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

Полный разбор
Что такое виртуальный DOM и зачем в списках нужен key?Junior

Компонент возвращает описание интерфейса (дерево React-элементов). При обновлении React сравнивает новое дерево со старым (reconciliation) и применяет к настоящему DOM минимальные изменения. key помогает сопоставить элементы списка между рендерами: по нему…

Полный разбор
Как React защищает от XSS при выводе строк и когда эта защита не работает?Junior

React экранирует строки, вставленные в JSX: {comment} с текстом <script> покажется как текст, а не выполнится. Защита не работает: в dangerouslySetInnerHTML (HTML вставляется как есть — нужна санитизация, например DOMPurify), в href со схемой javascript: из…

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

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

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

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

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

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

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