ReactJS Subcomponent Directory Structure

Question

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

Module components

designed in such a way that its entire subcomponent remains inside its directory in the component folder.

Components also have their own components, which are also located in the components folder inside the parent components folder.

Thus, a relative problem is created with the import, and it also becomes erratic with so many levels invested.

If I create all the components under the components of the root application, then there will be many components and who will use the question that will be asked.

So, what I'm asking is, would there be a better directory structure for this kind of scenario?

Soved

In webpack configuration 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 usually create a structure so that if a component has subcomponents, then these subcomponents should be under a folder with the name of the component, for example.

 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 the right file and understand the dependencies. Of course, subcomponents should be moved to another folder if they are separated by several components.

In addition, if you have a component3.jsx file and it is refactoring, you can move some parts to subcomponents in the component3 folder, and you do not need to change the path to component3.jsx for all components that use it. This is useful.

Answer 2

I use a structure like 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 its own folder, which contains its assets (I use webpack to compile), and subcomponents are nested in their parent folders.