DEV Community

Discussion on: Avoid relative path import hell in react

Collapse
 
loucyx profile image
Lou Cyx

Not really. If you use a descent editor like VSCode, your imports are updated automatically when you move files. Not to mention that you're just mentioning another issue of having complex directory structures. As I said before, the first step should be to simplify the directory structure. This is not Angular, so we don't need 1000 nesting folders for things to work. Something simple like maybe this...

your-webapp/
├─ public/
│  ├─ favicon.ico
│  ├─ index.html
├─ src/
   ├─ components/
   │  ├─ ComponentA/
   │  │  ├─ ComponentA.jsx
   │  │  ├─ ComponentA.test.jsx
   │  │  ├─ ComponentA.module.css
   │  ├─ ComponentB/
   │     ├─ ComponentB.jsx
   │     ├─ ComponentB.test.jsx
   │     ├─ ComponentB.module.css
   ├─ utils/
   ├─ hooks/
   ├─ App.jsx
Enter fullscreen mode Exit fullscreen mode

... should be more than enough. Anything more complex than that is over engineering. In one of your screenshots I see a pattern that you should avoid, which is component folders inside component folders. You should try to keep a flatter structure, by having all components at the same level like the example above. That will reduce duplication, and will force you to code components that are more reusable and less "domain specific".

Thread Thread
 
smitterhane profile image
Smitter

Thanks, I will look into how to organize my folder tree