04.JSX相关概念和原理

我们在前面环境准备的小节，创建了一个项目simple-react，我们现在回过头来看一下，会发现有这样的代码：

root.render(<div>Simple React App</div>);

当然这里面的代码等价于：

const elment = <div>Simple React App</div>
root.render(elment);

有些同学一眼看去会把<div>Hello Simple React App</div>视为html，但事实上呢我们这里的element很多属性都是常规html标签所没有的或者和常规html标签有所差异，举个例子，onClick事件就和普通的html标签表达不一样，也就是说JSX和html是不同的两个东西。那究竟JSX是什么呢？

什么是JSX?

关于这个问题，我们可以在React官方文档上面找到答案： intruducing JSX 文档中有这样的描述：

• JSX is a syntax extension to JavaScript. 翻译过来：JSX是JavaScript的一种语法扩展。大家从字面意思上就可以窥见一些信息，所谓语法扩展，就意味着JavaScript语法本身是不支持JSX的。比如我们在普通的JavaScript程序中编写类似于下面的代码：

const elment = <div>Simple React App</div>

程序是会报错的。那JSX既不是html也不是JavaScript的一部分。那究竟是什么呢？根据本小节对应视频中的案例演示，我们可以知道在React程序中，JSX最终呈现出来的结果就是普通的Javascript代码。那这里JSX到普通Javascript的代码的转化是谁来完成的呢？一般来说，通常大家使用的是babel来完成这个转译的过程，之所以说是通常，就意味着不是绝对，哪怕我们自己写个程序也可以实现这个过程，当然自己写这些代码是没必要的，因为babel已经做得很成熟了。这里我希望大家树立两个观点：

• 如果有成熟的工具，尽可能不去造轮子，避免浪费时间
• 如果有特殊需求，任何成熟工具具备的能力，理论上我们都可以实现，不存在完成某项工作非某个框架不可的情况 对babel不了解的同学呢，可以参阅babel的官方文档。

上面我们在自己的项目SimpleReact中查看了编译的结果，但是需要进行启动项目，访问页面等一系列操作，比较繁琐，我们也可以在这个bable官网中的try it out中进行调试。

至于该工具的功能演示可以在视频中观看领会，限于篇幅这里就不赘述。