It&#x27;s a squick factor issue. When you&#x27;re trying to break down templates as small as possible, everything tends to become a bit icky in templating systems anyway. Consider -<p><pre><code>    [% BLOCK foo %]
        &lt;td&gt;[% payload %]&lt;&#x2F;td&gt;
    [% END %]
    ...
    [% INCLUDE foo payload=something %]
</code></pre>
in TT (perl&#x27;s Template Toolkit, which I&#x27;m about 98% sure pkrumins is familiar with already), and then<p><pre><code>    function foo ({ payload }) {
        &lt;td&gt;{ payload }&lt;&#x2F;td&gt;
    }
    ...
    &lt;Foo payload={something}&#x2F;&gt;
</code></pre>
Once you&#x27;ve got a bunch of them in the same file, I don&#x27;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&#x27;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.