Хотя JSX и пытается быть похожим на HTML, у них все же есть некоторые отличия.
В JSX все свойства DOM и атрибуты (включая обработчики событий) должны быть записаны в camelCase. Например, атрибут tabindex превращается в tabIndex. Исключением являются атрибуты aria- и data-, они записываются точно так же, как и в обычном HTML.
Так как for — зарезервированное слово в JS, в React-элементах используется свойство htmlFor.
Обычный HTML не очень безопасен. Любой текст, который должен оставаться текстом, необходимо экранировать перед выводом. Иначе если внутри содержится HTML, то он будет проинтерпретирован. Ситуация может стать опасной, если этот текст на сайт добавляют сами пользователи.
JSX работает по-другому. Всё, что выводится обычным способом - безопасно по умолчанию и экранируется автоматически. А вот в тех местах, где этого не требуется, экранирование отключается так:
See the Pen js_react_jsx_html_difference_safety by Hexlet (@hexlet) on CodePen.
По сути, для вывода без экранирования нужно использовать свойство dangerouslySetInnerHTML.
Совсем по другому работает атрибут style. Если в HTML это обычная строка, то в JSX только объект.
See the Pen js_react_jsx_html_difference_style by Hexlet (@hexlet) on CodePen.
Для консистентности с именами атрибутов в HTML, имена CSS-свойств также должны быть записаны в стиле camelCase.
Если свойство передаётся в компонент без значения, то оно автоматически становится равным true
.
Примеры ниже эквивалентны:
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
При этом предпочтительным является первый вариант.
Более подробно о различиях можно прочитать в официальной документации. Кроме того, в будущих уроках мы будем сталкиваться с этими различиями на практике.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт