![]() ![]() Now, files that are in the folder or a sub-folder themselves are allowed to import stuff, you just shouldn’t cross the boundary, so to speak. If a folder has an index file, I consider that a guard rail which should prevent me from importing anything from sub-folders. The win over importing the components from their respective sub-directories is small but might be to your preference. This makes shared-components work like a sort of package that you can import the components from. The index file re-exports the component in TopBar.js: // index.js export from './Chevron' In this case, the TopBar folder contains the implementation for a top bar component, including a few sub-components. ![]() For example, consider the following folder structure: src └── TopBar ├── index.js ├── TopBar.js ├── DropDown.js └── SearchBox.js This is useful when you want to hide the implementation details of a module and expose only a single interface. It may also contain a number of names exports for related, “secondary” items. If an index file is used for encapsulation, it should contain a default export for the primary entity (class, component, function, etc.) in he folder. The corollary of this is that index files act as guard rails for imports - I avoid importing something from a subfolder of a folder containing an index file. Basically, index files serve one of two purposes: as encapsulation or as a namespace. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |