In this article, let me show you how to use absolute imports to avoid relative nesting hell ('../../') in your React files.

Usually when writing JS code, we tend to use the relative import method. This can create code that is difficult to read and maintain.

Let me show you an example: I’ve created a React app using create-react-app to demonstrate.

Look at the file directory structure below:

The two relevant files we need to look at are:

• Button.js - A custom Button component 

(src > common > Button.js as per above screenshot)

• Home/index.js 

In the screenshot above, look at line 2 in index.js

This method of importing files is called ‘Relative imports’ and it is the default way you can import files. But, there are certain drawbacks to this:

• The import code needs to be re-written in every file if the custom component (Button.js) is used in those files..

• The code does not look clean.

• The code is not easily maintainable.

• If the component is nested deep inside the directory tree, we can get trapped in ‘../../../../’ hell, which is unpleasant to code.

To use absolute imports, we need to create a new file in the root directory called jsconfig.json 

The purpose of writing this is to specify a base directory for absolute imports. Here, the src directory is chosen as the base directory. If we look back at our directory structure, the src folder contains all our code.

.

└── src

    ├── common

    │   └── Button.js

    └── components

        └── Home

            └── index.js

Using this, now we can write absolute import statements like: 

This greatly simplifies the code and makes it easy to read.

Note: Relative imports still work in your code. So if you want to import a sibling component and do not want to start from inside the src directory and specify the file, you can still use relative imports.

Thank you for reading. Hope you found it useful!