Mixing HTML and JS is also novel to me. I’ve always been taught to separate concerns, only to find myself browsing files all the time. Mixing JSX and JS the sane way makes me feel 20 years younger.
It’s kind of like webcomponents (separate concerns by component, not by language), I wish webcomponents had been part of one of the initial steps of HTML.
Separating concerns is still good. The idea that we can achieve that by writing HTML and JS code in separate files is mistaken, however.
1. The concept of HTML being for layout, CSS for design, and JS for interactivity has not been true ever since web apps became a thing, if it was ever true. It’s been a decade and a half at least since JS wasn’t integral to both layout and design. So separating HTML, JS and CSS into separate files does not actually “separate concerns” because the concerns overlap.
2) Placing in different files is not the only way to separate concerns. You can still separate concerns within your .jsx file. Encapsulate your JSX generation code into a separate function, set of functions, and you can achieve similar separation of concerns, while still keeping code that are intrinsically tied together highly co-located. If you really think that separating them into different files is critical, you can put these JSX generating functions into their own file that can then be imported into your main component file.
The fact that no library/codebase actually does this, indicates to me that separating HTML into a different file provides minimal to no benefit in a component based codebase.
It’s kind of like webcomponents (separate concerns by component, not by language), I wish webcomponents had been part of one of the initial steps of HTML.