react之第一個組件的定義及使用

//header.js

import  React from "react"; //"react"，如果r寫成大寫的話，瀏覽器里會出現警告
//如果不寫export default，外部將訪問不到
export default class ComponentHeader extends React.Component{ //class名開頭必須大寫
  render(){ //render解析類的輸出
    return(
      <header>
        <h1>我是頭部</h1>
      </header>
    )
  }
}

//footer.js

import React from "react";
export  default class ComponentFooter extends React.Component{
  render(){
    return(
      <footer>
        <h1>我是底部</h1>
      </footer>
    )
  }
}

//其它的js里引用header.js組件

import ComponentHeader from "./header"
import footer from "./footer"
import ReactDOM from "react-dom"
class Index extends React.Component{
  render(){
    //可用參數的形式引用組件
    let head=''
    //可加判斷條件
    if(1===1){
      head= <ComponentHeader/>
    }else{
        head= <footer/>
    }
    //每個return里只能返回一個節點多個會報錯
    return(
      <div>
        {head}
        {/*<ComponentHeader/>*/}
        <footer/>
      </div>
    )
  }
}
ReactDOM.render(<index/>,document.getElementById('entry'));//往整個項目里做綁定,entry是項目入口的html里的id值