react-architecture-directory-structure/

[utterances-bot]

React Architecture: How to Structure and Organize a React Application | Tania Rascia

There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the…

https://www.taniarascia.com/react-architecture-directory-structure/

[jacobra19]

great post as usual!

[ridhamz]

great article

[webpig]

great. I recommend.

[afrievalt]

very nice. What goes in your ├── /books.actions.js ? file?

Are they different from the actions coming out of books.slice.js or are you re exporting them?

[rizaldimaulidia]

I'm just learning React for a month. This is very helpful for me to know about more way to manage folder structure. Thank you very much for your article.

[asantech]

hi tania,

thanks for your method of structuring the directories in a react app, i am using it in all my projects. i just have two questions:

1. i have some config_file.js files which i put them in the "configs" folder (before reading this page). here we have the "utils" folder, in which you have written to put the "constants", by "constants" did you also mean the config files? and if so, would the structure look like this below accordingly? :

src -- utils -- configs -- configFile1.js -- configFile2.js -- ...

2. in the "javascript bible" book, in the DOM hierarchy, buttons and inputs are considered under the form node (in the DOM heirarchy tree), even for example in Bootstrap library, even if you have a single input with a button in a navbar, Bootstrap has put the input and the button in a form element. is it ok to have a single input or a single button or a group of buttons and inputs in general not inside a form element (just like the Fomantic-UI library which puts the inputs in a div with a CSS class named form), or is it wrong to do so according to JS? if it is not ok, according to your structure, should the buttons and inputs components be placed like this? below:

src -- components -- forms -- select -- Select.js -- input -- Input.js -- button -- Button.js

or if is ok (not including a button or input in a from) is the structure below ok?:

src -- components -- forms -- select -- Select.js -- basis -- input -- Input.js -- button -- Button.js

thank you.

[asantech]

hi tania,

thanks for your method of structuring the directories in a react app, i am using it in all my projects. i just have two questions:

i have some config_file.js files which i put them in the "configs" folder (before reading this page). here we have the "utils" folder, in which you have written to put the "constants", by "constants" did you also mean the config files? and if so, would the structure look like this below accordingly? :

src -- utils ---- configs ------- configFile1.js ------- configFile2.js ------- ...

in the "javascript bible" book, in the DOM hierarchy, buttons and inputs are considered under the form node (in the DOM heirarchy tree), even for example in Bootstrap library, even if you have a single input with a button in a navbar, Bootstrap has put the input and the button in a form element.
is it ok to have a single input or a single button or a group of buttons and inputs in general not inside a form element (just like the Fomantic-UI library which puts the inputs in a div with a CSS class named form), or is it wrong to do so according to JS? if it is not ok, according to your structure, should the buttons and inputs components be placed like this? below:

src -- components ---- forms ------ select -------- Select.js ------ input -------- Input.js ----- button -------- Button.js

or if is ok (not including a button or input in a from) is the structure below ok?:

src -- components ---- forms ------ select -------- Select.js ---- basis ------ input -------- Input.js ------ button -------- Button.js

thank you.

[zafar-saleem]

Great in look into react directory structure. Thanks for sharing. I also have one basic event based architecture using react which is good starting point and easy to build variant of it. I recommend to check it out. https://www.webwinx.com/2023/01/29/event-based-architecture-using-react/

[murytarlah]

@taniarascia just what I've been looking for thanks

[kings186]

Thanks for your time.