JSX

overview

JSX is a variant of JS that allows HTML-like snippets:

const HiText = <div>Hi</div>

We may interweave JS and HTML snippets recursively

const HiText = <div>Hi {nickname}</div>
const HiText = <div>Hi {nickname ?? <Spinner />}</div>

start an html-like snippet

HTML-like syntax starts at the first HTML element and ends on it's matching closing element.

const HiText = <div>Hi</div>

embed a JS snippet

Within the snippet, we may embed some JS with curly braces.

const HiText = <div>Hi {nickname}</div>
const HiText = <div style={st}>Hi</div>

transpile

A transpiler transforms the HTML-like snippets into JS function calls:

const hi = <div>Hi</div>
const hi = _jsx("div", { children: "Hi" })

tsx

TSX is the file format for typescript files that contain HTML-like snippets in the same fashion as JSX.