Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 Although JSX tries to be similar to HTML, they have some differences.

2 In JSX, we write incamelCaseall DOM properties and attributes, including event handlers. For instance, thetabindexattribute becomestabIndex. However, two exceptions to this rule arearia-anddata-attributes, which retain their typical spelling as they appear in plain HTML.

3 <h2>htmlFor</h2>

4 Sinceforis a reserved word in JS, React elements use thehtmlForproperty.

5 <h2>Escaping</h2>

6 Standard HTML is not entirely secure, as unescaped text can pose a threat. It is necessary to escape any text that should be displayed as plain text, to prevent any HTML within from executing. This situation can be particularly hazardous in cases where the user adds this text to the website.

7 JSX operates differently. Any output that occurs under normal circumstances is secure by default and is automatically escaped. However, in instances where it is unnecessary, the automatic escaping can be turned off like so:

8 See the Pen<a>js_react_jsx_html_difference_safety</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.

9 You need to use thedangerouslySetInnerHTMLproperty to output without escaping. We pass an object with the __html property to this property, the value of which is a string with HTML.

10 If a component has adangerouslySetInnerHTMLattribute, it should have no content. The following example will lead to an error:

11 <h2>Styles</h2>

12 Thestyleattribute works quite differently. In HTML, it's a plain string. In JSX, it's only an object:

13 See the Pen<a>js_react_jsx_html_difference_style</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.

14 We write CSS property names incamelCasefor consistency with attribute names.

15 <h2>Default property value</h2>

16 If we pass a property to a component without a value, it automatically becomes true.

17 The examples below are equivalent:

18 In this case, the first option is preferable.

19 <h2>The rest</h2>

20 You can read more about the differences in the<a>official documentation</a>. In addition, future lessons will show these differences in practice.