White Antarctica • The Software Design & Development Company



20 Oct 2022 5 min read

How to Use Absolute Imports in React for Better Readability


By Kaustubh Bhagwat

Junior Fullstack Developer

blog hero image

How to avoid relative nesting hell ('../../') in your React files

How to avoid relative nesting hell ('../../') in your React files

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:


Directory Structure<br>

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



1import Button from '../../common/Button';

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.

Solution: Using absolute imports

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



3   "compilerOptions":{
5       "baseUrl": "src"
7   }

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: 



1import Button from 'common/Button';

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!






25 High-Fives





By Kaustubh Bhagwat

Junior Fullstack Developer


Antarctica is a software concept, design and development company that builds easy to use applications and architects complex to build ecosystems. We do it for people who believe just like us that fighting climate change isn’t an option, it is our generation’s utmost duty.

So we made it simple: the things we do, the products we build, the services we render, must either protect our mothers or protect Mother Nature. Said otherwise, our mission is to either save lives or save Life, penguins included.

We are the good side of technology. We are Antarctica.

Enjoyed that? Read
more by Kaustubh Bhagwat

Liked what you read, we think you might also like the following blogs

You may also like!

Liked what you read? We think you might also like the following blogs.