createElement

Minimalist bridge from data to document.

What is it?

A function that turns:

createElement('div', { className: 'thingy' }, [
  ['span', { style: { fontWeight: 'bold' } }, 'Testing'],
]);

into:

<div className="thingy">
  <span style="font-weight: bold">Testing</span>
</div>

Call styles

createElement(
  type: ComponentType,
  props?: ComponentProps,
  children?: ComponentChildren
)

type is a tag name (e.g., "div"), a namespaced tag name (e.g., [SVGNS, "path"]), or a component (see below). props is any POJSO containing element properties. children is a string, or an array of strings, DOMRepresentations, or raw HTML Elements.

DOMRepresentation should look familiar, as it's an array of createElement's arguments:

[
  type: ComponentType,
  props?: ComponentProps,
  children?: ComponentChildren
]

So if you just want to render a component, it's simple:

const rendered = createElement(...Component(props));

Components

Kinda like React components, but without the reactivity. createElement is only a bridge from data to DOM - it does not provide re-render capabilities; you'll want to do that in your components manually. General form is:

const Component = (props) => DOMRepresentation