Register to get access to free programming courses with interactive exercises

JSX vs HTML JS: React

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

In JSX, all DOM properties and attributes (including event handlers) must be written in camelCase. For example, the tabindex attribute turns into tabIndex. The exceptions are aria- and data- attributes; they're written in exactly the same way as in plain HTML.

htmlFor

Since for is a reserved word in JS, React elements use the htmlFor property.

Escaping

Ordinary HTML isn't very secure. Any text that needs to remain as text must be escaped before output. Otherwise, if there's HTML inside, it will be interpreted. The situation can become dangerous if this text is added to the site by users themselves.

JSX works differently. Anything that's output in the normal way is safe by default and is automatically escaped. But in places where it isn't required, the escaping is turned off like so:

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

Basically, you need to use the dangerouslySetInnerHTML property to output without escaping. An object with the __html, property is passed to this property, the value of which is a string with HTML. Note: If a component has a dangerouslySetInnerHTML attribute, it should have no content. The following example will lead to an error:

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

Styles

The style attribute works quite differently. Although in HTML it's a plain string, in JSX it's only an object.

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

For consistency with attribute names, CSS property names must also be written in camelCase.

Default property value

If a property is passed to a component without a value, it automatically becomes true.

The examples below are equivalent:

<MyTextBox autoComplete />

<MyTextBox autoComplete={true} />

In this case, the first option is preferable.

The rest

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


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.