The self-fulfilling prophecy of React
&gt; JSX is a gotcha-riddled kludge to clumsily shoehorn HTML into a JavaScript function return. The only thing worse than using JSX with React is not using JSX with React.<p>Not sure I understand this, or if I do understand it, I definitely don&#x27;t agree. HTML&#x27;s a tree. Function calls are a tree. They&#x27;re similar in nature and they map cleanly to each other.<p>&gt; Or how you can’t use some standard HTML attributes in JSX (because JSX doesn’t know the difference between a React prop and an HTML attribute). Or memoization. Or how there aren’t real conditionals, so you have to rely on short-circuit operators. Or how preventing infinite loops is your responsibility—even though there aren’t really loops, so you have to use array methods…you know what, let’s just move on.<p>These are natural consequences of representing HTML as code, and they help me understand the first quote a bit better. I still don&#x27;t think JSX is bad. Putting flow control into the template language in the style of Vue, Angular, or even the supposedly logicless Mustache ends in a programming style that I dislike, where the dividing line between template logic and logic in the actual code isn&#x27;t clear, and you need to refactor heavily when you reach the gaps in what the template language lets you do.<p>They&#x27;re closer to failures of EcmaScript. Coffeescript and Ruby weren&#x27;t ideal, but their syntactic sugar would have let you do (in ES-like pseudocode):<p><pre><code>    const TodosList = ({ todos }) =&gt; (
      &lt;div class=&quot;todo-list&quot;&gt;
        {
          if (todos.length &gt; 0) {
            todos.map(t =&gt; &lt;Todo key={t.id} todo={t} &#x2F;&gt;);
          } else {
            &lt;p&gt;No todos yet&lt;&#x2F;p&gt;
          }
        }
      &lt;&#x2F;div&gt;
    );
</code></pre>
Blending code and data can look a bit scary, but it lets you copy the blocks of code around like normal. You could (in a theoretical world where if statements returned the result of the last line of the branch) just copy that code outside the JSX, and have it work properly. With horrible JSX ternary operators you still have to rewrite, but that&#x27;s the fault of the JS part of JSX not the underlying language-agnostic concept, and it&#x27;s still something I prefer to putting logic in the template language itself.