Learn TypeScript 3 by Building Web Applications

JSX is not HTML

One thing to be aware of is that JSX is not HTML.

It mimics HTML but has some (minor) differences:

• Inline styles are defined using plain objects that describe patches to apply to the DOM element's style property: <div style={{ color: "green" }}></div>.
• htmlFor is used instead of for.
• className is used instead of class.
• Comments are written using the JavaScript syntax and not with standard HTML comments. Moreover, they don't end up in the rendered HTML.
• ReactDOM uses camelCase for property names; for example, tabindex becomes tabIndex in JSX.

Those differences are explained by the incompatibility of the original HTML syntax with JavaScript. For example, class is a reserved keyword in JavaScript. These differences are quite ...