過去幾天練習中頻繁使用到 import 和 "react"、"react-dom"，今天的課程要來說明這背後所發生的事情。

這篇的 Key words：

• import
• export
• export default
• import naming

為了說明可以比較清楚，先在資料夾裡面做一個 math.js，設定一個變數名稱，並且 export defult：

const pi = 3.1415962;
export default pi;

然後回到 index.js，想要在這邊輸入 math.js 的變數內容，就像是在設定輸入 module 一樣就可以：

import pi from "./math.js";

這樣在 index.js 的 ReactDom.render 裡面這樣做就可以得到 math.js 裡面的 pi 內容：

ReactDOM.render(
  <ul>
    <li>{pi}</li>
  </ul>,
  document.getElementById("root")
);

這邊可以特別留意的是，import 後面不一定要跟原本的變數名稱一樣是 pi，可以設定任何喜歡的名字，只要在後面不要打錯就可以了；原因是在 math.js 裡面設定的是 export default pi;。

如何從其他 js 檔案一次輸入很多東西呢？像是變數、功能。

從剛剛的 math.js 繼續編輯下去，可以多加一個 export：

const pi = 3.1415962;

function doublePi() {
  return pi * 2;
}

function triplePi() {
  return pi * 3;
}

export default pi;
export { doublePi, triplePi };

回去 index.js 編輯 import，加入 doublePi()、triplePi()：

ReactDOM.render(
  <ul>
    <li>{pi}</li>
    <li>{doublePi()}</li>
    <li>{triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

另外需要注意的是，這邊的 doublePi()、triplePi() 不能隨意改變名字，因為這樣 index.js 會沒法從其他檔案中辨識。

最後是前些時候在用 Node.js 時，import 語法不太一樣。
現在我們是用 ES6，所以還是使用 ES6 的語法比較好，雖然這兩個目前看起來是可以正常運作且作用相同，但還是有很多相同作用的語法，但是是特別特定的語法編輯的方式。

Node.js 和 ES6 的 import 比較：

import React from "react";
var react = require("react");

如果想要輸入整個檔案裡面的東西呢？

除了剛剛的方式，也可以用「＊」來表示 all：

import * as pi from "./math.js";

ReactDOM.render(
  <ul>
    <li>{pi}</li>
    <li>{doublePi()}</li>
    <li>{triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

不過這時是會報錯的，console.log 後會發現 pi 是一個內有多個 properties 的 Object：

ReferenceError: co is not defined
{doublePi: ƒ doublePi(), triplePi: ƒ triplePi(), default: 3.1415962}

所以這時應該要改為 as 後面的名稱 + default 或是「 . 」。我這邊是設定為 * as Kitty：

import * as Kitty from "./math.js";


ReactDOM.render(
  <ul>
    <li>{Kitty.default}</li>
    <li>{Kitty.doublePi()}</li>
    <li>{Kitty.triplePi()}</li>
  </ul>,
  document.getElementById("root")
);