這些內容是我學習 《fullstack-react-book》 一書，自己翻譯整理出來的要點。
目錄結構
當你瀏覽一個網站， assets 目錄存放的是你瀏覽器下載的，並且用來展示頁面的文件。
瀏覽器在解析 index.html 文件的時候，該文件其內部的
<head>標籤內的代碼具體說明了需要瀏覽器從服務器下載哪些額外的文件。
命名組件
- 如何命名組件完全取決於你的喜好。但是，命名時圍繞着語義，保持一些一致的規則，將會極大地提高代碼的可讀性。
創建 React apps 的步驟
事實上，每一個 react 應用都可以按照以下步驟來開發：
將 app 解構成組件：
- 當拿到一個 app 設計稿時，我們基本上能從視覺上將 app 分成幾個 react 組件。
- 最小職責原則：在理想的情況下，每個組件應該各自負責一塊功能。這種職責界定法，不僅能讓每個組件非常簡單明瞭，還改善了可複用性。
創建一個靜態的 app 頁面：
- 在 react 中給表單元素設置默認值，用的是
defaultValue屬性。 - 那些最底層的組件，也就是我們通常所說的“葉根組件”，它們擔負起了頁面上的大部分 HTML 結構。這是些最根本的組件。所有基於“葉根組件”的組件都應該是被精心設計過的。
- 在 react 中給表單元素設置默認值，用的是
分別哪些變量應該是狀態化的：
- 如果一個屬性是通過 props 從父級組件那兒傳遞值過來的，那它一般不應該狀態化。
- 如果一個屬性會隨着時間而改變，那他基本上是需要狀態化的數據！這是評判一個屬性是否爲狀態化數據的一條關鍵標準。
- 如果一個屬性能夠通過其他 props 或 state 計算得出，那它肯定不是 state 。爲了簡單考慮，我們儘可能描述最少的 state 值。
考察每個 state 變量應該放在哪個組件中：
- 對於每一個 state 值，我們都應該從以下幾個方面來考量它屬於哪個組件：
- 確認每個組件在渲染一些結構的時候是基於這個 state 值的。
- 找到所有需要這個 state 值的組件，並且在 DOM 樹找到這些組件的公共父級。
- 無論是公共父級，還是在 DOM 樹中更高級別的父級，都應該擁有這個state值。
- 如果，在 DOM 樹中你找不到公共父級去擁有這個 state 值，那就請創建一個囊括了所有需要這個 state 值的新組件，這個新組件擁有這個 state 值。
- 對於每一個 state 值，我們都應該從以下幾個方面來考量它屬於哪個組件：
硬編碼初始的 state 值
- 對於 react 中的 id 值，我們使用已經在 index.html 中加載的 UUID 這個庫。我們使用
uuid.v4()爲每一個項目隨機生成一個通用的獨一無二的識別碼 （Universally Unique IDentifier） 。 - 使用 id 屬性來判斷一個對象是否已經創建是一種通用的做法。
- 單向數據管道 （one-way data pipeline）：如果 state 值更新了，組件通過調用
render()方法讓相應的 state 值重新渲染。這會相應地觸發它的子組件及孫子級組件等等後輩組件重新渲染。
- 對於 react 中的 id 值，我們使用已經在 index.html 中加載的 UUID 這個庫。我們使用
增加相反的數據流
增加頁面與服務器的交互
