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而後回車，瞬間出來模板。