How to Structure a React Project

Posted on In ,

After create a React project by some CLI tools, we need to create some folders to structure the project. React official said they doesn’t have opinions on how you put files into folders. In my personal opinion, I recommend to use the following folder structure.

Grouping by Features/Modules

  • assets: The assets folder contains all images, CSS files, font files, etc. for your project. Pretty much anything that isn’t code-related will be stored in this folder.
  • components: Global components.
  • configs: Configs.
  • context: Stores all your React context files that are used across multiple pages.
  • data: The data folder is similar to the assets folder, but this is for storing our data assets such as JSON files that contain information used in our code (store items, theme information, etc). This folder can also store a file that contains global constant variables. This is useful when you have lots of constants you use across your application, such as environment variables.
  • features: Instead of grouping by page we are instead grouping by feature. As a developer since in 90% of cases when you are going to add new code to a project you are either going to implement a new feature, such as adding user accounts, or you are going to modify an existing feature, such as adding the ability to edit todos.
    • [featureName1] (authentication, user, department)
      • components/
      • helper/
      • hooks/
      • services/
      • utils/
      • index.js
      • [subFeature1] (addUser, editUser, removeUser, viewUserDetails)
        • components/
        • helper/
        • hooks/
        • services/
        • utils/
  • hooks. Global hooks.
  • layouts: This is just a special folder for placing any layout based components. This would be things like a mainLayout, sidebar, navbar, container, etc.
  • lib: Library wrappers. This folder contains facades for the various different libraries you use in your project. For example, if you use the axios library then this folder would contain a file for that axios library that creates your own API overtop of the axios API which you then use in your application. This means that instead of importing axios directly in your project you would import the file from this folder associated with axios.
  • pages: This folder now only contains one file per page and the reason for this is that all the logic for the features on the pages are in the features folder. This means that the files in the pages folder are actually quite simple since they just glue together a few feature components and some general components.
  • services: This folder contains all your code for interfacing with any external API.
  • store: Context management.
  • utils: This folder is for storing all utility functions such as formatters. This is a pretty straightforward folder and all the files in this folder should likewise be straightforward.

References

[1] File Structure - React
[2] How To Structure React Projects From Beginner To Advanced