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

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

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

react


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) 了

Summary
[React Js] React 入門 :建立 組件 ( Component )
Article Name
[React Js] React 入門 :建立 組件 ( Component )
Description
在 [前一篇](https://goo.gl/aFVMts) 的 React 的入門教學 裡有提到的 `React Element`,而 `React Element` 其實就是 `React` 組成的元件中的 `最小單位`
Author

Facebook 功能: