JSX

    JSX is an extension to the JavaScript language that adds a new kind of expression, the JSX expression, used to create React elements (which we'll cover soon).

    JSX expressions are a concise syntax for calling the API, React.createElement(type, props, ...children).

    We can use JSX expressions anywhere we could use any other expression, e.g. in a return statement or variable assignment.

    Type

    Like XML, each JSX expression has a tag, e.g. <div />, which is then transformed into a call to React.createElement("div"). In this case, "div" is the type of the element.

    On the right in the example above, we can see how our JSX expressions are compiled by babel.

    Props

    Any JSX attributes become props (parameters) of the React element. The value of an attribute can be a string, like foo="hello", or it can be any JavaScript expression when wrapped in curly braces, as in bar={baz} (which would set the value of the bar prop to baz).

    Children

    Any children elements should go between the opening tag, <div>, and closing tag </div>. Elements without children can using a self-closing tag, like <div />, as a shorthand.

    When a JSX element wraps to multiple lines, we often write it when parentheses around it, since it looks nicer.

    Interpolation

    Children are generally other elements, but can also be plain text or any other kind of expression if wrapped in curly braces, { ... }.

    Why JSX?

    The XML-like syntax is typically more concise, easier to read, and visually looks a little like the generated UI (both are tree-like). We don't have to use JSX, but there are few disadvantages, so we probably should use it.