2 added
2 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Хотя JSX и пытается быть похожим на HTML, у них все же есть некоторые отличия.</p>
1
<p>Хотя JSX и пытается быть похожим на HTML, у них все же есть некоторые отличия.</p>
2
<p>В JSX все свойства DOM и атрибуты (включая обработчики событий) должны быть записаны в<em>camelCase</em>. Например, атрибут<em>tabindex</em>превращается в<em>tabIndex</em>. Исключением являются атрибуты<em>aria-</em>и<em>data-</em>, они записываются точно так же, как и в обычном HTML.</p>
2
<p>В JSX все свойства DOM и атрибуты (включая обработчики событий) должны быть записаны в<em>camelCase</em>. Например, атрибут<em>tabindex</em>превращается в<em>tabIndex</em>. Исключением являются атрибуты<em>aria-</em>и<em>data-</em>, они записываются точно так же, как и в обычном HTML.</p>
3
<h2>htmlFor</h2>
3
<h2>htmlFor</h2>
4
<p>Так как<em>for</em>- зарезервированное слово в JS, в React-элементах используется свойство<em>htmlFor</em>.</p>
4
<p>Так как<em>for</em>- зарезервированное слово в JS, в React-элементах используется свойство<em>htmlFor</em>.</p>
5
<h2>Экранирование</h2>
5
<h2>Экранирование</h2>
6
<p>Обычный HTML не очень безопасен. Любой текст, который должен оставаться текстом, необходимо экранировать перед выводом. Иначе если внутри содержится HTML, то он будет проинтерпретирован. Ситуация может стать опасной, если этот текст на сайт добавляют сами пользователи.</p>
6
<p>Обычный HTML не очень безопасен. Любой текст, который должен оставаться текстом, необходимо экранировать перед выводом. Иначе если внутри содержится HTML, то он будет проинтерпретирован. Ситуация может стать опасной, если этот текст на сайт добавляют сами пользователи.</p>
7
<p>JSX работает по-другому. Всё, что выводится обычным способом, безопасно по умолчанию и экранируется автоматически. А вот в тех местах, где этого не требуется, экранирование отключается так:</p>
7
<p>JSX работает по-другому. Всё, что выводится обычным способом, безопасно по умолчанию и экранируется автоматически. А вот в тех местах, где этого не требуется, экранирование отключается так:</p>
8
-
<p><a>https://codepen.io/hexlet/pen/MvLNZg</a></p>
8
+
<p><a>Попрактиковаться</a></p>
9
<p>По сути, для вывода без экранирования нужно использовать свойство<em>dangerouslySetInnerHTML</em>. В это свойство передаётся объект со свойством __html, значением которого является строка с HTML. Обратите внимание: если у компонента определён атрибут<em>dangerouslySetInnerHTML</em>, то содержимого у такого компонента быть не должно. Следующий пример приведёт к ошибке:</p>
9
<p>По сути, для вывода без экранирования нужно использовать свойство<em>dangerouslySetInnerHTML</em>. В это свойство передаётся объект со свойством __html, значением которого является строка с HTML. Обратите внимание: если у компонента определён атрибут<em>dangerouslySetInnerHTML</em>, то содержимого у такого компонента быть не должно. Следующий пример приведёт к ошибке:</p>
10
<h2>Стили</h2>
10
<h2>Стили</h2>
11
<p>Совсем по-другому работает атрибут<em>style</em>. Если в HTML это обычная строка, то в JSX только объект.</p>
11
<p>Совсем по-другому работает атрибут<em>style</em>. Если в HTML это обычная строка, то в JSX только объект.</p>
12
-
<p><a>https://codepen.io/hexlet/pen/NvoQOe</a></p>
12
+
<p><a>Попрактиковаться</a></p>
13
<p>Для консистентности с именами атрибутов, имена CSS-свойств также должны быть записаны в стиле<em>camelCase</em>.</p>
13
<p>Для консистентности с именами атрибутов, имена CSS-свойств также должны быть записаны в стиле<em>camelCase</em>.</p>
14
<h2>Значение свойств по умолчанию</h2>
14
<h2>Значение свойств по умолчанию</h2>
15
<p>Если свойство передаётся в компонент без значения, то оно автоматически становится равным true.</p>
15
<p>Если свойство передаётся в компонент без значения, то оно автоматически становится равным true.</p>
16
<p>Примеры ниже эквивалентны:</p>
16
<p>Примеры ниже эквивалентны:</p>
17
<p>При этом предпочтительным является первый вариант.</p>
17
<p>При этом предпочтительным является первый вариант.</p>
18
<h2>Остальное</h2>
18
<h2>Остальное</h2>
19
<p>Более подробно о различиях можно прочитать в<a>официальной документации</a>. Кроме того, в будущих уроках эти различия будут показаны на практике.</p>
19
<p>Более подробно о различиях можно прочитать в<a>официальной документации</a>. Кроме того, в будущих уроках эти различия будут показаны на практике.</p>