這是《玩轉 React》系列的第三篇，看到本篇的標題，瞭解過 React 的同學可能已經大致猜到我要講什麼了，本篇中要講的內容對於剛接觸 React 的同學來說，可能有些難以接受，但希望你能堅持學下去，這是 Facebook 的前端大神們為前端開發做出的革命性創新。
React 第一印象
廢話不多說，先看一段程式碼：
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);複製程式碼這是從 React 官網首頁貼上過來的一段示例程式碼，簡單解釋一下，這段程式碼實現了一個名為 HelloMessage 的元件，它接收一個 name 屬性，可以在頁面上展示出 Hello xxx。ReactDOM.render 是用來將某個元件渲染到頁面的某個 DOM 節點上。
在之後的文章中，我們會詳細講解如何建立 React 元件以及如何開發一個完整的 React 專案。現在，我更想跟大家探討的是，你看了上述這段程式碼，算是對 React 有了第一印象，內心是怎樣的感受？
我相信，很多人第一次看到這樣的程式碼時的感受都是：“我擦，這是什麼玩意兒，HTML怎麼都寫到JavaScript程式碼裡去了，展示與業務邏輯分離，這都不懂？”，說實話，這就是我當時真實的內心感受。很幸運我堅持了下去，並一直用到現在，現在我對 React 的感受是：“我擦，好爽，好牛逼”。
剛開始有這種想法很好理解，好多人像我一樣被“展示要與業務邏輯分離”這句話洗腦太久了，其實，這句話真正發揮價值的時候，是在 MVC 開發模式出現之前，那時候 web 程式邏輯很簡單，可能頁面開始處是連線資料庫，查詢資料，接在下面就是 HTML 程式碼來展示查詢結果了。如果你瞭解一點 PHP，在 PHP 檔案的開始處有個 <?php 結尾處可能有個 ?>，這就是那個年代用來分隔 PHP 程式碼和 HTML 程式碼的。但是隨著 web 程式邏輯越來越複雜，業務邏輯程式碼跟 HTML 程式碼混到一起就變得越來越難以維護，所以就有了 MVC 開發模式。
並不是說現在“展示要與業務邏輯分離”這句話已經不適用於現在的 web開發，我想說的是，我們看問題，要回歸問題的本質，我們要不要接受 React 的這種寫法，判斷依據應該是基於 React 的這種寫法有沒有讓我們的前端程式碼變得更清晰、易維護性更強，而不是 JavaScript 中是不是寫了類似於 HTML 語法的東西，千萬不要為了分離而分離。
其實只是給JavaScript加了點糖 – JSX
上面這種在 JavaScript 中寫類似 HMTL 程式碼的語法被稱為 JSX。你可以理解為擴充套件版的 JavaScript。顯然，這種語法在瀏覽器環境中是不能執行的，所以在程式碼載入到頁面中之前，我們需要通過工具將它轉譯成標準的 JavaScript 語法，就像我們現在為什麼可以用 ES6 的語法一樣，儘管目前瀏覽器對它支援得還不好。例如下面這兩段程式碼，實際上是等價的。
JSX 語法：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);複製程式碼由上面程式碼轉譯而來的標準 JavaScript 語法：
const element = React.createElement(
`h1`,
{className: `greeting`},
`Hello, world!`
);複製程式碼是不是感覺 JSX 語法更直觀，寫起來更簡潔？所以說 JSX 實際上是 React.createElement(component, props, ...children) 的語法糖。
如果你熟悉 HTML，那麼 JSX 對於你來說是沒有任何壓力的，因為 HTML 中的所有標籤，在 JSX 中都是支援的，基本上沒有學習成本，只有如下幾點略微的不同：
- class 屬性變為 className
- tabindex 屬性變為 tabIndex
- for 屬性變為 htmlFor
- textarea 的值通過需要通過 value 屬性來指定
- style 屬性的值接收一個物件，css 的屬性變為駝峰寫法，如：backgroundColor。
在上一篇中，我們有提到元件，實際上，我們可以把在 JSX 中寫的 HTML 標籤看作是 React 內部已經實現了的基礎元件。在下一篇中我將詳細為大家介紹如何利用這些基礎元件來創造一個新的元件，也就是上一篇提到的 React 所提供的建立一個新的 HTML 標籤的能力。
寫在最後
這篇文章的主要目的是希望大家對 JSX 有個基本的印象，我瞭解到有很多同學就是因為看了一眼 JSX 的語法就放棄繼續看下去了。真的很遺憾……
這裡我還想跟大家分享一個個人經驗，簡單說就是保持謙虛，就像賈伯斯說的那樣：“Stay hungry，Stay foolish.”。
當你接觸到一個新的框架、新的技術時，當它與你已有的經驗產生衝突的時候，覺得它設計得垃圾的時候，千萬不要著急吐槽。尤其是對一些相對還比較流行的框架或技術，更是如此。你要相信，那些框架的設計者的技術能力和工程經驗，遠在你之上，你覺得不爽的地方，你覺得他們就真的沒有考慮到嗎？認真去思考框架設計者在設計這套框架時候的心路歷程，認真去學習別人在這個框架上的最佳實踐，結果往往都會出乎你的意料。
類似的，當你發現框架確實在某方面的能力有所欠缺的時候，不要著急去造輪子，先去社群搜尋下，你遇到的問題，可能別人早已經討論了很久，並有了相當不錯的解決方案，就算沒有，這個過程也能給你很多啟發。
切身體會，屢試不爽，望君受用，謝謝大家。
PS：本系列的所有文章將在 segmentfault 和 掘金同步釋出。
本作品保留所有權利。未獲得許可人許可前，不允許他人複製、發行、展覽和表演作品。不允許他人基於該作品創作演繹作品 。