今天要跟大家介紹的是 React Component 中的 Function Component 。
我們曾經在 Day 02 的時候提及到 React.js 是採用元件式開發為基礎（現在的框架和函式庫多採用類似元件的概念於其中），所以可以發現 Component 是一個非常頻繁使用到的概念和設計。
那就一起來看看這個 Function Component 的概念是什麼吧！

元件 Component

要介紹 Function Component 之前，我們先來了解一下 React 的 Component 究竟是什麼？

元件 Component 能夠將 UI 拆分成獨立而且可以重複利用的程式碼。

透過上面的說明可以了解 Component 的存在是為了將重複出現的功能和邏輯能夠獨立出來，方便我們在製作專案時可以使用該元件在任何的地方，而不需要再重新撰寫一次類似功能的程式碼。像以一般網站開發來說，相同的按鈕或是選單 Navbar 等都可能會應用在不同的頁面裡面。
這樣大家應該能夠明白為什麼 React.js 會使用元件式的開發來當作整個函式庫的核心基礎，因為拆分成元件之後不僅能夠減少重複撰寫的狀況，在功能以及 UI 的更新上也會更加的方便和容易。

知道元件的概念之後，就一起來了解 React.js 中的 Function Component 吧！

Function Component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Function Component 最簡單的範例就是直接撰寫一個 JavaScript 的函式，並且在該函式中帶入 props 的參數之後回傳一個 JSX 撰寫的 React.element 。
所以之所以稱之為 Function Component 的原因，其實就是因為它本身就是一個 JavaScript Function 了。

實際應用 Function Component

寫出一個 Function Component 之後，我們應該要如何將它應用在 React DOM 上使其渲染出畫面呢？

// 自行定義的 Function Component <App>
function App() {
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />
      <p>This is my first React App!</p>
    </div>
  );
}

上方的程式碼是我們自行定義的 Function Component <App>，現在要將該元件加入到 ReactDOM.render() 的函式中進行渲染。

import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

透過上面的程式碼我們可以發現，要使用Function Component <App> 時，一定要先行使用 import 匯入該元件，最後才能在 ReactDOM.render() 中使用。這樣畫面就有顯示出 Function Component <App> 中的內容了！

特別注意

在撰寫元件時請特別注意，Component 的第一個字母一定要大寫，並且該 Component 的名稱也必須和該函式 Function 同名。
如果名稱不一樣的話，就會在 ReactDOM.render() 中產生出引用錯誤的問題發生。這點在撰寫元件的時候一定要特別小心啊！（第一次寫 React.js 就踩到的雷(༎ຶ⌑༎ຶ) ）

關於 Function Component 的介紹就到這邊告一段落，明天我們將繼續介紹另一個 React 的 Component : Class Component
如果有任何問題都非常非常歡迎提出和指教唷～
那我們下篇見ʘ‿ʘ