What is the best way to organize the structure of React site components?

Question

JavaScript

Hello, I often get confused about how best to distribute the site structure into folders where there are many components. What is the best way to organize? There are, for example, the Main page, authorization page, registration page, page after authorization, footer, header. As long as there is App.jsx. Do you need to make a container the main one?

<Header/>
<Content/>
<Footer/>

How to distribute all this stuff into folders so that it is clear? How do you organize?

Answer 1

Here is a good description of the different approaches.

Answer 2

• layouts - whole pages: main, authorization, registration
  Inside for each page is a folder in which you can keep as much as you like components related only to this page - the header of this page, the menu of this page, the auxiliary garbage of this page, the footer of this page
  
• components - reusable components in different places - inputs, selectors, galleries, video player embeds, etc.
  You can also highlight here pieces of pages (headers, footers) used in several layouts
  Optionally, you can select a separate folder for App.jsx (you can move the styles folder there if you wish), or define it in layouts, as you like, here we subjectively rely on the inner feeling of feng shui