前置技能：Chrome瀏覽器
一.拿糖：React的使用
React v0.14 RC 發布，主要更新項目：
兩個包: React 和 React DOM
DOM node refs
無狀態的功能組件
棄用 react-tools
編譯器優化
吃糖：開門見山，上代碼。
<!DOCTYPE html>
<html>
<head>
<title>zqz_JSX_demo</title>
<script type="text/javascript" src="../lib/react-0.13.4.js"></script>
<!-- <script type="text/javascript" src="../lib/react-0.14.0.js"></script> -->
<script type="text/javascript" src="../lib/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script type="text/jsx"> React.render( <h1>Hello World!</h1>,
document.getElementById("example"), function(){ console.log("OK!") } ) </script>
</html>
react-0.13.4.js 使用：瀏覽器控制台顯示沒問題：
如果換成react-0.14.0.j的話，控制台顯示：
頁面上雖然可以顯示，但是會有提示：React.render是被廢棄的。建議使用react-dom.js中的ReactDOM.render來代替。
so,我們就用react-dom.js來弄。
<!DOCTYPE html>
<html>
<head>
<title>zqz_JSX_demo</title>
<!-- <script type="text/javascript" src="../lib/react-0.13.4.js"></script> -->
<script type="text/javascript" src="../lib/react-0.14.0.js"></script>
<script type="text/javascript" src="../lib/react-dom-0.14.0.js"></script>
<script type="text/javascript" src="../lib/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script type="text/jsx"> ReactDOM.render( <h1>Hello World!</h1>,
document.getElementById("example"), function(){ console.log("OK!") } ) </script>
</html>
這下控制台清凈了。
二.知識點
JSXTransformer.js：他的作用是將 JSX 語法轉為 JavaScript 語法。以便瀏覽器可以執行。但是這部比較消耗時間，一般放在服務器端執行。（具體怎么耗時間，是個什么概念，我還不知道）
當然我們可以不用JSX,React本來就是JS。
那什么是JSX：在 JavaScript 代碼里寫着 XML 格式的代碼稱為 JSX。
所以上面的代碼亦可以改成：
<script type="text/javascript"> ReactDOM.render(React.createElement( "h1", null, "Hello World!" ), document.getElementById("example"), function () { console.log("OK!"); }); </script>
記得將text/jsx改成text/javascript。
所以很多人說JSX的實質是個語法糖。
三.拆糖：如何將JSX轉換成JS代碼。
>1.我們可以通過babel工具轉換成JS代碼。
>2.安裝react-tools轉換工具
npm install -g react-tools
運行：
生成build文件，如圖：
如果不知道怎么使用這個工具：jsx -h
第一行就是使用格式：Usage: jsx [options] <source directory> <output directory> [<module ID> [<module ID> ...]]