Member-only story
React is without a doubt one of the most popular front-end JavaScript frameworks / UI libraries around. However, it doesn’t mean that it’s the best or that everyone likes it.
Among some of the more technical reasons behind people disliking React is, surprisingly, one of its biggest features as well — JSX. An extension to standard JavaScript that allows you to use HTML-like syntax in your React components.
How such a recognizable part of React, one that clearly stands to improve readability, and ease-of-writing one’s code can be turned into a con? Well, it all comes down to the separation of concerns.
Separation of concerns
Before we dive in, I’d like to explain exactly what separation of concerns is, not to leave out any nuances.
So, separation of concerns means having clear lines between different concepts/pieces of something. In programming, JSX is a clear example of ignoring this rule. No longer do we have a “template” describing component structure in a separate HTML file and its logic in a JS one, but both (or more if you’re using CSS-in-JS) are mixed together to form what some consider perfect harmony, and others — uncontrolled chaos.
