Controversies and Separation of Concerns

When React first emerged on the scene, it was very controversial (and for many people, it still is). The core point of concern for many developers was JSX, having what appeared to be HTML in the middle of JavaScript code.

For years, developers had been writing their HTML, CSS, and JavaScript in separate files. React violated that tradition. Some developers accused the library of violating the programming principle of Separation of Concerns (SoC)--the idea that code should be separated into files, each intended to do one thing. In this sense, they argued that you should have an HTML file, a CSS file, and a JavaScript file—no mingling of HTML and JavaScript.

What the React developers pointed out is that separating files based on type (HTML versus JavaScript) was a separation of technology, not a Separation of Concerns. The HTML and JavaScript were both concerned with rendering a functional UI—they belonged together.

React proposed that if you had a button, both the HTML structure of the button and what made it functional (what happened when it was clicked on) should live in the same file, since that was all the same concern.

Thus, the important thing to remember with React is the idea of Separation of Concerns—you can draw lines between your components based on what their purpose is.

The missing piece of all of this is, of course, CSS. Shouldn't it be in the same file as well? Many think so, but a mature solution to do so has yet to emerge. You can read more about CSS in JS at https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32.