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

by user2490003   Last Updated September 11, 2019 17:26 PM

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!



Answers 2


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:

https://daveceddia.com/react-project-structure/

https://hackernoon.com/how-to-structure-your-react-app-98c48e102aad

I would say that grouping by features works best for big projects and grouping by file type is better for small projects.

Valerii
Valerii
September 11, 2019 17:23 PM

You can create an index.js file and export the file. So you only have to import it with components/profile instead of components/profile/profile.js

Ahmad
Ahmad
September 11, 2019 17:25 PM

Related Questions


Updated August 25, 2018 11:26 AM

Updated May 27, 2017 05:26 AM

Updated June 18, 2017 03:26 AM

Updated April 19, 2015 20:11 PM

Updated February 04, 2017 14:11 PM