Структура React-приложения Ч2.

В предыдущей части мы выяснили, что типичным подходом к построению реакт приложения является следующий

1. Один компонент - один файл
2. Все компоненты помещаем в папку components
3. Хорошие компоненты - независимые компоненты

В теме про css сказали, что кроме js файлов в папку  components  помещаем css файлы, что название js и css файлов повторяет название компонентов, только с соответствующим расширением.

Но дело в том, что ещё нужно куда-то добавить юнит-тесты, затем какие-то ресурсы, те же иконки. Поэтому в итоге мы приходим к тому, что для каждого компонента нужно создать свою собственную папку. Во всяком случае на больших проектах это устроено именно так.

Разумеется, при этом изменяется путь к файлам, который мы прописываем в импорте
Если раньше мы писали

import AppHeader from './components/AppHeader';

То сейчас это будет выглядеть как

import AppHeader from './components/AppHeader/AppHeader';

С целью сокращения пути к папке предлагается внутри каждой папки создать ещё дополнительный index.js файл, который содержит всего две строки

import AppHeader from './AppHeader';
export default AppHeader;

Благодаря этому путь к папке снова будет выглядеть как

import AppHeader from './components/AppHeader';