【react】对JSX的理解

1.JSX是什么东西？

JSX其实就是Javascript的扩展语法，长得像HTML但是并非是HTML

2.为什么要用这种语法？

虽然HTML信息和JS所包含的结构信息是一样的,但是对象写起来太长，也没有HTML更清楚的看清结构，于是React.js将javascript的语法进行了扩展，让js语言支持类似HTML结构的语法，编译过程会将JSX变成js对象。
HTML：

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

js对象：

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

3.经过怎么样的转化编号才能页面元素？