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

April 9th 2020 11,730 reads

@aakashnsAakash N S

..unless you love typing dots and slashes

reactions

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:

reactions

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!

reactions

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:

reactions

NODE_PATH=src/

That’s it! Now you can write your

import

s like this:

reactions

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

reactions

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:

reactions

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

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

../

reactions

Before you go, check out these stories!

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

@aakashnsAakash N S

Tags

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

@aakashnsAakash N S

Related

Download the 2020 State of API Report to Improve your API Strategy!

Training an Image Classifier From Scratch in 15 Minutes

@aakashnsAakash N S

Enhancing React Native Applications with MOXY Boilerplate

@moxystudioMOXY

Tags