ReactJS Sub Component Directory Structure

Question

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')

Answer 1

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.

Answer 2

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.