您是否厭倦了篩選一堆混亂的 React 元件和檔案？你不是一個人！隨著專案的成長，保持程式碼井然有序成為一個真正的挑戰。但別擔心——我會支持你的。在本指南中，我將引導您完成一個經過實際檢驗的結構，該結構將使您的 React 專案管理起來變得輕而易舉。
為什麼好的結構很重要
在我們深入討論之前，我們先來談談為什麼結構如此重要。一個組織良好的程式碼庫不僅僅是為了滿足你內心的整潔癖（儘管這是一個很好的獎勵）。是關於：
-
當您需要尋找和更新元件時節省時間
-
讓團隊成員更輕鬆協作
-
在不失去理智的情況下擴展您的專案
相信我，未來的你會感謝你花時間把這件事做好！
您一直夢想的 React 專案結構
好吧，讓我們進入正題。這是一個在無數專案中對我很有幫助的結構：
📁src
|
|_ 📁components
| |_ 📁Cards
| | |_ 📄MainCards.jsx
| |_ 📁Buttons
| |_ 📄PrimaryButton.jsx
| |_ 📄SecondaryButton.jsx
|_ 📁api
| |_ 📄Auth.js
| |_ 📄Event.js
|_ 📁pages
| |_ 📁HomePage
| | |_ 📄HomePage.jsx
| |_ 📁LoginPage
| |_ 📄LoginPage.jsx
|_ 📁contexts
| |_ 📄AuthContext.js
| |_ 📄EventContext.js
|_ 📁hooks
| |_ 📄useAuth.js
| |_ 📄useEvent.js
|_ 📁utils
| |_ 📄helperFunctions.js
| |_ 📄date.js
|_ 📁assets
| |_ 📁images
| | |_ 📄logo.svg
| | |_ 📄background.jpg
| |_ 📁styles
| |_ 📄global.css
| |_ 📄theme.js
|_ 📄App.jsx
|_ 📄index.js
看起來很整潔，對吧？但這一切意味著什麼？讓我們來分解一下。
元件：您的 React 樂高積木
將components資料夾視為樂高積木的玩具箱。每個元件都是可重複使用的部分，您可以將它們組合在一起來建立您的應用程式。我喜歡這樣組織我的：
📁components
|_ 📁Cards
| |_ 📄MainCards.jsx
|_ 📁Buttons
|_ 📄PrimaryButton.jsx
|_ 📄SecondaryButton.jsx專業提示：將相似的元件分組在一起。這將為您節省以後狩獵的時間！
API：資料魔法發生的地方
api資料夾主要用於資料獲取。將 API 呼叫與 UI 元件分開 – 您的程式碼會因此感謝您。這是我通常包括的內容：
📁api
|_ 📄Auth.js
|_ 📄Event.js頁數：大局
您的pages資料夾包含應用程式的主要視圖。每個頁面就像是應用程式故事中的一個章節。例如：
📁pages
|_ 📁HomePage
| |_ 📄HomePage.jsx
|_ 📁LoginPage
|_ 📄LoginPage.jsx背景：全球狀態變得簡單
React Context 是管理全域狀態的遊戲規則改變者。我將上下文文件組織得井井有條：
📁contexts
|_ 📄AuthContext.js
|_ 📄EventContext.jsHooks：你的自訂 React 超能力
自訂掛鉤就像您自己的個人 React 超能力。我將我的儲存在hooks資料夾中：
📁hooks
|_ 📄useAuth.js
|_ 📄useEvent.jsUtils：你的程式設計瑞士軍刀
utils資料夾用於存放您一次又一次使用的所有方便的輔助函數：
📁utils
|_ 📄helperFunctions.js
|_ 📄date.js資產：漂亮的東西放在這裡
將圖像、樣式和其他靜態資源組織在assets資料夾中：
📁assets
|_ 📁images
| |_ 📄logo.svg
| |_ 📄background.jpg
|_ 📁styles
|_ 📄global.css
|_ 📄theme.js根檔案：將它們捆綁在一起
最後，我們有了將所有內容組合在一起的根文件：
-
App.jsx：設定應用程式結構的主要元件 -
index.js：React 應用程式啟動的入口點
總結：你的 React Nirvana 之路
現在你已經有了它——一個適合你的 React 專案的乾淨、可擴展的結構。請記住，這不是一刀切的解決方案。請隨意調整它以滿足您的需求。關鍵是一致性。
透過遵循這種結構，您將花費更少的時間來處理文件，而將更多的時間用於建立出色的功能。您的程式碼將更加清晰，您的團隊將更加快樂，您的專案將像夢想一樣擴展。
還在等什麼？在您的下一個專案中嘗試這種結構。未來的你（和你的隊友）會感謝你！
祝您編碼愉快，並祝您的 React 專案始終井井有條且沒有錯誤！
原文出處：https://dev.to/vyan/mastering-react-a-developers-guide-to-structuring-your-frontend-code-45a5
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式