Suggestion: Refactor the react_app folder structure

Development
,
1

Hello,

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?

Regards! Happy new year :fireworks:

1 Like
2

We can try to leverage discourse’s ability for polls:

  • common components should live under react_app/components in sub-directories.
  • Each sub-directory should have ComponentName.jswith 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
  • 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

0 voters

Show results

Vote only for the rules you want :slight_smile:, sadly we don’t have an option for +1/-1 per poll option

3 Likes
3

I’d like to suggest a different concept - group files by domain

before

actions/
    CommandActions.js
    ProductActions.js   <= Here
    UserActions.js
components/
    Header.js
    Sidebar.js
    Command.js
    CommandList.js
    CommandItem.js
    CommandHelper.js
    Product.js          <= Here
    ProductList.js      <= Here
    ProductItem.js      <= Here
    ProductImage.js     <= Here
    User.js
    UserProfile.js
    UserAvatar.js
containers/
    App.js
    Command.js
    Product.js          <= Here
    User.js
reducers/
    index.js
    foo.js
    bar.js
    product.js          <= Here
routes.js

after

app/
    Header.js
    Sidebar.js
    App.js
    reducers.js
    routes.js
command/
    Command.js
    CommandContainer.js
    CommandActions.js
    CommandList.js
    CommandItem.js
    CommandHelper.js
    commandReducer.js
product/
    Product.js
    ProductContainer.js
    ProductActions.js
    ProductList.js
    ProductItem.js
    ProductImage.js
    productReducer.js
user/
    User.js
    UserContainer.js
    UserActions.js
    UserProfile.js
    UserAvatar.js
    userReducer.js

With this folder structure I don’t need to jump from one folder to another all the time, plus in that way I can find files more easily.

For further information read this blog

4 Likes
4

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.

5

@amirfefer I love this approach!

6

I like it too :+1:

7

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?

8

not yet @danseethaler but hope we can do it soon…

2 Likes
9

+1 to the approach suggested by @amirfefer - it makes the most sense to me!

10

Agreed, we do this with angular in katello and it’s nice to have everything in one place.

11

+1, @amirfefer’s suggestion makes sense to me.

12

Let’s continue the discussion here :smile:

1 Like