React组件创建的两种方式

一个函数声明组件

function Welcome(props) {
    return <h2>hello,{props.name}</h2>
}
ReactDOM.render(<Welcome name='Welcome'></Welcome>,document.querySelector('#root'))

一个类声明组件
1.React.component是一个基类，使用类声明的组件，必须继承这个基类
2.在render函数中，需要render一个jsx元素
3.组件的名称必须开头字母大写

class App extends React.Component{
    constructor(props) {
        super(props);
    }
    //必须使用render函数 它能将虚拟DOM渲染成真实的DOM
    render(){
         //它会将jsx所接接收的属性转化为单个对象传递到组件，这个对象我们称为props
          return  <h2>App,{this.props.name}</h2>
    }
}
ReactDOM.render(<App name='你好'></App>,document.querySelector('#root'))

---

这里我tm的怎么写呢。
我们可以把类声明的组件单独放在一个js文件里面
然后引入react
import React from 'react'

然后我们粘贴从之前文件里面剪切出来的类组件

class App extends React.Component{
     constructor(props) {
         super(props);
     }
    render(){
           return  <h2>App,{this.props.name}</h2>
     }
 }

然后导出它
export default App;

也可以直接简写为

export default class App extends Component{
    constructor(props) {
        super(props);
    }
    render(){
          return  <h2>App,{this.props.name}</h2>
    }
}

然后还可以直接解构component这样就可以再少些一个react

import React,{Component} from 'react'

// class App extends Component{
//     constructor(props) {
//         super(props);
//     }
//     //必须使用render函数 它能将虚拟DOM渲染成真实的DOM
//     render(){
//          //它会将jsx所接接收的属性转化为单个对象传递到组件，这个对象我们称为props
//           return  <h2>App,{this.props.name}</h2>
//     }
// }

以后可以在安装了插件的情况下直接rcc然后回车，瞬间出来模板。