[React Js] React 入門 ：建立 組件 ( Component )

在 前一篇 的 React 的入門教學 裡有提到的 React Element，而 React Element 其實就是 React 組成的元件中的 最小單位

上面的 React Element 為 最小單位 的概念，必須要先有個認知

接著將以 組件 ( Component ) 的方式來建立 React Element 的部分進行說明：

React 的 組件 (Component)

剛在前面有提到：

使用 組件 (Component) 的方式來 建立 React Element

我們用程式的方式來定義上面的這句話：

我們使用 建構式 (Constructor) 來 實體化 一個我們要的 React Element 物件

到這邊應該不難理解，如果你對 建構式 (Constructor) 比較沒有概念了話，請參考：[ES6 JavaScript] 類別 (Class) 與 建構式 (Constructor) 的文章

建立 組件 (Component)

重頭戲來了，現在開始進入實作的部分，代碼如下：

//建立建構式

class {組件名稱} extends React.Component {
 //your codding
}

在這裡因為我們要建立的是 React 的 組件 (Component) 的 建構式 (Constructor)，理所當然的我們必須要 繼承(extends) React 裡的 React.Component 的類別

簡單來說我們會需要 React.Component 這個裡面的 方法，包含 運作週期 等等…..

如果你對 類別繼承 比較沒有概念了話，可以參考 : [ES6 JavaScript] 類別繼承（extends）： 父類別 與 子類別 的這篇文章

實際展示：

建立 組件 Component (建構式)：

class MyList extends React.Component{

 rander(){
   return React.createElement('ul', null, 'Hello List');
 } // 注意

}

在這個 組件 (Component) 的 建構式 當中，最後一定要 使用 rander() 的這個方法，回傳 一個 React Element

rander 為 React 組件 （Component）生命週期 的一部分，這部分將在後續說明

將組件 實體化，渲染 到畫面中：

var list = React.createElement(MyList, null, 'Hello List');
  ReactDOM.render(
    list, document.body
  )

之後的部分就跟 前一篇 的 React 的入門教學裡的 React.createElement() 的部分一樣

在 React.createElement() 中帶入 建構式 (Constructor) 時不需要使用 new 來進行實體話，這部分會在 React 中進行處理

這樣就可在畫面中，渲染我們自訂的 React 組件 (Component) 了