Suhail Kakar

Posted on Aug 16, 2021

Stop Using ../../../ While Importing Components, Instead Use This Method

#javascript #react #programming #tutorial

Introduction 📚

When you go to GitHub and see some other developers code, most of them are importing their components like this👇

import Button from "../../../components/Buttons/Button"

This is called relative import. Relative import will start with either ./,/ or ../.

I am not telling that this is the wrong way and even there is no issue if you import like that, but if you have a very big and complex project, relative imports will look a lot messy similar to this.

import Button from "../../../../../../components/Buttons/Button"

However, there is a very better and cleaner way to import these components. This method is called absolute import. An absolute import will look this like 👇

import Button from "components/Buttons/Button"

Adding absolute imports to React Apps (CRA) 💡

Open your project in any code editor and create a new file in your project's root directory named jsconfig.json. Once you created the file paste the below JSON inside of it.

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

This will instruct Webpack to use the src directory as a base one.

Conclusion ⌛

I hope you found this short article helpful. If you need any help please let me know in the comment section.

Let's connect on Twitter and LinkedIn

👋 Thanks for reading, See you next time

Top comments (11)

Vic Shóstak • Aug 17 '21 • Edited

Hello! Thanks for the article 👍

Also, I'm using this way in my project's tsconfig.json:

{
  "compilerOptions": {
    // ...
    "paths": {
      "__/*": ["./src/*"] // <-- it's alias to ./src folder
    },
    // ...
  },
  "include": ["./src"]
}

And next in project files:

// ...

import { Greetings } from '__/Pages/views'; // <-- acctually ./src/Pages/views.tsx
import '__/style.css'; // <-- acctually ./src/style.css

// ...

P.S. my full TS config file is here.

Omkar Kulkarni • Aug 17 '21

I prefer '@' instead of underscore...

Vic Shóstak • Aug 17 '21

As you wish!

I mean, you can also do handy placeholders for project folders this way.

For example, easily connect all of your Components:

"__/*": ["./src/Components/*"],

Or styles for each Component:

"__/style/*": ["./src/Components/*/styles/main.css"]

Nevermind what kind of start symbol do you choose... 🤷

unknown-shot • Aug 16 '21

nice post i like it, are u safe bro

Suhail Kakar • Aug 18 '21

Thanks,

Yep, Currently I am living in India :)

AK DevCraft • Aug 21 '23

Straight and concise post, great work! Barrel files are another cleaner way to import modules. One of the benefits comes into picture while code refactoring.