Easiest way to shorten the path to files in React.js

Hello dear reader, today I want to tell you how to simplify and beatify file paths in your project. I am currently working on a large project and our codebase has become very large, and we have a lot of React components, Redux files etc. Which are located in different folders. Because of this, we faced the problem of long file paths.

In this image, you see that we use 6 backward step operations

I found about 4 solutions to this problem, all of them are implemented in different ways, but now I’ll tell you about the fastest and at the same time very useful option.

Open your jsconfig.json or tsconfig.json(if you use TypeScript) file and add to “compilerOptions” a “baseUrl” key with value “src”:

In “baseUrl” we indicate the root folder of our files

And now you can see the difference:

BEFORE

AFTER

Now our code looks much better 👌, we don’t need to add a lot of backward step operations to import the file we need. And the principle of operation is very simple, with the help of “baseUrl”, we set the absolute path of our project (“src”), so now we can refer to through our custom absolute path of our project.

So it's only the easiest way to shortening the path, if you need more functionality, read these articles about other solutions:

• Using Webpack
• Using craco