Что такое JSX?

JSX — это расширение для Javascript, позволяющее писать HTML-подобный код в Реакте. JSX является синтаксическим сахаром для React.createElement(), за счет чего код выглядит понятнее и проще.

Пример:

 
import React from 'react';

class Hello extends React.Component {
  render() {
    return (
      <div className="hello">
        <h1>Приветствуем Вас на нашем сайте!</h1>
      </div>
    );
  }
}

В итоге получается код, похожий на HTML, который пишется не в кавычках. Все HTML-теги реализованы в виде React-компонентов для удобства использования.

Примечание: не забывайте импортировать Реакт в файле, где используется JSX-код, так как при преобразовании Babel преобразует JSX в вызовы метода React.createElement().

Особенности JSX

У кода на JSX есть свои особенности. Если внутри компонента не предусматривается наличие других компонентов, то «закрывающий тег» не нужен.

Например, такой код на HTML

<div class="box">
    <div class="box-header"></div>
    <div class="box-body">
        Блок с данными
    </div>
</div>

Будет выглядеть так на JSX:

<div className="box">
    <div className="box-header" />
    <div className="box-body">
        Блок с данными
    </div>
</div>

Названия атрибутов в JSX

Атрибуты HTML-тегов также перенесены в Реакт, однако здесь есть ряд отличий:

• Вместо атрибута class используется атрибут className, так как class — зарезервированное слово для объявления класса.
• Вместо атрибута for используется атрибут htmlFor, так как for — зарезервированное слово для цикла.