Trying to understand the paradigm of React

Question

I'm writing an article for my Uni about React and trying to understand what it's all about.

On there website the section Thinking in React, they point out that the UI should be broken up in small Components. One way of doing this is to use the technique of single responsibility principle.

Is this paradigm also the reason why HTML (JSX), CSS (inline styling) and JavaScript should be put in one file?

Answer 1

In a way including the HTML (JSX), CSS and JS in the same file is more about separation of concerns than single responsibility. The React component's concern is to render a small subset of information to the screen and the HTML (JSX), CSS and JS are all needed to do that, so therefore they are part of that concern.

Other schools of thought would consider those elements as different concerns, so this is very much an issue of how you interpret the pattern, rather than something with a definitive correct answer.

Pete Hunt talked specifically about Seperation of Concerns with React at JSConf EU in 2013, you can see a video of that here and read the slide deck from that presentation here . In addition to separation of concerns, that presentation also discusses how putting all the elements of a component in the same file can be said to increase cohesion and encourage loose coupling.

The practical upshot of including the HTML (JSX), CSS and JS in the same file is that you only need to look at one file to fully understand the behaviour of the component. That makes it easier to fully understand the component and aids reusability, especially by third-parties.

Facebook's Christopher Chedeau spoke about why they recommend putting CSS in with your React component at NationJS 2014. This is a video that talk and this is the slide deck.