How is JSX different from HTML?

Direct answer

JSX looks like HTML but follows JavaScript-oriented rules such as camel-cased properties, JavaScript expressions in braces, and stricter element nesting.

Concern	HTML	JSX
CSS class	class	className
Label association	for	htmlFor
JavaScript values	Not embedded with JSX syntax	Use {expression}
Attribute naming	Often lowercase	Many DOM properties use camelCase
Empty elements	HTML rules vary	Must be closed, e.g. <img />

A component must return a single JSX tree. When you do not want an extra DOM wrapper, you can group siblings with a React Fragment.