Yeah, agreed. React and JSX really shines with a good component library, and the key word with react is composable. I don't know that, by itself, better syntax for HTML-in-JS would advance the state of the art. Instead of having divs and spans everywhere, they're an implementation detail of components.
medicationListItem has the `<li>`, with the styling living somewhere inside. Templates, especially in separate files, don't really manage to be composable with the same ease. Leaving the divs and spans and CSS to the lowest levels of the component library does wonders for making the code easier to reason about, and maintain. React code from a few years ago still has some warts, but it's still way less painful to try and pick up than code that was written with traditional templating. (Specifically, the templated project was using `.erb` files.)
React threw out MVC and templates (though some say it's just the V instead), and is worth learning just to feel like it's possible to implement UIs cleanly.
The only way the vanilla webcomponents are "composable" is through tons of boilerplate code using DOM APIs. You can't even re-create the example with list elements without tearing your hair out when using webcomponents.
It's so bad that any examples showing "composability" immediately give up and use .innerHtml everywhere, and even then it's pretty bad.
It's so bad, in fact, that people do anything to avoid writing vanilla and use lit-html (yay, programming with strings), Stencil, or even Preact (AMP switched to Preact to author components).
I can change
to Without having to know what html+css tricks topBar is doing under the hood.Inside of medicationsPanel, there's <medicationsList> which is the `ul`.
medicationListItem has the `<li>`, with the styling living somewhere inside. Templates, especially in separate files, don't really manage to be composable with the same ease. Leaving the divs and spans and CSS to the lowest levels of the component library does wonders for making the code easier to reason about, and maintain. React code from a few years ago still has some warts, but it's still way less painful to try and pick up than code that was written with traditional templating. (Specifically, the templated project was using `.erb` files.)React threw out MVC and templates (though some say it's just the V instead), and is worth learning just to feel like it's possible to implement UIs cleanly.