DEV Community

Cover image for How to use index.js file(Properly)
B.M. Fahad-ul-Amin
B.M. Fahad-ul-Amin

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

demo/index.js

export const num = 100;
Enter fullscreen mode Exit fullscreen mode

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

import num from './demo';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

demo.js

export const num = 100;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

demo/index.js

import React from 'react';

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

export default SomeComponent;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

demo/Demo.jsx

import React from 'react';

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

export default SomeComponent;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

demo/file1.js

export const str1 = 'file1';
Enter fullscreen mode Exit fullscreen mode

demo/file2.js

export const str2 = 'file2';
Enter fullscreen mode Exit fullscreen mode

demo/file3.js

export const str3 = 'file3';
Enter fullscreen mode Exit fullscreen mode

demo/Demo.js

import React from 'react';

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

export default SomeComponent;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

you can also do default export like this

export default str = 'inexFileName';
Enter fullscreen mode Exit fullscreen mode

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

import str, { str1, str2, customExport, NormalExport } from './demo';
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
elias_soykat profile image
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.