標籤：lan instagram world book blog png message line babel
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 架構，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了
這個項目本身也越滾越大，從最早的UI引擎變成了一整套前後端通吃的 Web App 解決方案。衍生的 React Native 項目，目標更是宏偉，希望用寫 Web App 的方式去寫 Native App。如果能夠實現，整個互連網行業都會被顛覆，因為同一組人只需要寫一次 UI ，就能同時運行在伺服器、瀏覽器和手機（參見《也許，DOM 不是答案》）。
需要說明的是，React 可以在瀏覽器運行，也可以在伺服器運行，但是本教程只涉及瀏覽器。一方面是為了盡量保持簡單，另一方面 React 的文法是一致的，伺服器的用法與瀏覽器差別不大。
一、HTML 範本使用 React 的網頁源碼，結構大致如下。
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body></html>
上面代碼有兩個地方需要注意。首先，最後一個 <script> 標籤的 type 屬性為 text/babel 。這是因為 React 專屬的 JSX 文法，跟 JavaScript 不相容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先載入。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 文法轉為 JavaScript 文法，這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘));
三、JSX(Javascript XML syntax transform) 文法
HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX文法。JSX 是 Javascript 代碼裡直接寫XML的文法。
var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; ReactDOM.render( <div style={{color: ‘#f00‘, height:‘40px‘, lineHeight: ‘40px‘}}> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById(‘example‘) );
上面代碼體現了 JSX 的基本文法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。
JSX 允許直接在模板插入 JavaScript 變數。如果這個變數是一個數組，則會展開這個數組的所有成員
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById(‘example‘));
上面代碼的arr變數是一個數組，結果 JSX 會把它的所有成員，添加到模板，運行結果如下。
React 允許將代碼封裝成組件（component），然後像插入普通 HTML 標籤一樣，在網頁中插入這個組件。React.createClass 方法就用於產生一個組件類.
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; }});ReactDOM.render( <HelloMessage name="John" />, document.getElementById(‘example‘));
上面代碼中，變數 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動產生 HelloMessage 的一個執行個體（下文的"組件"都指組件類的執行個體）。所有組件類都必須有自己的 render 方法，用於輸出組件。
注意，組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標籤，否則也會報錯。
var HelloMessage = React.createClass({ render: function() { return <h1> Hello {this.props.name} </h1><p> some text </p>; }});
上面代碼會報錯，因為HelloMessage組件包含了兩個頂層標籤：h1和p。
組件的用法與原生的 HTML 標籤完全一致，可以任意加入屬性，比如 <HelloMessage name="John"> ，就是 HelloMessage 組件加入一個 name 屬性，值為 John。組件的屬性可以在組件類的 this.props 對象上擷取，比如 name 屬性就可以通過 this.props.name 讀取。運行結果如下：
添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
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
