Maybe you're hitting a pathological use-case because of the nature of your API. In which case you can always wrap it inside a single function and just do `<MyMarkdown text={bla} />`
But it's not just contrived examples. Here's a list:
<ul>
{(this.state.items || []).map(item => (
<li>{item}</li>
))}
</ul>
<ul>
<li v-for="item in items">{item}</li>
</ul>
let loginOrLogout
if (this.isLoggedIn()) {
loginOrLogout = <LogoutButton />
} else {
loginOrLogout = <LoginForm />
}
// snip
<div>{loginOrLogout}</div>
<div>
<logout-button v-if="isLoggedIn" />
<login-form v-else />
</div>
The reason I say that is because you say "conceptually simple" as if that's a bad thing. Maybe we have to agree to disagree, but in choosing a framework I would much, much rather go for the one that is conceptually simple (at the cost of some extra verbosity in certain cases) over one that is conceptually complex but covers up that complexity with a terse-but-incomplete API.
You're not going to understand the benefits of the Vue vs. React choice by looking at idealized code samples, which is all your comment is showing. You'll only know it once you get into the edge cases. For example for list iteration in Vue...
- ...how do you change that example to omit the last item?
- ...how do you change that example to render a different element for every other item?
- ...how do you render something different if there are no items?
That's what makes the JSX approach simple. Once you understand that you can use any Javascript expression you want, you don't need to learn further. All of those questions can be guesstimated by a newcomer.
But with Vue you have to learn each and every "directive" and "modifier", and consult the docs again each time you forget them.