JSX: {x.map((y) => ( <div key={y.id}> <h1>{y.title}</h1> </div> ))} Aside from the HTML-like syntax this is vanilla JS. And "y.tit

JSX: {x.map((y) => ( <div key={y.id}> <h1>{y.title}</h1> </div> ))} Aside from the HTML-like syntax this is vanilla JS. And "y.title" is already auto-sanitized so you don't have the XSS vulnerability as in your jQuery solution. Need to output trusted HTML? <h1 dangerouslySetInnerHTML={{__html: y.titleHtml}} /> Yes, that's intentionally verbose, making you aware that this is a potentially dangerous. But to paraphrase the old saying: make the safe things easy and the unsafe things possible. Angular and friends require context switching. Good luck if you're using non-standard data structures or need slightly more complex filter or iteration logic. And especially in Angular (1 more than 2) you also need to keep in mind the variable scope within the DOM tree and which variables, directives and components you can use where. With JSX it's just JavaScript and the scope is just your local JavaScript scope. Instead of having to remember all the idiosyncracies of the framework's own implementation of a for-loop[0] you just have to know JS. I'm not saying Angular is not for programmers. I'm saying the design goal of Angular1 was to make it easier for non-programmers to write views/templates. It's even in the name: as much fun as controllers, components, directives and two-way bindings may be, the raison d'etre of AngularJS resides between the angle brackets. [0]: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html https://angular.io/docs/ts/latest/api/common/index/NgFor-dir...