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?
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')
Open the component's file and start editing away. Then you need to edit your styles, so you also navigate to your styles folder, find the button and open that. Now the component is updated, the tests are broken and some stories need to be updated. You navigate to those respective folders and open tests/button.
The simplest folder structure for this case seems to be the “group files by their types” option mentioned in the React docs. This makes our lives easy: Components go in the components folder, hooks in the hooks folder, and contexts in the contexts folder.
In which directory is react component saved? Answer : C) React component is saved in js/components in/. 35.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With