React 中的程式碼是由 component 組成，
React 本身的架構設計也圍繞在 component 上，
但不是只有 React ，Angular 、 Vue 這些也都應用元件化的概念來進行開發

component 其實早在 2011 年就被一位叫做 Alex Russell 提出來，
2013 年，React 推出，並且開始落實元件化的開發概念

稍微科普了一下元件化的歷史，我們就可以直接進入正題

來介紹一下元件化這東西吧！

所以元件化到底是什麼？

元件其實就像是一塊一塊的磚頭，我們會用這一塊塊磚頭建成一間房子

在程式開發中，程式碼會隨著專案變得越來越複雜

元件化概念可以將複雜的程式碼拆分成一部份、一部份的小區塊，並且可以重複使用

也因為我們將程式碼變成一個個元件，在維護及開發上也都更便利，易讀性也會相對提升

元件化如何在 React 中落實

在 React 中，我們一開始會分成 function component 以及 class component

目前比較廣泛的是 function component

我們就來看看他們個別是怎麼應用，以及兩者之間的差別吧

function component

我們將每個元件都變成 function，最後再將它們組裝一起

step1. 做出兩個 function component

跟 JS 很像，只是我們會 return JSX (如果還不知道 JSX ，可參考此篇文章)

function Greeting() {
  return (
    <div>hello</div>
  );
}

function User() {
  return (
    <div>Every One!</div>
  );
}

step2. 將 function component 組裝起來

接著我們需要先建立 root ，並在 root 中將 function component 組起來

我們可以把 root 想像成大樹的根，會從這個根長出許多的分支(function component)，最後變成一棵大樹(code)

ReactDOM 是 React 函式庫的一部分，用於處理 DOM 元素的操作及渲染 React 元件

createRoot 是 React 的一個語法，目的在於做出一個 root 的 DOM 元素，並且會將 React 所有程式碼此區塊，需注意的是，這不是 React 中的 component ，它做出來只會是一個空的 div 區塊

render() 我們會將 React 元素放至於裡面，並且渲染在畫面上

React.StrictMode 指的是在開發模式下，會幫我們檢查一下程式碼的錯誤，並且來檢測 API 是否需要更新

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Greeting />
    <User />
  </React.StrictMode>
);

把專案架起來後，我們就可以來瀏覽器看一下：

如此一來，將程式碼透過元件化的方式，讓我們清楚知道程式碼被拆分成幾個元件，在命名上也能清楚知道這個元件的功能是什麼

所以我們在 function component 能了解什麼 JavaScript 的原理？

class ？ function ？

很多人常常會將 function component 誤以為是 class，不過他就只是一個 function

以上面的例子來說，

function Greeting() {
  return "hello"
}

console.log(typeof Greeting) # function

class component

因為目前不太常用，所以我這邊就做簡單介紹

class component 顧名思義就是把程式碼拆分成一個個的 class 元件，最後組裝起來

其實跟 function component 的概念差不多，不過他們還是有不一樣的地方，文末將介紹

我們來看一下 class component 是怎麼運作的

step1. 先做出一個 class component 並且用 export 把它輸出

import React from "react";

export class GreetingComponent extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

export class UserComponent extends React.Component {
  render() {
    return <p>Every One!</p>;
  }
}

Step2. 在 index.js 輸出，並且放置在 root 內

import { GreetingComponent, UserComponent } from "./hello";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <GreetingComponent />
    <UserComponent />
  </React.StrictMode>
);

我們一樣切換到瀏覽器就能看到以下畫面囉：

所以以上兩者有什麼不同？

class component 跟 function component 的相同處在於
兩者都是取自於 ES6 的概念，且都可以接受 props 傳遞
(不過一個是直接當作 function 的參數，一個必須要在 class 中做使用)

不過 class component 本身就會是一個 component，
function component 本身就只是一個普通的 function，並且會回傳一個 React 的 element

元件化的特色

除了重複使用，簡化複雜性以外，元件化還有幾個特色我們剛剛沒有提到

1. 如果需要新增新功能，或修改功能時，使用元件化可以快速的擴展以及修正
2. 程式碼元件化後，開發人員第一次接觸到時，會比較容易理解脈絡及架構
3. 每個元件可以獨立的進行開發作業，互不干擾

由於我們目前所做的比較基本，上述這些特性應該是還沒有碰到，
不過這邊就先提一下給大家看，希望以後開發的時候能夠有共鳴（？