JSX

JSX is what you typically use with react to describe the UI

It attempts to follow the structure of HTML, but because JSX is converted into javascript objects, it cannot follow it to the T, hence the following rules

Rule 1: You must return a single root element

A function can only return a single object without wrapping those objects into an array, you must return a single root element

To do this either wrap the elements in a <div> or a fragment <> </>

Rule 2: All tags must close

You must eather follow with a closing tag such as <img> & </img> , or use a self closing tag such as <img/>

Rule 3: Most elements / attributes are camelCase

Elements / attributes names are named in camelCase

Their names cannot include dashes, hence stroke-width becomes strokeWidth

Cannot use reserved keywords such as class, so the class attribute becomes className