這個議題乍聽蠻無聊的，而且許多人參加鐵人賽時「安裝」的下一篇常常也是「資料夾結構」，這麼多人寫過了，還有需要討論嗎？但說實話這是我常常糾結的議題，沒決定好專案結構就無法開始撰寫XD，每過一陣子也會煩惱當初的做法會不會不夠好，但關於這方面的文章就真的不多了，所以趁這次鐵人賽，就好好的查了「最佳實踐」～
翻到 Evolution of a React folder structure and why to group by features right away 這篇文章蠻有趣的，文中研究了最受歡迎的資料夾結構的做法，並討論最佳實踐，最後的實作也放在 Github 上。
文章中提到以下幾種資料夾結構做法：
按檔案類型（如 components、hooks）分組
像是只要是元件（component）就全部丟到 /components 的資料夾中，如果是 hook 就全部丟到 /hooks 的資料夾中。
└── src/
├── components/
└── hooks/
這是一種最簡單的專案開始方式～
按檔案類型與功能分組
但在更進階一點的情況呢？像是我們不同的功能使用不同的元件，這些元件在 /components 中分別都會有子資料夾，然後共用的部分會放在 /ui 這個共用的資料夾。
└── src/
├── components/
│ ├── edit-todo-modal/
│ ├── todo-list/
│ └── ui/
└── hooks/
按頁面分組
接著如果真的需要有不同頁面，這些頁面會放在 /pages 的資料夾，每個頁面自己也是一個資料夾裡面包括自己頁面中用到的元件，然後共用的元件一樣會放在 /components。
└── src/
├── components/
├── hooks/
└── pages/
├── home/
└── signup/
按功能分組
在 codebase 不斷成長下會遇到一些挑戰，像是 /hooks 裡面就塞了太多東西，複雜的程式碼也分散在不同的資料夾。為了方便擴充與維護，按照功能來進行分組，不同功能放在不同在 /features 中的子資料夾。
└── src/
├── features/
│ ├── users/
│ ├── friends/
│ └── posts/
└── pages/
bulletproof-react 講到最佳實踐時，也裡面提到了子資料夾中可以有的項目：
└── src/features/awesome-feature
├── api/
├── assets/
├── components/
├── hooks/
├── stores/
├── types/
└── utils/
剩下的會共用到的像 components、hooks 等就一樣放在 /src 下的共用資料夾，如下圖所示：
圖片來源：https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md
總結
大家應該有發現範例的狀況是越來越大，所以首先不同的專案大小有著不同的推薦建構方式，隨著專案成長在調整即可。再來，在範例 1, 2 較適用沒有多頁面的應用，3 與 4 都是多頁面，差別在 codebase 越大越複雜的情況為了更好維護與擴充，建議改成以功能為主，把主要的功能移出成為一個資料夾，共用的部分則保持不變。
雖然前面提了這麼多，但其實 React 官方在 File Structure 的章節也提到了不要選超過五分鐘，需要時再去處理吧～
If you’re just starting a project, don’t spend more than five minutes on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You’ll likely want to rethink it anyway after you’ve written some real code.
iThome鐵人賽
看影片追技術