This exists for a reason. If you do this in HTML: <li>Hello</li> <li>World</li> <li>!!!</li> You now have text nodes containing a space in between

This exists for a reason. If you do this in HTML: <li>Hello</li> <li>World</li> <li>!!!</li> You now have text nodes containing a space in between the <li> 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: <li>Hello</li><li>World</li><li>!!!</li> Or use float: left|right styles to push the text nodes out of the way. Both are ugly solutions. With JSX, I don't have to think about that. I'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.