title: ReactJS - How should one separate the functionalities of components with the goal of maintaining 'separation of concerns'?
body: <p>I've been coding in ReactJS for the last month. I've been reading a lot about MVC, MVVM, MVW etc. front-end architectural design patterns and this knowledge has confused me, to say the least, with what I know about React.</p>
  
  <p>Up until now, my understanding was to separate components based on UI features. So given one UI feature, that component will be responsible for 1) getting the data from the backend, 2) performing any business logic to that data before, and 3) the presentation logic. To me, this sounds like one component is doing far too much and should be split. </p>
  
  <p>For example, if I have a component that shows all the users in my database, this component will make the AJAX call to get this information, perform any business logic to the data, then render it as necessary in a nice pretty list (using JSX and CSS).</p>
  
  <p>I can't find anything on the docs with regards to separation of concerns, so my question is, how should I go about dividing all of this logic? Is there an accepted practice?</p>