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

Andre Lewis's photo

In simple apps this might not seem like a big deal, especially when starting out.
You are for all intents and purposes very close to writing client side PHP. Or Perl, both of which allow you to mix and mingle.

As your projects get bigger, you hopefully are using modules and life is still pretty perky. But at some point the person who has to deal with the html fragment will need to be someone proficient only with HTML, and they won't know what they are looking at. Or worse, you will find out that you now own a very crazy mixture of HTML and CSS written by someone who went a little off the deep end mingling.

Or even worse, now you have logic for rendering everywhere and it's a year later and you don't know how a particular fragment got generated since you assemble fragments by hand in the javascript in the html fragment, and well.

I mean seriously, how hard was it to separate out that JS in the first place? Not very. How much of your representation could have just been html fragments by themselves and easy for a designer to use? Not very. My personal ethos on the subject is remove as much of the code as possible, or use something like Mustache to control flow, and make it very simple for a designer to be a designer, rather than require them to be proficient in Javascript as well. That being said I think @EisenbergEffect explained the situation very well.