[alsiola]

JSX is just sugar around JavaScript, and interops nicely with it. I'm okay with that. The more I write JSX, the better I become at the programming language I'm using. Concepts and patterns in JS can be adopted in my components.

If I learn Vue's templating language, then I'm spending my time learning a system with no wider applicability, a much narrower tooling space, that doesn't utilise my previous or future experience from JS. That's not a good calculus for me.

[recursive]

I don't understand how Jsx is syntax sugar in a way that vue templates aren't. Neither of them are valid JavaScript but they both compile to it.

[alsiola]

A concrete example then. Commonly want to prevent form submission default behaviour.

Vanilla

  <script>
    const form = document.getElementById("form");
    form.addEventListener("submit", event => event.preventDefault())
  </script>
  <form id="form">...</form>

React

  <form onSubmit={event => event.preventDefault()}>...</form>

Vue

  <form @submit.prevent="onSubmit">...</form>

React's API has guided the developer to learn about events. If they move outside the React ecosystem they have transferable knowledge. As someone unfamiliar with React, but used to the DOM you're surely comfortable here. Yes, the syntax isn't identical to how you might use this in vanilla JS, but it's clearly the same concept. It's just been made a little nicer to use - the sugar.

Vue's API has reinvented the wheel. There's one place this syntax is useful and one place alone - Vue itself. It hasn't used my existing knowledge, or pushed me to become more familiar with the platform upon which I'm building. That's not sugar, that's a new language.

I've probably got the vanilla example wrong - when you don't do it frequently it's not the most ergonomic thing in the world. React takes that API, doesn't deviate far from it, and makes it easier to use. Sugar.