6月1日react的使用

最後更新：2016-06-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

React的使用與JSX的轉換前置技能：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> ...]]

6月1日react的使用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More