Absolute path in React

Absolute path in React

Why do we need an Absolute path in the App?

Problems

Working on applications without spending much time on organizing a folder structure is a common story of most developers as it requires granular details and sometimes we don’t create folder structure perfectly because of the early stage of the app.
And most of the time it's nightmare when we change the folder structure after finishing or middle in of the app.
It’s painful to change the path for all the affected files relatively.

Solution

So here is the solution to the Absolute path.

Absolute path helps us to not care about the folder structure changes even in the middle of development or frequent folder structure changes as it can access files from the root folder (as per the configuration)

Relative path vs Absolute path

Relative path : ../../SubFolder/File
Absolute path: components/Folder/SubFolder/File

How to set up it in React?

Go to the root folder and create a file jsconfig.json for JS based react app.
and put the configuration into the file

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Try to restart the server and now you can access your files by the full path

components/Folder/SubFolder/File

tsconfig.json (already created in the TypeScript template) at the root of your project.