react组件写法

头部需要引入react，component以及reactdom

import React , {Component} from 'react'
import ReactDom from 'react-dom'

下面的语法是jsx：

class Header extends Component {
  render () {
    const n=1;
    return (
      <div>
        {n>0?<span> 有（ {n} ）条未读消息</span>:<span>没有未读消息</span>}
      </div>
    )
  }
}

记住几个点：

1、JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。

2、React.js 可以用 JSX 来描述你的组件长什么样的。

3、JSX 在编译的时候会变成相应的 JavaScript 对象描述。

4、react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

赏

谢谢你请我吃糖果

微信