Draft a standard structuring convention for the React Components

[Jarmos-san]

Feature details?

Concerns Over Current Dev Practice

Since the project relies on Next.js, the concern about structuring files & directories for the project are pretty much covered as well! But Next.js doesn't provide any guidance on how to structure the many components a web app can have in it's lifetime. Yes, it's possible to dump all components under the src/components directory & call it a day but it can lead to a degree of ambiguity.

Suggestions for an Improved Dev Practice

As such I reviewed a couple of resources which suggested an improved standard structuring formulae for React projects. Following are the resources & their suggestions:

1. "React Architecture: How to Structure and Organize a React Application" by Tania Rascia which suggests a directory structure for React SPA projects. The author advocates keeping everything related to a specific functionality in one single place. For e.g; keep all tests, style sheets & .tsx files under a one directory aptly named after that functionality. So, we could group Footer.tsx, Footer.test.ts, Footer.styles.css under the src/components/Footer directory.
2. "How I set up a Next.js project structure" by Flavio Copes recommends a "page" components structuring. So, all components & it's related files used in the profile page should be placed under the src/components/Profile directory.

Ending Words

So, it appears there's no clear consensus on how exactly should components be structured but the aforementioned resources can definitely referred to as a source of inspiration. Keeping in mind scalability concerns & the scope of the project, I think we should pick the best of both the suggestions & build our own standards. Hence, this issue thread will keep track of drafting a standard practice of naming, structuring and/or any development practices of all the components used in the project.

That said, concerns, feedback and/or recommendations are very welcome! So please make the most out of the comment section below & share what you think.

Code of Conduct

• I agree to follow this project's Code of Conduct