👩‍🔬 JSX

JSX can seem a bit magical but it’s really not very complicated! It’s really not much more than a small bit of syntax sugar for ECMAScript over function calls with the intention of representing tree structures in an efficient way. Facebook has published a proposed standard for the syntax which describes the purpose of the syntax as follows:

The purpose of this specification is to define a concise and familiar syntax for defining tree structures with attributes. A generic but well defined syntax enables a community of independent parsers and syntax highlighters to conform to a single specification.¹

and further, it says:

This specification does not attempt to comply with any XML or HTML specification. JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity.

Which reflects the fact that JSX is already used for representing a bunch of non-HTML trees, for instance in React Native or for building interactive CLI apps.

Desugaring JSX, in a React context, translates the following:

import React from 'react'

export default function Example() {
  return <div className="foobar">Hello World!</div>
}

to

import React from 'react'

export default function Example() {
  return React.createElement(
    'div',
    { className: "foobar" },
    "Hello World!"
  )
}

It’s up to the build system / proprocessor / compiler / whatever you’d like to call it to perform this translation at build time, since JSX is not supported by browsers at present (nor, to my knowledge, is there much effort in that direction).

JSX was initially developed for React but has since been used in a lot of projects. It’s not particularly hard to use it with a different function as long as it conforms to the same tagName: string, attributes: Record<string, any>, ...children: string | Element interface that React created.