Как я могу использовать ComponentName.js вместо index.js при импорте компонента React (из каталога структуры проектирования Atomic)

Question

Я использую Gatsby (React) для своего проекта. Я использую структуру папок Atomic design, например:

src/components/Organisms/Header

В этой папке мне нравится иметь:

src/components/Organisms/Header/header.js
src/components/Organisms/Header/header.module.scss

Как я могу импортировать header.js изнутри src/components/layout.js лайк:

import Header from '@components/Organisms/Header'

вместо:

import Header from '@components/Organisms/Header/header'

Обновить:

Мне удалось сделать это путем:

• добавив index.js подать в src/components/Organisms/Header/
• а также export { default } from './header'; в index.js

Но это лучшие практики?

Answer 1

У вас есть несколько вариантов здесь. Со всем этим вы бы импортировать src/components/Header,

1. Квартира без каталога компонентов (мои предпочтения):

src
└── components
    ├── Header.js
    └── header.module.css

Выгоды

• Менее бессмысленное вложение
• В вашем редакторе нет конфликтующих / запутанных имен файлов (например, индекса)
• Легко следить за импортом и экспортом

Недостатки

• Нигде нет одноразовых ресурсов и субкомпонентов

---

2. Смежный компонент и каталог ресурсов (в стиле Ruby):

src
└── components
    ├── Header
    │   ├── header.module.css
    │   └── logo.png
    └── Header.js

Выгоды

• Ресурсы и подкомпоненты хранятся вместе
• В вашем редакторе нет конфликтующих / запутанных имен файлов (например, индекса)
• Легко следить за импортом и экспортом

Недостатки

• Компонент не соседствует с ресурсами, поэтому для импорта требуется ./Header/ префикс
• В зависимости от сортировки каталог ресурсов может не отображаться в непосредственной близости от компонента.

---

3. С индексом каталога, который экспортирует Header:

src
└── components
    └── Header
        ├── Header.js
        ├── header.module.css
        ├── index.js
        └── logo.png

Выгоды

• Компонент и ресурсы хранятся вместе
• Сортировка не имеет значения

Недостатки

• Конфликтующие / запутанные имена файлов открываются в вашем редакторе (например, указатель)
• Неправильный импорт и экспорт может привести к ошибкам, которые трудно диагностировать
• Дополнительная работа для каждого компонента