react 帶來了新的語法，JSX。是一個看起來像XML的JavaScript語法擴充套件。
有些同學因為不喜歡或不習慣JSX語法，而拒絕學習React。有人覺得JSX看起來太怪異了，但是我覺得JSX是一個偉大的嘗試，是科學進步的表現，我們不應該對他有任何偏見。
我們從渲染的歷史角度解釋一下JSX的前瞻性
渲染的歷史
html 與指令碼混合
在asp年代和php早期，人們的程式碼都是html和指令碼混合的就像這樣子
<?php $name = "world"; ?>
<h1>Hello <?php echo $name; ?></h1>這種程式碼的優點是簡單。但是缺點是非常難以維護，專案一旦稍微複雜一點，維護它將是一個噩夢，這也決定了這種方式是寫不出複雜專案的。所以後來誕生了 MVC 模式的開發方式
MVC 模式
MVC 模式將 view 與邏輯分離了，view 只關心怎麼輸出變數。這種分離方式使得專案維護性和易用性大大的增強了，並且使得專案更加的規範化。
模板語言
MVC 使 view 與邏輯分離了，但是輸出變數還是不方便，所以各種各樣的模板語言誕生了，比如什麼 Smarty、Twig、Haml、Liquid、Mustache等等，都是為了更好的去渲染模板。這個時候利用模板引擎可以在一定程度上實現元件化了。不過這種元件化只是字串拼接級別的元件化而已。
前端渲染
隨著前端開發的高速發展，前端渲染慢慢登上歷史舞臺。MVC 模式中的 view 也慢慢的退化，而後端慢慢的演變成了api服務。
前端渲染直接就出現了各種的前端模板引擎，如underscore、Mustache、artTemplate等基於字串的模板。另外 angular、vue等框架也創造了基於DOM的模板引擎。目前相信很多前端開發的人都已經習慣了這種模板開發方式。
JSX
那麼，渲染的歷史先進行到這裡，我們回過頭來看看JSX。我們看看JSX的語法，乍一看，它好像回到瞭解放前的那種 html和指令碼混合 的模式。
const Hello = props => {
const name = `world`;
return <h1>Hello {{name}}</h1>
}
但是事實上真的是倒退的發展嗎？如果真的是倒退的發展，為什麼 React 這個框架在最終不但沒有死掉，而且還火起來了呢？這裡一定是有原因的。
核心變化
我們縱觀渲染的歷史發展，他們都有一個共同的特點，都是以 html 為中心，在 html 輸出變數，在 html 中嵌入條件判斷與迴圈。無論是指令碼混合，模板語言，DOM模板，他們都是圍繞著 html而進行的。
而 JSX 是以 js 為中心，在 js 中嵌入 html，是對js的擴充套件。js是一門指令碼語言，本身就是為處理邏輯而生的，在js中嵌入一部分html才是更合理的做法。
以js為中心，最明顯的好處就是，可以更加精確和更加方便的控制輸出，並且 JSX 相當於是基於DOM的一種模板引擎，所以輸出的html更加的符合規範。
JSX的轉換
JSX 的最終是會轉化為 js，試過將html模板編譯為js模板的人就會知道，js模板是遠遠的比html效率高。首先是少了html模板的網路請求，其次是在執行的時候少了編譯的過程，因為在生成js檔案的時候就已經被編譯好了，不會再客戶端浪費資源去編譯。
虛擬DOM
JSX 的最大的好處在於，對虛擬DOM的整合。在渲染的時候，在邏輯中就已經明確的整個應用的結構，這時在記憶體中儲存一個DOM結構，在下次渲染的時候對比原本DOM，只渲染髮生了變化的一部分。有人說因為虛擬DOM 大大的提升了 React 效能。其實不然，我覺得虛擬DOM的渲染方式，跟傳統DOM操作也許會好一點，但是好的並不會非常明顯，因為對比DOM節點也是需要計算資源的。
虛擬DOM最大好處在於方便的跟其他平臺的整合，比如 react-native 就是基於虛擬DOM，然後渲染出了原生控制元件，因為react元件可以對映為對應的原生控制元件。在輸出的時候，是輸出html DOM，還是安卓控制元件，還是IOS控制元件，這是由平臺決定了。
所以 React 有一個口號，就是
Learn Once, Write Anywhere
所以，react 的 JSX 是一個偉大的嘗試，我們應該擁抱 JSX。