為什麼要用 components ？

如果沒有用 components 的話，幾個簡單的功能全部放在同一個 js 檔案裡會變成超級多行，讓人難以看懂程式碼的原意。

所以 components 讓我們得以把超大一個檔案或是複雜的網頁架構變成較小的幾個 components。

再來是因為已經分成好幾個小 components 了，若是有重複的功能，我們也可以在不同的地方重複使用這些 components。

這是還沒有 components 或任何 function 的樣子：

ReactDOM.render(
  <div>
    <h1>My Favourite Foods</h1>
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  </div>,
  document.getElementById("root")
);

老師的介紹是先把 <h1> 在同一個檔案裡面變成 components：

function Heading(){
  return <h1>My Favourite Foods from function</h1>
}

ReactDOM.render(
  <div>
    <Heading></Heading>
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  </div>,
  document.getElementById("root")
);

所以我們目前可以知道，在這邊用 HTML tag 就可以將 components 叫出來。這邊也可以用 <Heading/> 來取代 <Heading></Heading>。

再來是將 components 分成檔案，集中在某個資料夾的做法。

首先是創一個資料夾叫 components，然後把想要拆開的 components 用檔案分開。這邊一樣是先用 <h1> 當範例。

Heading.jsx：

import React from "react";

/* 先 import React 所以我們才能用 JSX 來寫想要的程式碼。

function Heading() {
  return <h1>My Favourite Foods</h1>;
}

export default Heading;

再來要解決的事是如何讓 index.js 檔案用 Heading.jsx 的程式碼呢？

我們可以用 ES6 import 和 export 功能。在我們想要使用的 component 檔案裡面，加入 export default Heading; 。另外這邊我們不在 Heading 後面加括號 ()，因為這會讓它馬上就被執行：

import React from "react";

function Heading() {
  return <h1>My Favourite Foods</h1>;
}

export default Heading;

再來回到 index.js，告訴它我們在其他地方有 components：

import App from "./components/App";