I agree that when you first get into React, it feels wrong, and almost...dirty. We've been teaching people since the early 2000's about "separation of concerns" only to feel like you're throwing that all away.

However, as I eventually realized, you aren't throwing that away. The markup and logic are still mostly separate. Most of the work happens outside the render function, and the logic that does happen inside of it is another script you'd have to write elsewhere.

Additionally, bear in mind that you aren't inserting HTML. You're manipulating the DOM directly. Those are 2 very different paradigms, even if it doesn't seem like it on the surface.

There is no problem with it. If you feel that you're writing too much HTML in a single file, consider splitting that bigger file into multiple smaller components. You can also consider the fact that you might be able to re-use some of these smaller components in some other components as well.

Generally, the best way to do this would be to create a folder called ComponentA. Consider splitting the big index.js file inside it into multiple smaller components like dropdown.js, input.js, etc. You can put all these components inside the same folder (ComponentA) or you can put these smaller components in a separate folder so that you can re-use them in some other components.

The other option through while you can reduce the amount of HTML that you're writing in a single file is by using some css frameworks ported for use with ReactJS (react-bootstrap, react-semantic-ui, ant-design, etc). In these type of frameworks, you re-use the components provided by them and just pass props to them. As a result, the amount of HTML in your files should reduce a lot.

Hope this helps!

If you feel there's too much HTML, consider breaking your React component in smaller components.

I think that if you're using React.js and JSX, you will really have to put DOM elements (Not HTML, HTML is a markup language similarly like how JSX works) with your JSX files. It is the intended use of it, but I suggest that you should have segregated JSX files for every component in your web app. For reusability and for a "cleaner" approach.

No, not as far as I know.

Although it's no HTML. It's JSX (which is 95% HTML compatible syntax) which gets transformed to JavaScript.

And it's likely cleaner to have one file per component compared to a folder per component consisting all the different technologies/files but that's in the end a personal preference.

I think that was the intended paradigm to begin with; to stop having a HTML document encapsulate CSS and JS, but rather have HTML (JSX to be precise) and CSS encapsulated inside JS to have more dynamic control over both. 😄