Say I am building a page that displays the user profile/settings page. It might have components for the profile, a profile photo, a bio section, etc...
I currently have the following structure
components/ |- profile/ |- profile.jsx |- profile_photo/ |- profile_photo.jsx |- edit_button.jsx |- edit_modal.jsx |- user_bio/ |- user_bio.jsx |- education.jsx |- demographics.jsx
Is there a community recommended way to organize and name these files?
Right now the path feels redundant because I call
components/profile/user_bio/user_bio.jsx. Should the "main file" under each subdirectory be named the same as the folder or be named something generic like
index.jsx? Or is the redundancy just accepted?
Where do tests go? Are they placed in the same folder as the files (like Golang's standard) or are they placed in a separate top-level
tests/ directory (like Ruby on Rails projects).
There are different approaches to structure of the react projects
React recommendations is https://reactjs.org/docs/faq-structure.html
You can also read this:
I would say that grouping by features works best for big projects and grouping by file type is better for small projects.
You can create an
index.js file and export the file. So you only have to import it with
components/profile instead of