实质：

JSX 其实就是 JavaScript 对象。

直接上代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (
      <div>
        <h1 className='title'>React 欢迎你</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)

babel通过插件plugin-transform-react-jsx转译后的代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: 'title' },
          "React 欢迎你"
        )
      )
    )
  }
}

·React.createElement ·会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签、属性、子元素。

它的参数有三个：
1、type -> 标签
2、attributes -> 标签属性，没有的话，可以为null
3、children -> 标签的子节点

然后通过ReactDOM.render功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上。

所以图示jsx就是：

image.png