Поддерживайте чистую и удобную для навигации структуру компонентов React, используя папки и не полагаясь на файлы index.js !

Я уверен, что в Интернете существует довольно много мнений по этой теме, и я не собираюсь утверждать, что это лучший способ. Я просто хочу поделиться тем, что у меня работает! Я структурировал свои компоненты таким образом уже некоторое время и обнаружил, что это значительно повысило мою продуктивность (я знаю, где все находится) и снизило мою тревогу из-за беспорядка (я из тех людей, которые испытывают беспокойство, когда вещи захламлены, даже дома 😐).

Вы можете привыкнуть к следующему шаблону структурирования ваших компонентов:

Где операторы импорта будут импортировать нижний колонтитул из «./Footer» или импортировать заголовок из «./Header. И, честно говоря, в небольшом приложении это, вероятно, отлично работает.

Но как насчет того, есть ли у вас файлы css для стилизации или тестовые файлы? Довольно скоро они могут выйти из-под контроля:

Итак, вы можете подумать: "ну, это просто, просто поместите им папку, которая позаботится о вздутии".

И вы точно можете это сделать. Но если вы хотите сохранить короткий импорт (а не громоздкий импорт нижнего колонтитула из './Footer/Footer'), вам придется использовать файлы index.js внутри названные папки.

Если у вас много компонентов, то очень скоро вы потеряетесь в море файлов index.js в своем редакторе, что совсем не весело:

Итак, я здесь, чтобы показать вам несколько другой способ достижения той же структуры папок (для поддержки короткого импорта), И чтобы вы не полагались на файлы index.js для размещения кода вашего компонента.

Вот:

Поначалу это может показаться немного странным, но я действительно оценил эту структуру.

Когда код компонента находится в именованном файле (вместо index.js), открытие нескольких файлов в редакторе больше не вызывает затруднений, поскольку файлы имеют правильные имена. И, конечно же, наличие структуры папок означает, что мы можем держать связанные файлы (тесты, файлы css и т. Д.) В тесной связи с их соответствующими компонентами.

Подводя итог, с этой структурой мы получаем:

  • Краткие и понятные операторы импорта
  • Все преимущества папок (тесно связанные файлы)
  • Именованные файлы для кода компонента (без использования index.js в редакторе)

Приятно