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 limited, so it's not much of an issue in practice.