This is continuing to shape up to be another one of those preference debates.
I prefer the Angular approach, as its end goal is to simply make web markup what it should be: Interactive. The downside being that you're forced into Angular's opinions for better or worse.
I don't prefer the more "tangled" approach of React. I call it tangled as it's mixing two flavors in one "view", whether you like it or not: JS and HTML. Many people like the approach, and I can see why they do. I don't.
Those are preferences. So much more goes into making an app efficient, testable and expandable. The biggest ingredient is comfort. If you and your dev team are comfortable with React, that's going to be your best option. It's not the wrong option, it's a great option. For me, it's Angular.
However, I feel compelled to say that the debate should be Angular 2 v React. Having used others (... Ember....) it just doesn't make much sense to use anything outside these main 2 contenders unless you're using some of the new "cool" web components based stuff. Angular is solid. React is solid. Compare, contrast and make your decision based on how comfortable you feel with the getting started docs.
You're really missing the point here. The fact that HTML can go in the same file as JS is a tiny and trivial detail. If you don't like it, just put your JSX in a separate file and import it.
How often do we list static data in lists anymore? Honest question. It feels like most websites you view anymore are displaying data fed from somewhere that isn't known when you write the markup. As you write markup some is meant to repeat data (lists of posts, reports, etc.). Since this seems to be (to me) happening more than not, markup needs at least some kind of update to accommodate the fact that when writing it, we don't typically write out static markup anymore, though the end result obviously is.
Therefore, Angular, to me, acts like that "dynamic markup" when writing it. It feel more natural to me at this point.
I've used Angular, React, and Handlebars (Ember's templating engine), and I can tell you, they are all the same in "tangling." They all solve this problem by emphasizing that the view portion of the code (Angular's pseudo-HTML, React's JSX, and Handlebar's limited helpers) should be used strictly for view-related logic, not domain/business logic. So there really isn't any difference between the libraries in that respect, except for personal taste.
Just a pedantic touchup, ember does not use Handlebars (it once, several years ago did) Now it uses something (Glimmer) which shares some syntactic similarities, but usage/implementation have diverged.
> Doesn't Angular mix HTML and JS too, except in the HTML file?
Angular2 doesn't. Like React it uses a HTML-like templating syntax to generate views. Nothing is mixed in Angular2, everything is defined in JS and rendered as HTML.
I prefer the Angular approach, as its end goal is to simply make web markup what it should be: Interactive. The downside being that you're forced into Angular's opinions for better or worse.
I don't prefer the more "tangled" approach of React. I call it tangled as it's mixing two flavors in one "view", whether you like it or not: JS and HTML. Many people like the approach, and I can see why they do. I don't.
Those are preferences. So much more goes into making an app efficient, testable and expandable. The biggest ingredient is comfort. If you and your dev team are comfortable with React, that's going to be your best option. It's not the wrong option, it's a great option. For me, it's Angular.
However, I feel compelled to say that the debate should be Angular 2 v React. Having used others (... Ember....) it just doesn't make much sense to use anything outside these main 2 contenders unless you're using some of the new "cool" web components based stuff. Angular is solid. React is solid. Compare, contrast and make your decision based on how comfortable you feel with the getting started docs.