> JSX is a custom extension to JavaScript. > In fact, you have to use some sort of transpiler in order to use it. So, it's not just JavaScript.

Yes. However, one thing you fail to see is that it directly compiles to function calls.

   <Tag a="b" x={y+z}>{valid JS expression}</Tag>

is

   React.createElement(Tag, { a: "b", x: y + z }, [<valid JS expression>])

Which means:

- you have access to JS variable in scope

- you can use JS facilities (proper if/switch statements, for loops, functional programming, you name it)

- you need no additional scripting or templating features. It's, well, just Javascript.

However in Vue (emphasis mine):

> There's really nothing that complicated in here, if you're familiar with Vue.

Yes. Exactly. If you're familiar with Vue

So:

- custom tag attributes: v-bind, v-if, v-for, v-on, v-show, v-model... (I honestly don't know how long this list is)

- custom attribute shorthands: :key, @key

- attribute extensions: v-on:keypress.prevent

Inside attributes you can have:

- Javascript expressions (much like React inside {})

- or magic binding:

    v-bind:href="url", v-if="seen" etc.

- or JS-object-like magic bindings which resolve to a string:

    v-bind:class="{ active: isActive, 'text-danger': hasError }"

- or JS-array-like magic binding that gets resolved to a string:

    v-bind:class="[activeClass, errorClass]"

- or a magic array with objects that gets resolved to a string:

    v-bind:class="[{ active: isActive }, errorClass]"

- or a separate DSL for v-for:

    v-for="(item, index) in items"

- or a separate DSL for v-for where you can bind entities from the DSL (which looks exactly like the magic binding to data from the component, what happens when they clash?):

    v-for="(item, index) in items" :key="items.id"

- or JS expressions that may be function references that may be things that look like function calls but actually aren't:

    v-on:click="counter += 1"

    v-on:click="greet"

    v-on:click="say('what')"

- with special magic variables

    v-on:click="warn('Form cannot be submitted yet.', $event)"

- with special magic modifiers

    v-on:click.stop.prevent="doThat"

"It's not that difficult" ©™ And the list above doesn't include the overview of the JS code that underlies components in view. It's another whirlwind of magic and non-magic: https://news.ycombinator.com/item?id=17471199

Oh yes, and this gets compiled down to some JS that bears little to no resemblance to original code.

And somehow people complain about how React is difficult. Wat?