7

I have a ReactJS App with below directory structure, App/ - components - - SubComponent1 - - - components - - - - SubSubComponent1 - - - - - components - - - - - .... - - - - - SubSubCompoent1.js - - - SubComponent1.js - - SubComponent2 - - ... - - SubComponent3 - - ... - stores - actions - app.js

Module Components are designed such a way that all its subcomponent remained inside its own directory under components folder.

Also components has its own components which also reside components folder inside parent component folder.

Thus creates a relative import problem along with it gets messy with nesting so many levels.

If I make all components under root app components, then there will be lot of components and who is using which one will be a question.

So What I am asking is what will be the best directory structure for this kind of scenario?

SOVLED

In webpack config add this,

resolve: {
  root: __dirname + PATH_TO_APP_ROOT
}

Now you can use require('dir/file.js') instead of require('../../../../dir/file.js')

Ibrahim
  • 584
  • 6
  • 15
  • Can you illustrate the problem better? Relative imports are fine, and the fact that you have subcomponents means that they are probably not useful elsewhere. – w00t Jun 09 '15 at 08:35
  • @w00t Main problem is deep nesting for sub components. If you have 4-5 level depth for sub components then relative imports needs to be tracked with the nesting level. – Ibrahim Jun 09 '15 at 17:04
  • 2
    I see your point. You don't want to use `require('../../../../../utils/dostuff.js')` from within a deep nested child component. I deal with it using this trick http://stackoverflow.com/questions/30601291/webpack-dev-server-and-isomorphic-react-node-application/30641006#30641006. So this long require becomes `require('utils/dostuff.js')` – Viacheslav Jun 09 '15 at 17:24

2 Answers2

3

I use a structure similar to this:

App/
 - components/
 - - Component/
 - - - SubComponent/
 - - - - SubSubComponent/
 - - - - - index.js <- SubSubComponent code
 - - - - index.js <- SubComponent code
 - - - - index.css <- SubComponent CSS
 - - - index.js <- Component code
 - - - index.css <- Component CSS

Each component has it's own folder that contains it's assets (I use webpack to compile) and subcomponents are nested within their parent folders.

Viacheslav
  • 3,876
  • 2
  • 21
  • 28
  • 1
    Yes, this is what the problem is. You have already nested 3 level, How much nesting you will allow more ? – Ibrahim Jun 09 '15 at 17:08
  • If I don't use a component elsewhere I don't bother how many levels deep it is. I don't see problem with this. – Viacheslav Jun 09 '15 at 17:18
  • This was my problem, I'm not sure of it but since I started using it VS Code has been finding it slow to refactor or even autoimport components – ThisDude May 01 '21 at 18:50
1

I usually create a structure in the way that if a component has subcomponents then these subcomponents should be under a folder with component's name, e.g.

actions
components/
  component1/
    subcomponent1-1.jsx
    subcomponent1-2.jsx
  component2/
    subcomponent2-1.jsx
    subcomponent2-2.jsx

  component1.jsx
  component2.jsx
stores

Then it's much easier to find proper file and to understand dependencies. Of course subcomponents have to be moved to another folder if they are shared by several components.

Also, if you have component3.jsx file and doing the refactoring, you can move some parts into subcomponents under component3 folder and you don't have to change path to component3.jsx in all components that are using it. This is helpful.

Tomasz Racia
  • 1,786
  • 2
  • 15
  • 23
  • 2
    I do the same. I dislike the index.js / index.css pattern because having all the files named the same gets annoying. If I am actually going to publish the component, I might change the naming then but only then. And even then you don't really need the index.js pattern. – Cymen Jun 09 '15 at 16:45
  • @tomrac Let say you have multiple large components under subcomponent1-1 then what will you do ? create a component folder sunder component1 or do all subcomponents coding in one file i.e: subcomponent1-1.jsx file and export the main component ? – Ibrahim Jun 09 '15 at 17:07
  • I'd either consider another level of nesting, or try to rewrite it and split the code into two files but still under `component1` folder (not always possible or efficient). In the first case `subcomponent1-1-1.jsx` is only required by `subcompoment1-1.jsx` so I would include it using `require('./subcomponent1-1/subcomponent1-1-1')` and I think that on this level there won't be components needed to require within `subcomponent1-1-1`. If there would and you want to avoid it, you can always consider moving this to parent component or create a mixin.Maybe you have real example of such a situation? – Tomasz Racia Jun 09 '15 at 18:47