GP formatted it wrong, you could write the JSX example like this:

  return (
    <ul>
      {numbers.map((num, i) => (
        <li key={i}>
          {num}
        </li>
      ))}
    </ul>
  )

Which with syntax highlighting is, imo, as readable as any piece of code.

The advantage is that it is statically checkable with a linter, so you would get a compile-time error if you misspell the HTML tag, a variable or anything else.

If you use something Typescript, the compiler will even check the props given to components (and if you use VS Code, you'll get auto-completion for variables, methods, props and anything statically checkable). You can even apply inheritance to components for dynamic component switching.

I briefly used Vue before switching completely to React (with Typescript, Webpack and Mobx) and it finally became enjoyable to write Javascript applications.