ReactJS Sub Component Directory Structure

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.

actionscomponents/  component1/    subcomponent1-1.jsx    subcomponent1-2.jsx  component2/    subcomponent2-1.jsx    subcomponent2-2.jsx  component1.jsx  component2.jsxstores

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.

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.