Вопрос с собеседования · Frontend

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

JuniorReact
Ещё спрашивают так:
  • Чем JSX отличается от HTML?
  • Что такое React.Fragment?
Коротко

JSX — синтаксис, который компилируется в вызовы создания элементов (<div className="a"> → jsx("div", {className: "a"})). В фигурных скобках — любое выражение JavaScript: переменная, вызов функции, тернарный оператор, map по массиву; инструкции (if, for) — нельзя. Компонент возвращает один корневой элемент — несколько элементов оборачивают во фрагмент <>...</>. Отличия от HTML: className вместо class, htmlFor вместо for, атрибуты в camelCase, style — объект.

  • Компоненты пишут с заглавной буквы, теги HTML — со строчной
  • Списки — array.map с уникальным key
  • Комментарий внутри JSX — {/* … */}

А ещё Фрагмент с key пишут полностью: <Fragment key={id}>

Подробно

function UserList({ users }: { users: User[] }) {
  return (
    <>
      <h2>Пользователи: {users.length}</h2>
      <ul>
        {users.map(u => <li key={u.id} style={{ color: u.active ? "green" : "gray" }}>{u.name}</li>)}
      </ul>
    </>
  );
}

Что хотят услышать

  • JSX — синтаксис над вызовами функций.
  • Выражения в фигурных скобках, инструкции — нельзя.
  • Фрагменты и один корень.
  • Отличия атрибутов от HTML.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Компилируется в вызовы функций; в {} — выражения, несколько элементов — во фрагмент
  • ✗В фигурные скобки JSX можно вставить оператор if, а атрибут класса пишется class, как в HTML
  • ✗В JSX атрибут класса пишется class, как в HTML
  • ✗Компонент может вернуть несколько корневых элементов без обёртки

Связанные вопросы

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

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

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

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