bydev / notes

React Absolute Imports

We often import files using paths like ../../../Components/Button/button, but managing all those ../ parts can be confusing—especially when moving files, as it may break imports.

With absolute imports, we can simply write Components/Button/button. This removes the need for ../ and makes imports cleaner and easier to manage, since they are always based on the project root.

For JavaScript projects, add a jsconfig.json file to the root of your project with the following configuration:

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

for Typescript, use your existing tsconfig.json

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