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

..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

import

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
```
import
```
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

create-react-app

, all you need to do is add a file called

.env

in the project root with the following contents:

NODE_PATH=src/

That’s it! Now you can write your

import

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

src/

, 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

jsconfig.json

with the following contents:

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

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

../