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而后回车，瞬间出来模板。