Search code examples
reactjsjsxdirectory-structure

Recommended way to name and organize sub-components (sub-folders) in React

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?

  1. Right now the path feels redundant because I call components/profile/profile.jsx or 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?

  2. 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).

Thanks!

Solution

  • You can create an index.js file and export the file. Let's take the profile component as an example. The index.js file would look like this:

    export {default} from "./profile"

    So you only have to import it with components/profile instead of components/profile/profile.js