It's a squick factor issue. When you're trying to break down templates as small as possible, everything tends to become a bit icky in templating systems anyway.

It's a squick factor issue. When you're trying to break down templates as small as possible, everything tends to become a bit icky in templating systems anyway. Consider - [% BLOCK foo %] <td>[% payload %]</td> [% END %] ... [% INCLUDE foo payload=something %] in TT (perl's Template Toolkit, which I'm about 98% sure pkrumins is familiar with already), and then function foo ({ payload }) { <td>{ payload }</td> } ... <Foo payload={something}/> Once you've got a bunch of them in the same file, I don't honestly find the JSX much different. The trick for me is to have the HTML in .js files that contain only pure functional rendering components - so when I'm editing those, I can think in HTML and just treat the JS as a slightly weird template syntax - at which point the squick factor mostly recedes.