How to use index.js file(Properly)

Index.js file is just like index.html file, if no specification is provided a directory points to it's index file. Index files are equivalent doesn't matter if it's javascript or typescript.
For convenience we'll use index.js as example in this article.
that means if you have a directory

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

if you point to demo directory , it'll point to demo/index.js

Seems pretty neat,
if used propery it can help to keep codebase clean,
but if used carelessly everywhere it will hamper both readability and accessibility .

"Too much of a good thing can be a bad thing,"
- William Dudley

These are some common bad implementation of index.js files and their solutions,

• #### If your directory has only index file

 ┣ 📂demo  
 ┃ ┗ 📜index.js  
 ┣ 📂demo1  
 ┃ ┗ 📜index.js  
 ┣ 📂demo2  
 ┃ ┗ 📜index.js  
 ┗ 📂demo3  
 ┃ ┗ 📜index.js

demo/index.js

export const num = 100;

You want to access content of index.js file by pointing to the demo directory, that will work.

import num from './demo';

this is the worst implementation of index.js files.
What is the issue with it?

1. Multiple same name files
2. by looking at the name of index.js file it's difficult to say what index.js file does what
3. can not access file directly, because demo is a directory and demo/index.js and demo points to the same destination, one may search demo file throughout the project and it won't show up because the logic is in demo/index.js file

If a folder contains only one file, then no need to use a directory, use the file alone.
The solution in this case is.

 ┣ 📜demo.js  
 ┣ 📜demo1.js  
 ┣ 📜demo2.js  
 ┗ 📜demo3.js

demo.js

export const num = 100;

the above import will still work and now you can directly search the files.

• #### writing component in a index file is another bad usecase,

📦demo  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo/index.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

now as the component is a default export , I can import the component by any name, in this component I'll import it as Demo.

Now, I can import the component like this.

import Demo from './demo';

The Demo component is a valid componet, but If I search for the Demo Component in my Project I won't find any, if I search for demo file won't find any Demo file as well.

this can be solved by using the index.js file only to export.
Eg:

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo/Demo.jsx

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

PS: This is given for example purpose only, keep the file name and component name same to avoid confusion.

now the above import will still work

import Demo from './demo';

In this case search by Component name will still won't work, but We can search by the fileName at least.

you can do both export and default exports using index.js files.

📦demo  
 ┣ 📜Demo.jsx  
 ┣ 📜file1.js  
 ┣ 📜file2.js  
 ┣ 📜file3.js  
 ┗ 📜index.js

demo/file1.js

export const str1 = 'file1';

demo/file2.js

export const str2 = 'file2';

demo/file3.js

export const str3 = 'file3';

demo/Demo.js

import React from 'react';

const SomeComponent = () => {
  return <div>some Component</div>;
};

export default SomeComponent;

finally the index.js file

index.js

export { str1 } from './file1';
export { str2 } from './file2';
export { str3 as customExport } from './file3';
export { default } from './Demo';

first three examples are doing exports
third one is aliasing an export while exporting
fourth one exporting default export as Demo component and it's also defult for this index.js file

you can also export default exports of other files as normal files like this

export { default as NormalExport } from './Demo';

you can also do default export like this

export default str = 'inexFileName';

now we can import all these exports from './demo' location

import str, { str1, str2, customExport, NormalExport } from './demo';

Comments

[Elias Soykat]

Great article vai..

I use one index.js file inside a folder structure.

It's really helpful when import multiple file/function inside a file.

Vai please accept my LinkedIn connection request.