使用 React 前須知道，何謂模組

在 React 裡很強調模組化，把功能細分成一個個模組，再把它們匯入至上層模組組合起來，所以不同模組間也不容易出現衝突，當其中一個模組出錯也不影響到其他模組。

模組意思：

模組是一段可重複使用的程式碼，他可以輕鬆地被整合進既有的程式，而不產生變數的命名衝突，JavaScript 的模組會被整合成獨立的檔案，ES6 的模組系統使用上相當簡單，各模組有自己的獨立的作用域，所以你必須指示要在應用程式中匯入或輸出哪一些模組。

模組使用：

1. ES6 的模組的分隔原則是一個檔案一個模組，但也可以一個檔案匯出多個 JavaScript 物件。
2. ES6 模組使用 export 進行輸出，與 import 語句來進行匯入。通常匯入語句位於程式碼檔案中最前面，輸出則可以位於識別名稱處，或是位於程式碼檔案最後。

匯出兩個函式：

export const print = (message) => log(mesage, new Date());
export const log = (message, timestamp) =>
  console.log(`${timestamp.toString()}:${message}`);

export 關鍵字可用來匯出任何 JavaScript 中的資料型別，只有被 export 的物件才會變為公開，其他程式碼檔案才可以匯入並使用，沒有 export 的物件只能在原來檔案使用。 如果只想匯出唯一的一個主要模組，可以使用 export default。

完成模組後，可以透過 import 關鍵字將其導入上層的程式碼中。如果使用在檔案內有多個 export 語法，那麼可以透過物件解構的語法導入，如果使用 export default 語法，則可以使用任意變數名稱匯入檔案內。

撰寫注意事項:

1. 不要使用萬用符(*)作匯入模組。(Airbnb 10.2)
2. 從一個位置只作一次匯入。(Airbnb 10.4)
3. 匯入語句都放在程式碼檔案中其他語句的上面。(Airbnb 10.7)
4. 不要輸出可以改變的識別名稱(變數)，類別與函式要小心被重新指定。(Airbnb 10.5)
5. 如果在一個模組只需要單一個輸出，優先使用預設(default)輸出的語法。(Airbnb 10.6)