[ Day 06 ] Function Component

今天要跟大家介绍的是 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
如果有任何问题都非常非常欢迎提出和指教唷～
那我们下篇见ʘ‿ʘ