Как лучше организовать структуру компонентов сайта React?

Question

[jspie]

Здравствуйте, вот часто путаюсь как лучше распределить по папкам структуру сайта где имеются множество компонентов. Как лучше организовать? Есть к примеру Главная страница, стр авторизации, регистрации, стр после авторизации, подвал, заголовок. Пока есть App.jsx. Нужно сделать типо контейнер главный?

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

Как распределить по папкам все это добро чтоб было понятно? Как вы организовываете?

Answer 1

[Alexander Leonchik]

Вот тут хорошо описаны различные варианты подходов

Answer 2

[Anubis]

• layouts - целиковые страницы: главная, авторизация, регистрация
  Внутри для каждой страницы папка, в которой можно держать сколь угодно относящихся только к этой странице компонентов - шапка этой страницы, меню этой страницы, вспомогательная фигня этой страницы, подвал этой страницы
  
• components - повторно используемые в разных местах компоненты - инпуты, селекторы, галереи, эмбед видеоплеера и т.д.
  Также можно выделять сюда куски страниц (шапки, подвалы), используемые в нескольких layouts
  
• styles - общеиспользуемые стили (здесь можно задать некий index с подключением к нему reset/normalize, шрифтов, эмоджи и т.д., а затем подключать его к App.jsx)
  

Опционально можно выделить отдельную папку для App.jsx (при желании папку styles можно перенести туда же), либо определить его в layouts, как больше нравится, тут субъективно опираемся на внутреннее чувство фэн-шуя