Does React really violate Separation of Concern by putting HTML and JS in a single file?

View other answers to this thread
Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

Thomas Roch's photo

I think there are already long answers. I'll keep mine short.

React does not put HTML and JS in a single file. There is no HTML in React, JSX is no HTML, it makes look like HTML (virtual) DOM elements creation. HTML is a markup language to represent a DOM (or portions of). React components output (virtual) DOM elements, and don't need HTML.

The way React and friends work is dictated by functional programming. Data is transformed by JavaScript to DOM elements, there is no HTML. I wrote an article about this: http://blog.reactandbethankful.com/posts/2015/09/15/understanding-the-functional-revolution/

You can fail to have separation of concern in React, by putting together (without structure) logic for: getting data, keeping hold of it, updating it, representing it.

React ecosystem came with Flux and Redux. You can also look at Elm's Model-Update-View pattern, Cycle's Model-View-Intent pattern, the State-Action-Model pattern (SAM).