Search code examples
reactjsstyled-components

Styled-Component Project Structure and multiple index.js files

I see alot of projects using the following structure. 

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js

What is the use or benefit of those index.js files inside every Folder?

Solution

  • generally in this context the index file will be used to export stuff from all the other files

    like this:

    export * from './Logo'
export * from './Title'
export * from './Subtitle'

    that way you can import { Logo, Title, SubTitle } from '/App/Header

    instead of having to individually import them all from their separate file paths or include the extension on the end like so: import { Logo } from '/App/Header/Logo.js