What if React was imperative instead of being functional?
When you write JSX, it compiles down to nested calls to createElement()
(or the equivalent, I don't know if that's still the function React uses). Because this ends up being a single recursive function call, you can only use value expressions inside the code--that's why you have to map()
when you loop, and you have to use ternaries instead of actual conditional statements.
Over time, the React team's thinking about architecture has clearly shifted a lot, to the point now where hook functions create implicit, hidden state that's preserved in the order of the function calls. What if JSX worked this way? What if when you wrote a template, instead of a single function call with nested expressions, it used imperative, IMGUI-like function calls instead? In that case, the raw code might look something like this:
template(html => {
var { footer, a, button, text, div, ul, li } = html;
div`.outer`;