1. 創建組件 + 1. 引入 React 以及 { Component } ```js // 方式一： import React, { Component } from 'react' // 方式二： import React from 'react' class News extends React.Component { } ``` + 2. 使用類的繼承方式構造組件 ```js // 1. 引入 import React, { Component } from 'react' // 2. 創建組件 class Home extends Component { constructor(props) { // 繼承 Component // ES6 中的 super 可以用在類的繼承中，super 關鍵字，它指代父類的實例(即父類的 this 對象). // 子類必須在 constructor 方法中調用 super 方法，否則新建實例時會報錯 // 這是因為子類沒有自己的 this 對象，而是繼承父類的 this 對象，然后對其加工。如果不調用 super 方法，子類就得不到 this 對象 // props 用于父子組件傳值 super(props); // react 定義數據 this.state = { name: '張三', age: 18, userinfo: { username: 'xuxu', age: 23, } } } // jsx render() { return ( <div> <h2>react 所有節點要被根節點包裹起來</h2> <p>這是p標簽 { this.state.name }</p> <span>{ this.state.age }</span> <p>{ this.state.userinfo.username }</p> </div> ) } } // 3. 導出 export default Home; ``` + 3. 導出 2. 使用組件 + 引入組件 ```js import Home from './components/Home' ``` + 直接使用，無需注冊組件 ```html <Home></Home> ```