[Longwelwind]

If your project grows big, you will at some point need to use a state management library like VueX which has similar concepts than Redux, so I'm not sure this argument holds.

My biggest problem with Vue is the template syntax. Since JSX is a thin layer over Javascript, few modifications have to be done over Javascript (or Typescript) tools to make them work with JSX (or TSX). Vue templates are a totally new language which requires more complex tools. I've never had any problem using refactoring tools (renaming variables, go to declaration, find usages, ...) with React, while in my last Vue project, renaming a variable broke code.

Vue has Vuetify, which has been a breeze to use, though. I don't know if there is a React equivalent.

[leipert]

You can use TSX and JSX with Vue: https://vuejs.org/v2/guide/render-function.html

[mcv]

Vue templates are not in any way more of a totally new language than JSX is. Vue templates are simply XHTML snippets with added data bindings. JSX is not quite XHTML (you have to use className instead of class) with added data bindings.

I find Vue templates slightly cleaner for that reason, but the difference isn't big. How they're used is different, though: React wants everything, including the XHTML, to be javascript. Vue puts it all in HTML, with script tags for the javascript.

[Longwelwind]

If I have this:

  <div v-for="item in items">
    <span>...</span>
  </div>

The refactoring tools must know that the "items" inside the "v-for" refers to a property of the data object. In other words, the content of the data bindings is a totally new language by itself (the content of v-for has its own syntax, with a parser).

Compared to the equivalent in React, which would be:

  {this.items.map(i => (
    <span>...</span>
  )}

Or possibly

  let elements = [];
  for (item in this.items) {
    elements = <span>...</span>
  }

It's way easier for a refactoring tool to support JSX since it's just syntactic sugar over JS. If you were the developer of such a tool, you would just need to consider "<>" as values and possibly consider anything inside "{}" as normal Javascript.

And indeed, as pointed by another commenter, React supports classes and integrates very well with Typescript since React 16.

[mlsarecmg]

JSX is a dsl, like typescript or flow, it doesn’t change or affect your code, all assumptions stand, it doesn’t break scope. Vue templates are not a dsl, they break all assumptions and your scope. There is no difference between Vue and angular in that regard, both could not do this with templates:

    const A = () => <div />
    const B = () => <A />

JSX turns that into:

    const A = () => createElement('div')
    const B = () => createElement(A)

That is all that JSX does. Vue on the otherhand parses its own language, breaks scope, separates concerns that shouldn’t be separated and in the end joins them via dependency injection again. We’ve been through this years before Vue existed with angular and others.

BTW, your info is outdated. "class" is allowed in React as of V16.