在了解什麼是render後，傑森從React官網看到另一個範例，有段文字這樣寫道:

Component 使你可以將 UI 拆分成獨立且可複用的程式碼

什麼是 Component

Component顧名思義是組件的意思，每個Compoment可以是獨立的、可拆分的、可重複利用的。若以車子做比喻，輪子可以成為Compoment，車門也可以是Component(不過需要注意的是，輪子之間沒有差異性但車門有)

來看看以下兩段程式碼：

//類別型元件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

//函式型元件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

傑森看到後心想：這不是class和function嗎?又是很熟悉的程式碼，難不成這個玩意兒也可以用來當成內容輸出?是的，在React的世界裡，Component分為類別型(Class)與函式型(Function)，兩個基本上是一樣的，不過若要使用React 16.8 版本後的 hooks功能，就必須使用函式型元件。另外，props代表的是傳遞參數，除了內置預設參數，React可以透過在組件上指定自訂名稱的參數，傳遞到Component內層並使用，以下我們使用Function Component來做說明。

建立Component

我們來看看下面這段：

//建立Component
function Welcome(props) {
  return (
    <h1>
      Hello, My name is {props.name}. I am {props.age} years old.
    </h1>
  );
}

傑森這時看著教學，嘗試建立了一個名叫Welcome的函式型Component後，他在另外宣告一個element的變數，為了能夠動態地把花括號裡的值換成名字與年齡，在元件上設定參數用來做傳遞，結果如下:

//將props變數帶入Component
const element = <Welcome name="Jason" age="30" />;

看似都沒問題後，接著就是將內容輸出到畫面了。

用Componet渲染到畫面

來看看最後一段程式碼：

//渲染元件
ReactDOM.render(element, document.getElementById("root"));

回顧剛剛傑森宣告了element，賦予成為Component及用來傳遞參數，完成程式碼後，結果如同想像般呈現：

此時傑森心想，原來可以使用Javascript建立Component來呈現內容，透過拆分建立多個Component，也可以使之成為頁面的一部分。用MVC架構說明，Component是View的一部分，經由Controller判斷對應的View，再透過render就成為看到的畫面。除了能夠將Component做拆分，我們也可以把程式做拆分放入不同的Component，作為模組開發使用。在Javascript還沒有內建支援模組語法前，雖然可以使用CommonJS與AMD模組系統，但需要透過其他工具來轉換，直到es6後有了import/export後，Javascript也可以透過原生的方式來進行模組化開發，這也是現今Javascript為何在龐大的程式碼中可以做到有效地管理。

明天我們來聊聊Server side render與Client side render的原理與特性，也算是在實作之前的暖身，我們明天見!