Absolute path in React

Why we need Absolute path in the App?

Problems
Working on applications without spending much time on organising a folder structure is a common story of the most of the developer 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 time its nightmare when we change the folder structure after finishing or middle in the app.
It's painful to change the path for all the affected files relatively.

Solution
So here is the solution of Absolute path.

Absolute path help 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 setup 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