The react_app folder structure is very confusing and has no consistency.
I would love to do some refactoring and change the folder structure.
This is my suggestion:
common components should live under react_app/components in sub-directories
currently - react_app/components/common
Each sub-directory should have ComponentName.js with default export
Each sub-directory should have index.js with named exports of all the components in the tree
Single file per component
All the root/mounted components should live under react_app/root-components
currently - react_app/components
react_app/components/componentsRegistry.js should move to react_app/root-components/RootComponentsRegistry.js
All files and folder under react_app/components and react_app/root-components (except index.js) should name with UpperCamelCase/PascalCase
Root component should only be a wrapping around a common component
When component have inner-components that should not be used outside of the component, the inner-components should live under react_app/components/ComponentName/InnerComponents/InnerComponentName.js
I am sure some of you won’t like the fact that each component getting exported twice (from his own file and from an index.js), but, we made a similar move in patternfly-react and it feels pretty good: CONTRIBUTING.md#code-consistency src/components
So, what do you think about those rules?
Agree? Disagree? Want to add/remove rules?
I read the blog post and absolutely agree. This makes much more sense to me then splitting every component into 5 different directories. It also makes extracting components to patternfly or stand alone node modules much easier.
I’m a little late here but I totally agree with the colocation approach by @amirfefer! Thanks for bring this up @sharvit. It sounds like we’re in accord - do we have any progress on making this happen?