Here's my perspective, as someone who's done a lot of JavaScript app development and recently onboarded into a Django app:

- JSX composes normal JavaScript expressions. That means that every operator/function/etc I have access to in JavaScript is also available within JSX. With Django templates, I need to create a custom tag or filter.

- JSX desugars to a normal JavaScript expressions. That means I can store it in a variable, return it from a function, etc.

- JSX returns a structured object, rather than a string. That means it can be used to support output formats other than text. This isn't so much of an advantage for web dev, where everything is a string, but it's a "least worst" situation if you use other targets like React Three Fiber, React Native, etc.

- The aforementioned type safety is nice!

On the other hand, I imagine Django templates are significantly more welcoming if you're more familiar with HTML than JavaScript.

By the way, the ternary in your JSX example can be removed by filtering the array:

    <div>
      <h1>Conditional Display and Looping in JSX</h1>
      <ul>
        {this.state.items
          .filter(item => item.show)
          .map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>