Skip to content

Instantly share code, notes, and snippets.

View fuhaixiao's full-sized avatar
🏠
Working from home

套马的汉子 fuhaixiao

🏠
Working from home
View GitHub Profile
@arnausd23
arnausd23 / how_to_organize_folders.md
Last active July 21, 2023 01:16
How to organize folders: function-first VS feature-first

How to organize folders: function-first VS feature-first

Function first

Function-first means that we separate each file into the folder they belong to by their usage. For example in a modern frontend project we might have the following folders:

  • /components: Dumb components who only have presentational purposes
  • /containers: Smart components who fetch data and have the logic to parse or modify it before sending it into the dumb components:
  • /store: Contains all the store files like actions, reducers, selectors, etc.

This might be troublesome when having a large application. For example you might see yourself adding a lot of containers for each page and then having problems finding the file you want inside the containers folder. A common approach to solve this is put every container file inside a folder with the feature name, but then we are using feature-first.