React Pro Tip: Use Absolute Imports for Better Readability and Easy Refactoring by@aakashns

React Pro Tip: Use Absolute Imports for Better Readability and Easy Refactoring

Aakash N S HackerNoon profile picture

Aakash N S

..unless you love typing dots and slashes

If you’re working on a large single-page application, chances are you have a deeply nested folder hierarchy (depth > 2), thanks to which most of your

statements look like the image on the left. And that’s clearly not ideal, for several reasons, including:

  • It’s inconvenient to write (trial and error to figure out how far up you need to go with the dot-dot-slashes).
  • Having to type 
    over and over and over can get on your nerves and frustrate you. That’s not too good for your productivity (or temper).
  • It’s hard to read. All those dots and slashes simply add noise to the code. You can’t tell how many levels up you’re going with a quick glance.
  • It’s a really big pain to refactor. You might end up having to fix a dozen or so
    s in a whole bunch of files. Just the thought of having to fix all those dot-dot-slashes can convince you to give up the idea of refactoring entirely.

Fortunately, there’s a simple enough solution to avoid this: Use absolute imports!

If you’re using

, all you need to do is add a file called
in the project root with the following contents:


That’s it! Now you can write your

s like this:

import { provideUser } from "auth/wrappers";
import * as util from "shared/util";
import RadioButton from "shared/components/RadioButton";
import { setLoader } from "app/actions/LoaderActions";
import { OptionsContainer } from "shared/containers/";
import JobDescription from "../components/JobDescription";

Any time you need to go all the way up to

, you can skip the 
s and directly start with the folder name. You can still use relative imports where it makes sense (see the last import above).

If you’re using Visual Studio Code, and want code completion and other Intellisense goodies to work with absolute imports, just create a file called

with the following contents:

  "compilerOptions": {
    "baseUrl": "src"

That’s all there is to it. Now go ahead and get rid of those nasty 



Signup or Login to Join the Discussion


Related Stories