React JSX Введение

Что такое JSX?

JSX расшифровывается как JavaScript XML.

JSX позволяет писать HTML-код в приложениях React.

JSX упрощает запись и интеграцию HTML в компоненты React.

Кодирование на JSX

JSX позволяет встраивать HTML-элементы в JavaScript и помещать их в DOM без использования методов createElement() и appendChild().

JSX преобразует HTML-теги в элементы React.

Несмотря на то, что использование JSX необязательно, оно значительно упрощает разработку приложений на React.

Рассмотрим два примера. Первый использует JSX, второй — нет:

Пример 1

Использование JSX:


// main.jsx
const myElement = <h1>Я люблю JSX!</h1>;

createRoot(document.getElementById('root')).render(
  myElement
);

Пример 2

Без использования JSX:


// main.jsx
const myElement = React.createElement('h1', {}, 'Я не использую JSX!');

createRoot(document.getElementById('root')).render(
  myElement
);

Первый пример демонстрирует, как JSX позволяет писать HTML прямо в JavaScript-коде.

JSX — это расширение языка JavaScript, основанное на стандарте ES6, которое компилируется в обычный JavaScript во время выполнения программы.

Выражения в JSX

В JSX можно использовать выражения внутри фигурных скобок { }.

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

Пример

Выполнение выражения 5 + 5:


// main.jsx
const myElement = <h1>React стал в {5 + 5} раз лучше с JSX</h1>;

Вставка большого блока HTML

Чтобы написать HTML на нескольких строках, заключите его в круглые скобки:

Пример

Создание списка с тремя элементами:


// main.jsx
const myElement = (
  <ul>
    <li>Яблоки</li>
    <li>Бананы</li>
    <li>Вишни</li>
  </ul>
);

Элемент верхнего уровня

Код HTML должен быть заключен в один элемент верхнего уровня.

Если вы хотите создать два абзаца, их необходимо заключить в родительский элемент, например, div.

Пример

Два абзаца внутри одного элемента div:


// main.jsx
const myElement = (
  <div>
    <p>Я — первый абзац.</p>
    <p>Я — второй абзац.</p>
  </div>
);

Если HTML неверен или отсутствует родительский элемент, JSX выдаст ошибку.

Альтернативой является использование "фрагмента" для оборачивания нескольких строк. Это предотвратит добавление лишних узлов в DOM.

Фрагмент выглядит как пустой HTML-тег: <></>.

Пример

Два абзаца внутри фрагмента:


// main.jsx
const myElement = (
  <>
    <p>Я — первый абзац.</p>
    <p>Я — второй абзац.</p>
  </>
);

Обязательное закрытие элементов

JSX подчиняется правилам XML, следовательно, HTML-элементы должны быть закрыты должным образом.

Пример

Закрытие пустых элементов с помощью />:


// main.jsx
const myElement = <input type="text" />;

Если HTML не закрыт надлежащим образом, JSX выдаст ошибку.

Атрибут class = className

Атрибут class часто используется в HTML, но так как JSX компилируется в JavaScript, а class является зарезервированным словом в JavaScript, его нельзя использовать в JSX.

Вместо этого используйте атрибут `className`.

JSX решает проблему заменой class на className. При рендеринге атрибут className преобразуется в обычный атрибут class.

Пример

Использование атрибута className вместо class:


// main.jsx
const myElement = <h1 className="myclass">Привет мир</h1>;

Комментарии в JSX

Комментарии в JSX записываются с помощью конструкции {/* */}.

Пример

Комментарии в JSX:


// main.jsx
const myElement = <h1>Привет {/* Чудесный */} мир</h1>;

JSX в компонентах React

React использует компоненты для построения UI. Компоненты — это независимые и повторно используемые блоки кода, возвращающие HTML.

Компоненты React подобны функциям JavaScript.

JSX прекрасно работает внутри компонентов React.

Пример

Компонент с JSX:


// main.jsx
function Car() {
  return (
    <>
      <h2>Моя машина</h2>
      <p>Она марки Ford Mustang.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(<Car />);

Внутри компонентов можно выполнять дополнительные операции перед возвратом HTML.

Пример

JSX в компонентах с дополнительными операциями:


// main.jsx
function Car() {
  const brand = "Ford";
  const model = "Mustang";
  return (
    <>
      <h2>Моя машина</h2>
      <p>Это автомобиль марки {brand} модели {model}.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(<Car />);