DEV Community

shrey vijayvargiya
shrey vijayvargiya

Posted on

4 steps to add absolute imports in reactjs

You really use absolute import to improve the code reading and writing.

Introduction
In today’s story, we will learn to import the modules from the absolute path. Instead of importing the packages, and components from the existing path, we will learn to import from the absolute path starting from the root directory.

Step 1
Install nextjs in your current react application, I am assuming you have nextjs repository if not go to this link to download your first nextjs repository.

Step 2
Create jsconfig.json file in the root directory, it’s easy once the project is created to add jsconfig.json file in the root directory.

Step 3
Add the baseUrl key with the root path as the value in the config file. Just add the below code in the config file.

{
 "compilerOptions": {
   "baseUrl": "."
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 4
Start importing the components using baseUrl as the starting point.

Conclusion
Until next time, have a good day.

Keep developing!!

Our website iHateReading || Youtube || Twitter

Top comments (0)