標籤：microsoft .com 允許 att web 展開 核心 html標籤 版本
渲染這倆字可能在很多地方都見過。但可能不太理解是啥意思。 那麼首先我們來理解一下渲染。 渲染 我覺得這樣理解比較通俗。 我們做一個汽車，開始是沒有噴漆的（沒有css） 只是些框架構架（HTML標籤）。那麼網頁載入就是首先載入完HTML元素，其次是css，css去遍曆渲染每個對應元素的樣式讓其看起來就是我們所想看到的效果一樣。不同瀏覽器的渲染方式不一樣，渲染機制也不一樣。 簡單來將一個完整的HTML頁面渲染完成是有2個東西的。一個HTML元素載入完成，一個是CSS樣式載入完成。其次才是JS，如果JS寫在頁面頂部在css元素載入之前 那就會在其執行完後在執行後面的渲染，會讓頁面的載入斷斷續續。所以現在很多JS都是建議放在頁面之前 而不是在header裡。更不能放在樣式載入之前。 為什麼要說渲染呢，我認為ReactJS就是渲染器。 |
下面我們來說一下如何入門。首先要做的是下載檔案。你可以去官網下載最新版本
http://facebook.github.io/react/
首先我們要匯入三個庫（實際路徑以自己檔案為準）
<script src="js/react.js"></script><script src="js/react-dom.js"></script><script src="js/browser.min.js"></script>
react.min.js 是 React 的核心庫。
react-dom.js提供與 DOM 相關的功能。
browser.js 的作用是將 JSX 文法轉為 JavaScript 文法。
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 文法擴充。
我們不需要一定使用 JSX，但它有以下優點：
<div id="example"></div>
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘));
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
我們可以在以上代碼中嵌套多個 HTML 標籤，需要使用一個 div 元素包裹它，執行個體中的 p 元素添加了自訂屬性 data-myattribute，添加自訂屬性需要使用 data- 首碼。
上面代碼將一個 h1 標題，插入id為example中.
運行結果：
獨立檔案
我們也可以將React JSX 代碼寫在一個獨立檔案裡，例如我們建立一個 helloworld_react.js 檔案，代碼如下：
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘));
然後可以在HTML中引入
<body> <div id="example"></div><script type="text/babel" src="helloworld_react.js"></script></body>JSX 文法
JSX的文法，它允許 HTML 與 JavaScript 的混寫。
遇到 HTML 標籤（以 < 開頭的），就用 HTML 規則解析；遇到代碼塊（以 { 開頭的），就用 JavaScript 規則解析。
var names = [‘lisi‘, ‘wanger‘, ‘zhangsan‘]; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById(‘example‘) );
JSX 允許直接在模板插入 JavaScript 變數。如果這個變數是一個數組，則會展開這個數組的所有成員。上面程式運行結果如下
組件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。因為原生 HTML 元素名以小寫字母開頭，而自訂的 React 類名以大寫字母開頭另外，組件類只能包含一個頂層標籤，否則也會報錯。
組件的用法與原生的 HTML 標籤完全一致，如果我們需要向組件傳遞參數，可以使用 this.props 對象。以上執行個體中 name 屬性通過 this.props.name 來擷取。
複合組件我們可以通過建立多個組件來合成一個組件，即把組件的不同功能點進行分離。
以下執行個體我們實現了輸出網站名字和網址的組件：
var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); }}); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); }}); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); }});
ReactDOM.render( <WebSite name="部落格園" site=" http://www.cnblogs.com" />, document.getElementById(‘example‘));
執行個體中 WebSite 組件使用了 Name 和 Link 組件來輸出對應的資訊，可以理解為 WebSite 擁有 Name 和 Link 的執行個體。
以上就是RejectJS入門基礎，看懂就可以繼續深銳學習了。
其實學習ReactJS的要求並不高。有HTML5，CSS和JavaScript的基礎就可以了
ReactJS入門基礎
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
