React項目結構

任何一種語言、框架，在真正上手的時候，多多少少會想一想怎麼安排項目結構（正所謂磨刀不誤砍柴工），React也不例外。

google了下，拿下面3篇博客來講道說道。

（1） how-to-better-organize-your-react-applications

（2） the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing

（3） react-project-structure

 

（1）主張將React項目結構分爲components, scenes, services 

components: 可嵌套組件，可認爲是組件倉庫

scenes: 實際上就是咱們所看到的頁面，也可嵌套

services: 包含業務邏輯並向後臺發請求

（2）先從使用角度分析了React開發過程當中的時間消耗，並根據此來規範下React的項目結構

時間消耗前三：

　　1. 在編輯器中切換文件tab頁

　　2. 根據文件結構找到文件，打開

　　3. link到其餘文件

仍然是組件集中的方式，可嵌套；組件中包含css；使用容器組件；js的命名同export的組件名稱相一致；在utils裏使用index.js，其中聲明各個方法的export

（3）我的推薦 - Simple is better. Start simple. Keep it simple.

src/api.js：調用後臺api，若方法過多能夠改成src/api文件夾，內部多個js

src/components：展現層組件，基本只用來定義各個組件屬性

src/containers：容器組件，含狀態並調用api

src/images：圖片

src/index.js：初始化app並調用ReactDOM.render()

src/utils：錯誤處理、格式化等，相似（2）中描述

 

簡約而不簡單！