JSX

overview

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

const hiText = <div>Hi</div>

We can interweave HTML and JS:

const hiText = <div>Hi {nickname}</div>

start an inline HTML-like snippet

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

const hiText = <div>Hi</div>

embed JS

Within the snippet, we embed some JS within curly braces.

const hiText = <div>Hi {nickname}</div>
const hiText = <div style={styleObject}>Hi</div>

transpile

The transpiler transforms HTML-like snippets into JS code: HTML elements are transformed to function calls:

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

.tsx

TSX is the equivalent of JSX for TypeScript. Files have the tsx extension.