This exists for a reason. If you do this in HTML:<p><pre><code>    &lt;li&gt;Hello&lt;&#x2F;li&gt;
    &lt;li&gt;World&lt;&#x2F;li&gt;
    &lt;li&gt;!!!&lt;&#x2F;li&gt;
</code></pre>
You now have text nodes containing a space in between the &lt;li&gt; elements. These will subtly affect how the elements are rendered. In HTML, if you want to get rid of those text nodes, you have to write the elements on one line:<p><pre><code>    &lt;li&gt;Hello&lt;&#x2F;li&gt;&lt;li&gt;World&lt;&#x2F;li&gt;&lt;li&gt;!!!&lt;&#x2F;li&gt;
</code></pre>
Or use float: left|right styles to push the text nodes out of the way. Both are ugly solutions. With JSX, I don&#x27;t have to think about that.<p>I&#x27;ve never even ran into your issue because I use React for web app development and so use translation strings (i.e. function calls) for pretty much all user-visible text. If you ask me, the trade-off React chooses here is adequate.