JSX

JSX — это запись разметки прямо в коде JavaScript. Она похожа на HTML, но при сборке Vite превращает её в обычные вызовы функций React. Благодаря JSX разметка и логика компонента лежат в одном файле. Файлы с JSX получают расширение .jsx.

Разметка в компоненте

Откройте src/App.jsx. Многострочную разметку оборачивают в круглые скобки:

// src/App.jsx
export default function App() {
  return (
    <div>
      <h1>Мои задачи</h1>
      <p>Список дел на сегодня.</p>
    </div>
  );
}

На странице появятся заголовок и абзац под ним.

Выражения в фигурных скобках

Внутри фигурных скобок можно написать любое выражение JavaScript: переменную, вычисление, вызов функции.

// src/App.jsx
export default function App() {
  const name = 'Анна';
  const total = 3;
 
  return (
    <div>
      <h1>Задачи пользователя {name}</h1>
      <p>Осталось сделать: {total * 2}</p>
    </div>
  );
}

На странице будет «Задачи пользователя Анна» и «Осталось сделать: 6». Инструкции вроде if или for в скобках писать нельзя — только выражения, которые дают значение.

Атрибуты

Строковые значения пишут в кавычках, а значения из JavaScript — в фигурных скобках:

// src/App.jsx
export default function App() {
  const logo = '/vite.svg';
 
  return <img src={logo} alt="Логотип" width={64} />;
}

Картинка vite.svg лежит в папке public/, поэтому доступна по адресу /vite.svg.

Отличия от HTML

Некоторые атрибуты называются иначе, потому что JSX — это JavaScript, а class и for в нём заняты:

Кроме того, каждый тег должен быть закрыт: <br />, <img />, <input />.

Один корневой элемент

Компонент возвращает один элемент. Если лишний div не нужен, используют фрагмент — пустые теги <> и </>:

// src/App.jsx
export default function App() {
  return (
    <>
      <h1>Мои задачи</h1>
      <p>Список дел на сегодня.</p>
    </>
  );
}

Фрагмент группирует элементы, но сам на страницу не попадает: в инструментах разработчика вы увидите только h1 и p.

Комментарии

Комментарий внутри разметки тоже пишут в фигурных скобках: {/* текст */}.

Частая ошибка

Атрибут style принимает объект, а не строку. Поэтому скобок получается две пары: внешние — это JSX, внутренние — объект.

// Неправильно: <p style="color: red">Ошибка</p>
 
function ErrorText() {
  return <p style={{ color: 'red', fontSize: 14 }}>Ошибка</p>;
}

Названия свойств пишутся в стиле camelCase: fontSize, а не font-size.