2

I am using Gatsby (React) for my project. I am using Atomic design folder structure e.g:

src/components/Organisms/Header

In this folder I like to have:

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

How can I import header.js from within src/components/layout.js like:

import Header from '@components/Organisms/Header'

instead of:

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

Update:

I managed to do it by:

  • adding an index.js file to src/components/Organisms/Header/
  • and export { default } from './header'; in index.js

But are this best practices?

meez
  • 3,783
  • 5
  • 37
  • 91
  • 3
    In order to do this, you could create an `index.js` file which exports your `header` module as default. – vjarysta May 27 '19 at 09:02
  • @vjarysta Ok but how exactly? Are this best practices or **1** do I have to stick with naming them `index.js` or **2** when importing the components use `import Header from '@components/Organisms/Header/header'` – meez May 27 '19 at 09:21
  • If you only have the `header` module to export, you should rename it to `index.js` directly. If you have move than one module, you could use named exports, to avoid code repetition like `import Header from '@components/Organisms/Header/header'`; then you could `import { Header } from '@components/Organisms/Header'`. – vjarysta May 27 '19 at 15:13
  • if you're married to this folder structure, check out [directory named plugin for webpack](https://github.com/shaketbaby/directory-named-webpack-plugin). It'll resolve `/components/foo` to `/component/foo/foo.js` – Derek Nguyen May 31 '19 at 04:34

1 Answers1

2

You have a few options here. With all of these you would import src/components/Header.

1. Flat with no component directory (my preference):

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

Benefits

  • Less meaningless nesting
  • No conflicting/confusing filenames open in your editor (e.g. index)
  • Easy to follow the imports and exports

Drawbacks

  • Nowhere for one-off resources and sub-components to go

2. Adjacent component and resources-directory (Ruby-style):

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

Benefits

  • Resources and sub-components are kept together
  • No conflicting/confusing filenames open in your editor (e.g. index)
  • Easy to follow the imports and exports

Drawbacks

  • The component isn't adjacent to resources, so imports require a ./Header/ prefix
  • Depending on the sorting, the resources directory may not be listed immediately adjacent to the component

3. With a directory index that exports Header:

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

Benefits

  • Component and resources are kept together
  • Sorting doesn't matter

Drawbacks

  • Conflicting/confusing filenames open in your editor (e.g. index)
  • Confusing imports and exports, may cause hard-to-diagnose errors
  • Extra work for every component
coreyward
  • 77,547
  • 20
  • 137
  • 166