1、React元件介紹

　　元件是 React的一等公民，使用React就是在用元件。

　　元件表示頁面中的部分功能

　　組合多個元件實現完整的頁面功能

　　特點：可複用、獨立、可組合

2、React 元件的兩種建立方式

　　2.1 、使用函式建立元件

　　　　函式元件：使用JS的函式（或箭頭函式）建立的元件。

　　　　約定1：函式名稱必須以大寫字母開頭

　　　　約定2：函式元件必須有返回值，表示該元件的結構

　　　　如果返回值為null，表示不渲染任何內容

　　　　function Hello() {

　　　　　　return (

　　　　　　　　<div>這是我的第一個函式元件</div>

　　　　　　)

　　　　}

　　　　渲染函式元件：用函式名作為標籤名

　　　　ReactDOM.render(<Hello />, 掛載點)

　　　　元件標籤可以是單標籤也可以是雙標籤

　　2.2、使用類建立元件

　　　　類元件：使用ES6的class建立的元件

　　　　約定1：類名稱必須以大寫字母開頭

　　　　約定2：類元件應該繼承 React.Component 父類，從而可以使用父類中提供的方法或屬性

　　　　約定3：類元件必須提供 render() 方法，表示該元件的結構

　　　　約定4：render() 方法必須有返回值，表示該元件的結構

　　　　　　class Hello extends React.Component {

　　　　　　　　render () {

　　　　　　　　　　return (

　　　　　　　　　　　　<div>Hello class Component !</div>

　　　　　　　　　　)

　　　　　　　　}

　　　　　　}

　　　2.3、抽離為獨立 JS 檔案

　　　　1、建立Hello.js

　　　　2、在Hello.js 中匯入 react

　　　　3、建立元件（函式或類）

　　　　4、在 Hello.js 中匯出該元件

　　　　5、在 index.js 中匯入 Hello 元件

　　　　6、渲染元件