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>

start an html-like snippet

HTML-like syntax starts at the first HTML element and ends on its matching closing element.

const HiText = <div>Hi</div>

embed a JS snippet

Within the snippet, we may embed some JS within 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 code. An HTML element is transformed into a single function call.

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.