I would assume that lot of people just find the JSX equivalent a lot more readable and familiar (a matter of opinion, of course.)
<div>
<p>this is easy</p>
{list.map((l) => <li>{l}</li>)}
</div>
> you automatically get loops, variable interpolation etc without having to invent a compiler and new syntax
To be fair to JSX, you use regular loops, interpolation, etc without any different syntax (`{}` accepts a vanilla JS expression), you just obviously need the compiler step to de-sugar the element tags to `createElement` calls.
That said if anything pretty much all of the new school frameworks and many of the tools in their ecosystems are already dependent on compilers for optimization anyway, react itself is introducing a compiler in the latest versions.
Anyway I prefer the html looking syntax if anything because it looks like the output on the page. That’s dependent on a project coding style that doesn’t unnecessarily wrap things in components, which for my company’s product I’ve set as a standard.
To be fair to JSX, you use regular loops, interpolation, etc without any different syntax (`{}` accepts a vanilla JS expression), you just obviously need the compiler step to de-sugar the element tags to `createElement` calls.