標籤：
最近項目準備使用React作為前端，主要第一比較火，第二比較小。抽空先來學習一下。
首先下載資源檔：壓縮後不到50KB，是挺小的哦。
其中：react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，react-dom-server.js是服務端渲染dom的功能，react-with-addons是一些外掛程式功能。
好，姑且不管server 和addons，用react和react-dom開始一個嘗試一下,使用官方執行個體：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) ); </script> </body></html>
運行成功不錯：
再看看原始碼：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>，React下載包裡沒有它， 這是啥？
browser.js是babel的瀏覽器版本，babel又是什嗎？
babel 是一個javascript編譯工具，要編譯工具幹什嗎？
再看原始碼<h1>Hello, world!</h1>，這是React的jxs文法，js不認識它，所以要藉助babel把它翻譯成為js識別的代碼。
在看<script type="text/babel"> 這裡指名使用babel，所以要引用browser.js，不然程式無法執行。
好，不想用它怎麼辦？
那就使用原生的js或者編譯過的js:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>react demo</title> <script src="../src/react-0.14.3/build/react.js"></script> <script src="../src/react-0.14.3/build/react-dom.js"></script></head><body> <div id="example"></div> <script type="text/javascript"> ReactDOM.render( React.createElement(‘h1‘, null, ‘Hello, world!‘), document.getElementById(‘example‘) ); </script></body></html>
去掉browser.js， 修改 <script type="text/javascript">。
補充一點：React之前使用 JSXTransformer 來翻譯jsx，其類型為<script type="text/jsx">，從v0.14開始使用babel。babel 不僅可以翻譯jsx，也可以編譯ES，可能babel使用會給react帶來更好的發展，讓我們拭目以待。
React 學習一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
