[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.