4 steps to add absolute imports in reactjs

shrey vijayvargiya - Jul 18 '22 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player