Различия jsx и html — JS: React

Хотя JSX и пытается быть похожим на HTML, у них все же есть некоторые отличия.

В JSX все свойства DOM и атрибуты (включая обработчики событий) должны быть записаны в camelCase. Например, атрибут tabindex превращается в tabIndex. Исключением являются атрибуты aria- и data-, они записываются точно так же, как и в обычном HTML.

htmlFor

Так как for – зарезервированное слово в JS, в React-элементах используется свойство htmlFor.

Экранирование

Обычный HTML не очень безопасен. Любой текст, который должен оставаться текстом, необходимо экранировать перед выводом. Иначе если внутри содержится HTML, то он будет проинтерпретирован. Ситуация может стать опасной, если этот текст на сайт добавляют сами пользователи.

JSX работает по-другому. Всё, что выводится обычным способом – безопасно по умолчанию и экранируется автоматически. А вот в тех местах, где этого не требуется, экранирование отключается так:

See the Pen js_react_jsx_html_difference_safety by Hexlet (@hexlet) on CodePen.

По сути, для вывода без экранирования нужно использовать свойство dangerouslySetInnerHTML. В это свойство передаётся объект со свойством __html, значением которого является строка с HTML. Обратите внимание: если у компонента определён атрибут dangerouslySetInnerHTML, то содержимого у такого компонента быть не должно. Следующий пример приведёт к ошибке:

<div dangerouslySetInnerHTML={{ __html: '<p>content</p>' }}>more content</div>;

Стили

Совсем по-другому работает атрибут style. Если в HTML это обычная строка, то в JSX только объект.

See the Pen js_react_jsx_html_difference_style by Hexlet (@hexlet) on CodePen.

Для консистентности с именами атрибутов, имена CSS-свойств также должны быть записаны в стиле camelCase.

Значение свойств по умолчанию

Если свойство передаётся в компонент без значения, то оно автоматически становится равным true.

Примеры ниже эквивалентны:

<MyTextBox autoComplete />

<MyTextBox autoComplete={true} />

При этом предпочтительным является первый вариант.

Остальное

Более подробно о различиях можно прочитать в официальной документации. Кроме того, в будущих уроках эти различия будут показаны на практике.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.