第1種 - 創建組件的方式

> 使用構造函數來創建組件，如果要接收外界傳遞的數據，需要在 構造函數的參數列表中使用`props`來接收；
> 必須要向外return一個合法的JSX創建的虛擬DOM；

創建組件：

JSX
function Hello () { 
  // return null 
  return <div>Hello 組件</div>
}

為組件傳遞數據：

// 使用組件並 為組件傳遞 props 數據
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
 
或
<Hello {...dog}></Hello>// ...是ES6中的擴展運算符
// 在構造函數中，使用 props 形參，接收外界 傳遞過來的數據
function Hello(props) {
// props.name = ‘zs‘ 會報錯
console.log(props)
// 結論：不論是 Vue 還是 React，組件中的 props 永遠都是只讀的；不能被重新賦值；
return <div>這是 Hello 組件 --- {props.name} --- {props.age} --- {props.gender}</div>
}

1. 父組件向子組件傳遞數據

2. 使用{...obj}屬性擴散傳遞數據

3. 將組件封裝到單獨的文件中

4. 註意：組件的名稱首字母必須是大寫

5. 在導入組件的時候，如何省略組件的`.jsx`後綴名：

js
// 打開 webpack.config.js ，並在導出的配置對象中，新增 如下節點：
resolve: {
extensions: [‘.js‘, ‘.jsx‘, ‘.json‘], // 表示，這幾個文件的後綴名，可以省略不寫
alias: {
‘@‘: path.join(__dirname, ‘./src‘) // 這樣，@ 就表示 項目根目錄中 src 的這一層路徑

}

}
}
```

6. 在導入組件的時候，配置和使用`@`路徑符號

### 第2種 - 創建組件的方式

> 使用 class 關鍵字來創建組件
>
> ES6 中 class 關鍵字，是實現面向對象編程的新形式；

#### 了解ES6中 class 關鍵字的使用

1. class 中 `constructor` 的基本使用
2. 實例屬性和實例方法
3. 靜態屬性和靜態方法
4. 使用 `extends` 關鍵字實現繼承

#### 基於class關鍵字創建組件

1. 最基本的組件結構：

```jsx
class 組件名稱 extends React.Component {
render(){
return <div>這是 class 創建的組件</div>
}
}

react中創建組件