JSX 新手上道

本文已参与「新人创作礼」活动，一起开启掘金创作之路

理解下来，JSX就是封装起来了一个方法。可以直接写html元素，而不用自己写DOM的createElement一步步去操作了。 一开始有点难以理解，多敲几遍其实非常好上手

//class创建一个组件，方便以后复用、嵌套
class Xx1 extends Component{
//render渲染
render(){
return(
//return里面直接写html元素，也可以直接使用组件<Xx2/>，还可以写表达式{xxx}，{xxx}可以写任何js代码
)
}
}
//最后把这个类Xx1插入页面上
ReactDOM.render(
  <Xx1/>,document.getElementById('某页面标签')
)

正经造房子代码

//例子，建房子

class House extends Component {
  render(){
    return(
      <div class="house">
        大房子
        <Room/>
        <Bathroom/>
      </div>
    )
  }
}

class Room extends Component {
  render(){
    return(
      <div class="room">
        房间
        <Man/>
        <Dog/>
      </div>
    )
  }
}

class Bathroom extends Component {
  render(){
    return(
      <div class="bathroom">洗手间</div>
    )
  }
}

class Man extends Component {
  render(){
    return(
      <div class="man">人</div>
    )
  }
}

class Dog extends Component {
  render(){
    return(
      <div class="dog">狗子</div>
    )
  }
}
ReactDOM.render(
  <House/>,document.getElementById('root')
)