title: ReactJS Folder structures
body: <p>I'm battling to understand a component based folder structure with React applications. As I am learning, there's a multitude of different opinions, and the one that seems most natural to me, is grouping code by component. I may have misunderstood this though.</p>
  
  <p>On my app, I have a shared header and footer, navbar and then pages which I group into my components. My login page, my register page, my landing (home) page. (I have 'about' and 'contact us' as well.</p>
  
  <p>But this structure seems strange. I don't think I'm doing it right. Where should common items go (navbar, footer etc).</p>
  
  <p><a href="https://i.stack.imgur.com/1r5dc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1r5dc.jpg" alt="enter image description here"></a></p>
  
  <p>My paths are getting quite long as well.</p>
  
  <pre><code>import fetchData from '../../helpers/fetchData.js';
  </code></pre>
  
  <p>Any advice or pointers would be great.How should I be structuring my folders? As this is due to become a large app with around 20 screens, this could get messy.</p>