Trying To Understand The Paradigm Of React
I'm writing an article for my Uni about React and trying to understand what it's all about.
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.
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?