To provide a quick feedback, I believe the 'without jsx' version could have been improved. One advantage it already has is that it doesn't need the repetition of /closing> elements.

But it doesn't go far enough in terms of function composition to pass arguments. The signature (that resembles react.createElement I guess) is too cumbersome.

That creates a succession of braces and comma which is unfortunate. Just to specify some object attributes. That could be easily a function Attr().

We have higher order functions easily in javascript. We should make use of it.

That eliminates html looking jsx since we just use functions. That's less confusing than pseudo html syntax.

Show me what that code would look like if it was done better.

Maybe you could try with hyperscript syntax for react(which I've just found the existence of).

https://github.com/hyperhype/hyperscript

https://github.com/mlmorg/react-hyperscript

which might be actually similar except for the dollar sign which adds some noise.

But some of your prop/attr setting would be inner function/methods instead of being passed as an array. That would shorten some lines.

> Show me what that code would look like if it was done better

I'm definitely not going to try to provide an example if you do not offer the courtesy of a smaller representative example though.

By the way, why is $(Label,...) not simply Label()? That could be a function.

Eventually I got new Label() working, but Label() by itself isn't possible while keeping them as ES6 classes.

After a while of managing commas, you just begin to long for JSX again. Hyperscript wouldn't solve that.