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

April 9th 2020 17,322 reads

React Pro Tip: Use Absolute Imports for Better Readability and Easy Refactoring. Use absolute imports for better readability and easy refactoring with nested folders. Absolute imports are hard to read, inconvenient to write and hard to tell how far up you need to go with the dot-dot-slashes. 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. You can still use relative imports where it makes sense (see the last import above)

@aakashns
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

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

../

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

@aakashnsAakash N S

Related Stories

@aakashns
Aakash N S