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.
If you have opted for the .jsconfig file, add the following basic configuration to this file:
if you are working with Typescript then use the following basic configuration:
And that’s it.
I hope this little reading has been helpful to you. See you soon.
