Configure absolute paths in react

Today I want to share a way to import components into our project in React.js with absolute paths, if you don’t know what an absolute path is, let me show you how we usually import components into a React file.

We usually use relative paths using ../../ as shown below.

Doing it this way sometimes generates confusion, or if we want to move a component, it is most likely that we will get errors that some module is not found, since the path has changed.

So using absolute paths is basically doing imports like this:

As you can see, the path from which we are importing a component is much better understood, in addition to the fact that if we change that component in place we will not have errors as the path is explicitly detailed.

To be able to work in this way, just create a .jsconfig file at the src folder level of our project, or .tsconfig if we are working with Typescript.