DEV Community

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

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

Suhail Kakar on August 16, 2021

Introduction 📚 When you go to GitHub and see some other developers code, most of them are importing their components like this👇 impor...
Read full post
Collapse
 
koddr profile image
Vic Shóstak • • 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"]
}
Enter fullscreen mode Exit fullscreen mode

And next in project files:

// ...

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

// ...
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
omkar_k45 profile image
Omkar Kulkarni •

I prefer '@' instead of underscore...

Collapse
 
koddr profile image
Vic Shóstak •

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/*"],
Enter fullscreen mode Exit fullscreen mode

Or styles for each Component:

"__/style/*": ["./src/Components/*/styles/main.css"]
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
unknownshot profile image
unknown-shot •

nice post i like it, are u safe bro

Collapse
 
suhailkakar profile image
Suhail Kakar •

Thanks,

Yep, Currently I am living in India :)

Collapse
 
akdevcraft profile image
AK DevCraft •

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.

Collapse
 
lukeecart profile image
Luke Cartwright •

This is great! Thanks for sharing your knowledge

Collapse
 
suhailkakar profile image
Suhail Kakar •

Glad you liked it Luke

Collapse
 
sanjarcode profile image
Sanjar Afaq •

Nice, good and to the point👍️.

Collapse
 
suhailkakar profile image
Suhail Kakar •

Thank you Sanjar :)

Collapse
 
bharathkv90 profile image
bharathkv90 •

I don’t think relative import will start with a /