可能初次接觸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是將首字母是否是大寫作爲判斷自定義組件的依據。大寫的就是自定義組件，小寫的則是原生標籤。