怎么创建组件

1.怎么创建组件？

import React, { Component } from 'react'

// react组件是一个class类
// 组件需要通过这个类实例化构建

// class App extends React.Component{

// }

class App extends Component{

    constructor(){
        super();
        //定义组件的属性
        this.state = {
            message: 'hello react'
        }
    }

    // 必须实现由父类继承的render函数
    render(){
        //需要向外return组件的dom
        return (
            <div>
                <h1>这是app组件</h1>
                <p>{this.state.message}</p>
                <button onClick={()=>{
                    console.log('点击了');

                    // 修改state
                    this.setState({message: 'hello world'});

                }}>按钮</button>
            </div>
        );
    }
}

// 向外输出app
export default App;

2.React组件也是一个函数

import React, { Component } from 'react'

// react组件是一个函数

function App(){
    // 返回组件dom结构
    return (
        <div id="app">
            <h1>hello react!</h1>
        </div>
    )
}


export default App;