JSX到JavaScript的转换

可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句，例如return <div>hello</div>。

其实这种语法就是JSX，它实际上是一种语法糖。我们想“All-in-JS”，但是无奈HTML那样的标签语法更适合表示界面的结构与层次，于是人们便想出了JSX这种方法，即在JS中写标签，但是实际上最终编译时又会被转换为JavaScript。

那么，被转换成的JavaScript代码是怎样的呢？我们可以通过Babel提供的repl环境一探究竟。

从上图可以看出，从JSX转换为的JavaScript代码，有点像document.createElement方法，第一个参数都是所要创建的元素的tag值。

第二个参数就是我们传给元素的props值了，在生成的JS代码中，是以一个普通对象，以键值对的方式存在。

这个时候我们可以往div标签中再嵌入一个span标签看看会生成怎样的代码。

可以看出，新嵌入的标签转换为JavaScript后变成了第三个参数，同时这个参数也是递归定义的。

如果我们往div标签内嵌入多个标签，结果就是参数会相应的增加。在React.createElement内，会把从第三个参数开始的之后所有参数放进一个数组，然后作为父元素的children来处理。

学习React的时候都知道，若要使用自己定义的组件必须首字母大写，至于原因我们也能从转换后的JavaScript代码中看出。

我首先定义了一个Foo组件并将其嵌入div标签中，可以看见Foo组件所对应的React.createElement方法的第一个参数不是一个字符串而是Foo组件本身。

若我将Foo改成foo，则第一个参数会变回字符串"foo"。

目前的Babel是将首字母是否是大写作为判断自定义组件的依据。大写的就是自定义组件，小写的则是原生标签。