The line React core team would say is that that what you're thinking of isnt "seperation of concerns" but rather "seperation of technologies".

React/JSX is good because both the HTML and JS together is the view. It's the same concern.

React seperates concerns much better because it so heavily promotes the functional programming approach and that the UI is a function of state.

So it may help to think of JSX as using a functional subset of Javascript. It's not, and that veil gets pierced pretty often, but the better you contain it, the more you can effectively use both Javascript and HTML together as part of a single concern.

Using Redux with sagas even further separates out the most side-effecty parts of it, though sagas are really heavyweight and I'm still not certain if I think they're worth it.

https://blog.isquaredsoftware.com/2020/02/blogged-answers-wh...

(You can still customize the middleware when using RTK to set up your store, same as always, so if you want to use sagas you still can.)

That said, there's a lot of things thunks _can't_ do, and for those use cases it makes sense to use sagas or observables.

You could tie CSS/JS event handlers to class and id attributes in the HTML file, but you'd have to add those attributes into the HTML file to target the right elements.

Web SoC always felt more SoF (Separation of Files) to me. There is no advantage in putting the HTML/CSS/JS into separate files if making routine changes requires visiting multiple files. React puts it all in one file, which makes me think that the concern is the Component and not the individual browser parsing libraries.

I am working on a open source payment gateway for crypto and one of the things that I am providing is a javascript library for those that want to provide a Stripe Checkout-like experience on their sites.

I started doing this in vue.js, which has the idea of the components where you define the html, code and style together in one single file.

My problem is, I want the user to be able to have the styling of the checkout widget similar to their own website. So I want to have my HTML as simple as possible and let them provide the CSS. I could even try to help and provide some different ready-made CSS (to be used directly) or SASS files (if they want to customize) but I've given up on trying to do that inside of vue component definitions.

However, aside from requiring a very specific tech stack, it doesn't solve the problem of every component potentially having slightly differing styles. There's ways to handle this, but one thing I like about Tailwind is that the defaults are stronger across components, while still leaving space to deal with all the one-offs.