A short comparison of various markup flavors.

tagsoup.md

JSX

<Window content={
  <div>
     <h1>Hello!</h1>
     <button onClick={function () { alert("why not onclick?!"); }}>Click me!</button>
  </div>
} />

Why is it className and htmlFor and why onClick and why does onChange get remapped to oninput? But I have to admit it's nice that at least whatever is in braces is actual JavaScript and some other framework-specific derivative of it, as it is for the next one ...

Riot

<h3>{ opts.title }</h3>

<ul>
  <li each={ item, i in items }>{ item }</li> <!-- the argument to each is definitely not JS -->
</ul>

<form onsubmit={ add }>
  <input ref="input">
  <button>Add #{ items.length + 1 }</button> <!-- why is it #{} here and {} for the h3? -->
</form>

Vue

Messing with attribute values is definitely not enough though. Let's prefix attribute names with funny sigils:

<textarea :value="input" @input="update"></textarea>

But at least some things are admittedly solved with well formed XML:

<div v-bind:id="dynamicId"></div>

Where others just go bonkers ...

Angular

Until you've seen Angular, you ain't seen nothing:

<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}
<button [hidden]="isUnchanged" (click)="deleteHero()">Delete</button><!-- What does this even mean? -->