..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: import 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. import 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: create-react-app .env NODE_PATH=src/ That’s it! Now you can write your s like this: import { provideUser } ; * util ; RadioButton ; { setLoader } ; { OptionsContainer } ; JobDescription ; import from "auth/wrappers" import as from "shared/util" import from "shared/components/RadioButton" import from "app/actions/LoaderActions" import from "shared/containers/" import 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). src/ ../ If you’re using Visual Studio Code, and want code completion and other goodies to work with absolute imports, just create a file called with the following contents: Intellisense jsconfig.json { : { : }
} "compilerOptions" "baseUrl" "src" That’s all there is to it. Now go ahead and get rid of those nasty s! ../

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

Too Long; Didn't Read

Company Mentioned

@aakashns

RELATED STORIES