Discussion: File structure for components

[lindapaiste]

Sometimes I'm not sure which directory is the best place to put a component so I'd love to open a discussion on this! I think no one has really been sure. As a result, there's not a concrete or consistent explanation for where everything is placed right now.

We have multiple folders for components:

• /client/common
• /client/components
• Individual /components folders in each "module". For example, /client/modules/User/components and /client/modules/IDE/components

Questions to consider when placing a component:

• Is it purely presentational or does it access any state from Redux or React-Router?
• It is it used in more than one part of the app?
• It it large and complex (like the Header) or is it "atomic" (like the Button)?
• Does it use other components internally?

[swrno]

Hi @lindapaiste,

This is a crucial discussion, and I appreciate you initiating it. Component organization is often a challenge, and having a consistent structure is essential for maintainability.

Well I have some thoughts on the questions you've raised:

1. Redux/React-Router Access:

   • If a component interacts with Redux or React-Router, placing it in a folder like /client/components might make sense, as it indicates it's not purely presentational.

2. Reusability:

   • If a component is used in multiple parts of the app, having a centralized /client/common or /client/shared directory could be beneficial.

3. Size and Complexity:

   • For larger and more complex components, like the Header, having them in /client/common or /client/components could make sense. For more atomic components, such as buttons, a specific /client/components/Atomic or /client/common/Atomic folder might be appropriate.

4. Internal Dependencies:

   • If a component heavily relies on other components, having a dedicated folder for that module, like /client/modules/User/components, seems logical to keep related components together.

Considering these factors, a hybrid approach might also be beneficial. For instance, having a general /client/components directory for common components and then module-specific directories for components closely tied to certain modules.

I'd love to hear what others think and if there's a preference for a particular structure based on practical experience.