在這篇文章中，我將帶你了解一種對我來說非常有效的 資料夾結構。它對初學者友好，具備可擴展性，非常適合小型到中型專案。我們開始吧！
1. assets/ 🖼️
這個資料夾是用來存放所有靜態檔案，如圖片、圖示、字體及其他媒體。將它們放在一個地方可以方便你在整個應用中管理和引用。
這裡要儲存的東西：
- 圖片 (
logo.png,background.jpg) - 圖示 (SVG 或圖示字型)
- 字體 (自訂或第三方)
<figcaption> 資料夾 Assets </figcaption>
2. components/ 🧩
這裡是你的可重用 UI 組件所在的地方。想想按鈕、卡片、模態視窗，以及應用中可以重複使用的任何其他元素。
這裡要儲存的東西：
- 可重用組件 (
Button.jsx,Card.jsx) - 組件特定的樣式（如果不使用 CSS-in-JS）
- 複雜組件的子資料夾（例如，
components/Header/）
<figcaption> 資料夾 Components </figcaption>
3. contexts/ 🌐
React Context 非常適合管理全局狀態，而不必進行屬性傳遞。這個資料夾儲存所有的上下文提供者和相關邏輯。
這裡要儲存的東西：
- 上下文提供者 (
AuthContext.js,ThemeContext.js) - 用於上下文邏輯的 reducers 或自訂 hooks
<figcaption> 資料夾 Contexts </figcaption>
4. helpers/ 🛠️
這個資料夾是用來存放不屬於特定組件或功能的工具函數。這些是一些能讓你生活更輕鬆的小助手。
這裡要儲存的東西：
- 工具函數 (
formatDate.js,validateEmail.js) - 常數 (
appConstants.js) - 自訂錯誤處理器
<figcaption> 資料夾 Helpers </figcaption>
5. hooks/ 🎣
自訂 hooks 在 React 中是個遊戲改變者。這個資料夾是用來存放所有可重用的 hooks，讓它們保持組織性並方便導入。
這裡要儲存的東西：
- 自訂 hooks (
useFetch.js,useLocalStorage.js) - 特定邏輯的 hooks（例如，
useAuth.js,useTheme.js）
<figcaption> 資料夾 Hooks </figcaption>
6. layouts/ 🖼️
佈局是你應用的骨架。它們定義了你頁面的結構（例如，標題、頁腳、側邊欄），並幫助在應用中維持一致性。
這裡要儲存的東西：
- 佈局組件 (
MainLayout.js,AuthLayout.js) - 佈局特定的樣式
<figcaption> 資料夾 Layouts </figcaption>
7. pages/ 📄
這個資料夾包含代表應用中每個頁面的頂層組件。這裡的每個檔案對應於應用中的一個路徑。
這裡要儲存的東西：
- 頁面組件 (
Home.jsx,About.jsx,Contact.jsx) - 頁面特定的邏輯和樣式
<figcaption> 資料夾 Pages </figcaption>
8. services/ 🌍
這個資料夾用於儲存所有的 API 呼叫和外部服務整合。將它們分開儲存可以在測試時輕鬆進行管理和模擬。
這裡要儲存的東西：
- API 服務檔案 (
authService.js,userService.js) - API 的配置檔案（例如，
apiConfig.js）
<figcaption> 資料夾 Services </figcaption>
9. styles/ 🎨
這個資料夾是用來存放全局樣式、主題和 CSS 實用工具。如果你在使用 CSS-in-JS 函式庫，你可能不需要這個資料夾，但它對於全局樣式仍然很有用。
這裡要儲存的東西：
- 全局樣式 (
global.css) - 主題檔案（
theme.js，適用於 styled-components 或 Material-UI） - CSS 實用類別
<figcaption> 資料夾 Styles </figcaption>
10. App.js 🎯
這是你應用的進入點。在這裡，你可以定義路由，將應用包裝在提供者中，並設置任何全局配置。
這裡要包含的內容：
- 路由邏輯（使用
react-router-dom） - 上下文提供者（
AuthProvider,ThemeProvider） - 全局錯誤邊界或包裝器
🗂️ 完整的資料夾結構
以下是完整的資料夾結構，包括每個資料夾中的檔案：
<figcaption> 完整的資料夾結構 </figcaption>
🚀 為什麼這個結構有效
- 擴展性： 隨著你的應用成長，你可以輕鬆添加新的資料夾或子資料夾，而不會破壞現有結構。
- 可讀性： 每樣東西都有其位置，讓你（或你的團隊）可以輕鬆找到所需的內容。
- 可重用性： 透過分離關注點，你可以在應用中重用組件、hooks 和實用工具。
🛠️ 結構化你的 React 應用的專業技巧
- 保持簡單： 不要使結構過於複雜。從你需要的開始，隨著應用的增長再擴展。
- 使用有意義的名稱： 以明確其目的的方式命名文件和資料夾。
- 記錄你的結構： 添加一個
README.md文件來解釋你的資料夾結構，以便你的團隊（或未來的自己）理解。
🎉 準備好開始構建了嗎？
現在你已經有了一個堅實的結構，是時候開始構建了！記住，最好的結構是對你和你的團隊有效的。隨意調整這個設定來符合你的需求。
祝編程愉快 💻
| 感謝你的閱讀！ 🙏🏻 <br/> 希望你覺得這有用 ✅ <br/> 請給我反應並關注以獲得更多資訊 😍 <br/> 由 Hadil Ben Abdallah 用 💙 製作 |    |
|---|
原文出處：https://dev.to/hadil/how-to-structure-a-react-app-like-a-pro-20b9
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式