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> ```