That's exactly what I thought when I started using it.
But as I've got more used to it, I'm not sure it's really an issue, or at least doesn't have to be.
Firstly, JSX isn't really HTML. It's a bit of syntactic sugar around JavaScript "createElement" functions. If you don't want to have something that looks similar to HTML in your JS, you don't have to.
Secondly, if you want dynamically generated HTML, you're going to need some form of logic embedded in there somewhere (loops, conditionals etc). Most template languages end up with their own directives, like Angular 2's "ngFor". The React answer is to use standard JavaScript for that control.
And if you then want to separate out the non-display logic, you can use a combination of "smart" (pure JS logic) and "dumb" (JS/JSX display) components, and treat the JSX files as templates. "Separation of concerns" in this context isn't about not mixing code and markup, it's about not mixing business and display logic, and there's nothing in React that stops you doing that.
But as I've got more used to it, I'm not sure it's really an issue, or at least doesn't have to be.
Firstly, JSX isn't really HTML. It's a bit of syntactic sugar around JavaScript "createElement" functions. If you don't want to have something that looks similar to HTML in your JS, you don't have to.
Secondly, if you want dynamically generated HTML, you're going to need some form of logic embedded in there somewhere (loops, conditionals etc). Most template languages end up with their own directives, like Angular 2's "ngFor". The React answer is to use standard JavaScript for that control.
And if you then want to separate out the non-display logic, you can use a combination of "smart" (pure JS logic) and "dumb" (JS/JSX display) components, and treat the JSX files as templates. "Separation of concerns" in this context isn't about not mixing code and markup, it's about not mixing business and display logic, and there's nothing in React that stops you doing that.