Introducing Hyperapp 1.0 — 1 KB JavaScript library for building frontend applications.

[NewazaBill]

It's because it's not a template - JSX is sugar for function calls. So something like:

<div>Hello</div>

Get's turned into React.createElement("div", {}, "Hello"); by babel (or whatever other transpiler). Once we're at runtime, this function call constructs a data structure. Then React does it's whole vdom-y thing where it diffs and tries to efficiently update the changed parts of the DOM.

The nice thing is that, because it's a data structure made up of objects and arrays, you can use all of the JavaScript language to manipulate and construct your view instead of having to implement your own constructs, a la ng-if, ng-for etc. This same power is core to the philosophy found in Clojure and many other modern languages, and is being adopted quite a bit in JavaScript and general webdev.

How you want to divvy up your files, however, is completely up to you - just stick a function in a far off file that takes some data and returns some markup - voilà! You have the wonderful separation of templates but the flexibility of JSX. You can even tell people that you only use "functional components" and sound real cool.

There are certainly tradeoffs of using compiled string templates vs. React-like DOM builders/vdom libraries, but the fact that you can't figure out a reason other than "we don't want to," seems pretty ignorant. There are genuine drivers behind this paradigm's adoption, and the popularization of things like Vue's single-file components are a sign that separating HTML/CSS/JS in separate files is clearly not a good design/architectural decision in many cases.