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.

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.