寫 React 程式這麼多年，有些人可能還沒注意到如何去規範專案程式碼，接下來呢，給 10 個建議，希望能幫到你！
1. 組織好專案目錄結構
在 React 專案中，沒有強制規定目錄的結構，但是有一個好的規範，可以讓你更好地組織程式碼，也能更好的進行程式碼後期維護。
這裡有個建議：經常被重複利用的 Component（元件）要抽出來，放到一個同一個目錄下。
這樣的程式碼好理解，好維護。
2. 讓你的元件（Component）更緊湊
注意一個原則：不要重複，不要重複，不要重複！！！
讓你的元件足夠小，不要包含多餘的內容，這樣好維護。
如果元件有包含別的元件，應該抽出來的，讓其變成一個單獨的元件。
注意下面的兩個原則：
- 重用性 - 重複利用你的程式碼
- 可維護性 - 遲量小，不復雜
3. 明智地命名你的元件
選擇一個好記，容易理解的名稱來命名元件。
用英文名，而且首字母大寫，以跟 html 元素區別開來。
4. 不要重複（Don’t Repeat Yourself）
不要重複是作為程式設計師寫程式碼的原則了，這個不限於前端。
不重複寫程式碼會僻免程式碼冗餘，而且更好維護，不會出現，改動一個功能，要到處改相同程式碼的情況。
在 React 中僻免重複，可以適當使用高階元件
5. 管理好狀態資料（state）
不要把 state 一把梭，跨元件間傳遞資料會讓程式碼變得難維護。
6. 在 JavaScript 中寫樣式（CSS)
我們經常在 .css 或 .scss 檔案中寫樣式，當專案變得很大時，對可讀性不友好，而且難維護 。
我們應該在元件中寫樣式，這樣維護樣式時，直接找到元件，很好維護。
可以使用下面的流行庫來解決：
7. 把 render 和 state 儘量分開
我們經常需要區分出有狀態的元件和無狀態元件。
我們經常會從遠端 load 一些資料，load 的資料可以作為引數傳給子元件，遲早做到分開。
如下圖：
8. 多用型別檢查系統
多用 TypeScript 作為型別約束，在執行之前就可以僻免一些不必要的出錯。
當然學習 TypeScript 是要成本的，但是 TypeScript 確實是強有力的工具，不僅有程式碼提示，還能提前發現錯誤。
這裡可以學習 TypeScript：TypeScript 基礎教程 2020 年重製版視訊
花 10 分鐘入個門，沒問題的！
9. 使用 ESLint 工具
每個程式設計師有自己的程式碼風格，如果在團隊中開發，不同的程式碼風格會讓專案合作變得困難。
如何保證統一的程式碼風格呢？就要用工具來約束。
我們可以使用 ESLint 這樣的工具。
10. 寫測試程式碼
單元測試或整合測試能夠在模擬環境跑一遍程式碼，很好地代替肉測。
大團隊都有這個，可以更好的保持程式碼健全性。
一處程式碼修改了，整個功能都要測試，肉測很難全面測試，這個時候需要用到程式碼測試，金融系統更需要這個。
推薦的工具：
jest
好，希望對大家有所幫助！
本作品採用《CC 協議》，轉載必須註明作者和本文連結