Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Различия 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} />

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

Остальное

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


Аватары экспертов Хекслета

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

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

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»