[譯]如何架構一個 React 項目？

原文鏈接：How to Structure a React Project?

作者：Juho Veps?l?inen

譯者：杰微刊－Leo Xu

編者注：請檢出React 獨立開發包（React Indie Bundle） 。它是在 Juho 同許多其他的 React 社區成員的幫助下被組裝到一起的。所有的奉獻都大大有助于在我們這個社區中的人們。

編程有點像搞園藝。比起竭力去對付BUG（蟲子），我們更愿意把一切弄得整潔有序，以免最后落得個身在荒野叢林中。低劣的架構會拖我們的后腿，也會使得BUG更容易鉆進系統里去。

想要對你的項目進行架構，方法有多種。我相信，根據你的實際情況對架構進行演進，要遠比堅持一些條條框框的教條更好。接下來我將會介紹一些基礎的方法以資您思考。

將所有的東西都放在一個文件中 

最簡單的項目可以被放到一個文件之中。而這就是我所選擇的用來處理我的Webpack 配置的方法。這種方法最大的好處就是所有你需要的東西都在這一個文件中了。如果你是從上到下對你的代碼進行組織的，那么這就會是一個合適的做法。

你可以用類似的方式開始一個React項目的工作。當你在進行原型設計時，想要去試圖弄明白層次結構，就可以在一個文件中把組件都梳理出來。而這樣會隨著文件的慢慢增大而變得笨重起來。例如對測試的處理就會比原先要困難一些。文件分支的合并也將會是個問題。

拆分成多個文件 

解決這個問題顯而易見的方式就是著手將一些東西進行拆分。開始的時候你可以把各個組件挪到各自分開的文件中去，像這樣：

這里 index.jsx 可以作為應用程序的入口。它使用了 ReactDOM.render 來渲染 App ，并且讓這部分啟動起來。App 再來使用 Note 做一些有趣的事情。如果我還想要有另外的一個組件，只需簡單地在 /components 下面添加就是了。 

如果你想要對你的組件進行測試，可以增加一個用于測試的單獨的目錄，并在那里面進行測試代碼的開發。甚至你還可以嘗試一下測試驅動開發的方法，在實現之前就全盤考慮好組件的約束條件。 

使用這個基礎的架構你可以走得相當的遠。盡管它也有它的局限性。例如，如何處理樣式？主樣式文件 main.css 可能會變得相當的大。其前景是有點可怕的。

 
將組件放到它們自己的目錄下 

前面一節最后的那個問題可以通過在系統中增加更多的架構來解決。下面就是你最終會看到的樣子：

① 組件的名稱（例如，App.jsx）以一個大寫的字母開頭能讓它們更加容易被找到。 Index.js 文件為我們提供了通向這些文件的整潔的入口，我們因此可以很容易的在別的地方對它們行使用。

 
② 現在每一個組件都是各自獨立的一個實體了。我們使用諸如CSS Modules這樣的示例就可以說明這一點。將這些組件從項目中抽取出來，讓現在可以很容易使它們各自進行獨立的管理。 

③ 現在與每個組件相關的測試可以不費吹灰之力就能找到。我們也可以仍然在項目根目錄下擁有一個 /tests 目錄，以用來處理更高級別的測試。

當然真實的項目復雜度會更高，而當前的這種架構將開始突破復雜度的限制。不知道這適不適合你的想法呢？ 

將視圖添加到架構的組合中 

這里可能就是各種意見開始出現分歧的地方。我會讓你在評論中比較各自觀點的高下。這里是一種我感覺上挺舒服的架構：

因為我們現在已經有了路由，所以 App 就變得多余了。現在更像是視圖在負責其職責。 它們只是在遵循著我們的路由規則，并基于它們各自的需求使用著組件。 

這種架構遠還可以進一步擴大，不過即使是它，隨著項目的增長也會受到限制。我建議在視圖和組件之間增加一個像“功能特性”這樣的概念。功能特性就是以某種方法和形式對組件進行聚集，當然功能特性本身也是可以聚集的。

處理數據問題 

鑒于大多數實用的應用程序都得 對數據進行不同程度的處理，我們目前的架構所做的可能還不太夠。這在很大程度上取決于你選擇了什么樣類型的架構。將一些數據問題放到當前的架構中處理或許 還是可以的。或者你可能會引入新的根級別的目錄，比如 /actions、 /constants、 /libs、 /reducers、 /stores，這里只是給你提供一些思路。

總結 

對你的項目進行架構并沒有一個 什么正確的方法。相反，你應該保持務實。有時候只是對項目進行一下重組就可以幫助你使其更加清晰，并且使其更容易讓你自己和其他人理解。對于你在你的 React 項目選擇了什么類型的架構，以及為什么做這樣的選擇，我是非常好奇的。所以請就此隨意地在底下發表評論。

為了讓深入了解 React 的世界更加容易，我們準備了一個特別的包，其中有一些來自獨立開發者的材料。它在限定的時間內是可以使用的。如果你想要深化自己對于 React 的了解，現在就是一個上手它的好時機。我希望你會喜歡其中包含的書籍、視頻和咨詢服務。

由 John Otander (@4lpine) 精心制作。

可以訪問 Github.