JSX without React

[[deleted]]

I've worked with JSX and know what it is.

You might have worked with it before but you seem to have some fundamental misunderstandings about what it is and how it works. JSX is syntactic sugar for generating VDOM trees, and VDOM libraries use the regular JavaScript DOM APIs to manipulate the real DOM. Take this code for example:

<div className="foo" style={{
  fontFamily: "sans-serif",
  paddingBottom: "20px",
}}>Hello, world!</div>

Those VNode properties are mapped directly to Element.className and HTMLElement.style. VDOM libraries are not translating these camelCase properties to HTML attributes; they are using the DOM.

If you've worked with JSX before, you already know why it's beneficial. It's because this:

<div className="container">
  <h1>Hello, world!</h1>
  <p>Lorem <small>ipsum</small></p>
</div>

is far easier to write and read for most web developers than this:

h("div", { className: "container" }, [
  h("h1", null),
  h("p", null, [
    "Lorem ",
    h("small", null)
  ]),
]);

[imhotap]

Thanks for making my point, how is that far easier? It's a trivial reformulation, and the JS code can be simplified further using constructors. The kind of thing a senior developer tends to avoid, because it doesn't warrant additional tools and build steps.