What Is Jsx / TSX?

Problem

Anyone who has ever worked with React will know the file extension JSX (TSX for TypeScript) and the HTML-related syntax.

Example:

const profile = (
  <div>
    <img src={u.avatar} className="profile" alt={`Pic of ${u.firstName}`} />
    <h3>{[u.firstName, u.lastName].join(" ")}</h3>
  </div>
);

But how does it work? This magic syntax is not supported by JavaScript itself.

Solution

A transpiler (e.g. babel or tsc) converts JSX/TSX into pure JavaScript code. The example shown above would be compiled to the following JS:

const profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: u.avatar, className: "profile", alt: `Pic of ${u.firstName}` }),
  React.createElement("h3", null, [u.firstName, u.lastName].join(" ")),
);

• The function React.createElement gets as first parameter either a tag name or a component.
  • If the tag name in the JSX is lowercase, e.g. , the parameter will become a string. Otherwise (e.g. ) it is a assumed to be a function or a class (which must be present in the scope with the same name).
• The second parameter is an object with all properties assigned to the tag. If no properties have been assigned, this parameter is null.
• The remaining parameters are the children that have been inserted into the tag.

Example

You can easily write a replacement for React which, instead of a Virtual DOM, creates real HTML elements with document.createElement:

function h(tag, props, ...children) {
  if (typeof tag === "function") return tag({ ...props, children });

  const element = document.createElement(tag);
  if (props) setAllAttributes(element, props);

  applyChildren(element, children);
  return element;
}

This function can be called instead of calling React.createElement. This very simple example even supports function components.

Further Aspects

• Babel: https://babeljs.io/docs/babel-plugin-transform-react-jsx
• TypeScript: https://www.typescriptlang.org/docs/handbook/jsx.html
• The last example in TypeScript a bit more in detail: https://github.com/Lusito/tsx-dom
• React without JSX: https://reactjs.org/docs/react-without-jsx.html
• Why JSX in React: https://reactjs.org/docs/introducing-jsx.html