標籤：des style blog http color io ar for 檔案
通常我學一門程式設計語言都是先從“hello world!”開始，React也不例外。
首先搞清楚React的運行方式，有2種，
第一種：jsx文法糖直接編寫在HTML中，這樣不用離線轉換jsx了。看下代碼：
<!DOCTYPE html><html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title></title></head><body><div id="example"></div><script type="text/jsx"> /** @jsx React.DOM */ React.renderComponent( <h1>hello,world!</h1>, document.getElementById(‘example‘) ); </script></body><script src="js/jsx/react.js"></script><script src="js/jsx/JSXTransformer.js"></script></html>
這段代碼就是jsx的寫法，當執行之後頁面展示如下：
並不複雜，很簡單,renderComponent()函數執行個體化根組件、啟動架構和注入標記成一個原始的DOM元素,作為第二個參數提供。有2個參數，第一個為jsx指令碼（類似html模板，由JSXTransformer.js將其轉換為標準js，再由瀏覽器render 為html）,第二個選擇的DOM對象，讓第一個參數插入到選擇的DOM對象中去,renderComponent()相似於jQuery中的$(document).ready(),都是初始化載入操作，但React沒有用到Jquery的封裝，完全自己實現的機制。在renderComponent()函數中，對參數做了多次的判斷邏輯，比如說參數是不是Object對象，參數是不是function類型，第一個參數中的props屬性是否為空白字串等等。。。
看下源碼就可以瞭解到renderComponent()函數的實現機制了，
renderComponent: function(nextDescriptor, container, callback) { ("production" !== "development" ? invariant( //這裡判斷參數nextDescriptor是否是object對象，返回的是ture或false ReactDescriptor.isValidDescriptor(nextDescriptor), ‘renderComponent(): Invalid component descriptor.%s‘, ( //這裡判斷參數nextDescriptor是否是函數,isValidFactory返回的是類型 ReactDescriptor.isValidFactory(nextDescriptor) ? ‘ Instead of passing a component class, make sure to instantiate ‘ + ‘it first by calling it with props.‘ : // Check if it quacks like a descriptor //這裡判斷參數nextDescriptor屬性中的props屬性是否為空白字串 typeof nextDescriptor.props !== "undefined" ? ‘ This may be caused by unintentionally loading two independent ‘ + ‘copies of React.‘ : ‘‘ ) ) : invariant(ReactDescriptor.isValidDescriptor(nextDescriptor))); var prevComponent = instancesByReactRootID[getReactRootID(container)]; if (prevComponent) { var prevDescriptor = prevComponent._descriptor; if (shouldUpdateReactComponent(prevDescriptor, nextDescriptor)) { return ReactMount._updateRootComponent( prevComponent, nextDescriptor, container, callback ); } else { ReactMount.unmountComponentAtNode(container); } } var reactRootElement = getReactRootElementInContainer(container); var containerHasReactMarkup = reactRootElement && ReactMount.isRenderedByReact(reactRootElement); var shouldReuseMarkup = containerHasReactMarkup && !prevComponent; var component = ReactMount._renderNewRootComponent( nextDescriptor, container, shouldReuseMarkup ); callback && callback.call(component); return component; }
這裡調用了很多個封裝的函數進行處理，renderComponent()函數就是進入React的第一個入口。
接下來用建立一個組件方式來寫“hello,world!”
<!DOCTYPE html><html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><div id="example"></div><script type="text/jsx"> /** @jsx React.DOM */ var CommentBox = React.createClass({ render:function(){ return ( <h1 className=‘hcolor‘> hello,world! </h1>); } }); React.renderComponent( <CommentBox />, document.getElementById(‘example‘) ); </script></body><script src="js/jsx/react.js"></script><script src="js/jsx/JSXTransformer.js"></script></html>
在這段代碼中，我用createClass()函數進行自訂群組件的建立，其實所謂建立組件是官方說法，最終建立出來的就是DOM元素，只不過這裡進行動態產生的機制，感覺更靈活。至於組件的內容還有進階組件的建立後期再分享。
註：這裡有個細節，當在render中返回DOM元素的時候，設定css樣式用className才生效，如果想直接加入style屬性，無效並且頁面也不展示DOM元素！
在頁面展示如下：
以上介紹了第一種編程方式 接下來想把頁面中的js抽取出來單獨的js檔案並引用，這樣就需要下面的方式了；
第二種：jsx離線轉換方式，在React官方網站已經詳細說明了，
首先安裝命令列工具(要求npm):
npm install -g react-tools
如果你的npm 運行串連失敗，請設定一下npm的代理：
設定代理的命令: npm config set proxy=http://127.0.0.1:8087
npm config set registry=http://registry.npmjs.org
在cmd中操作一下即可,下面就是構建本地建立的js
jsx --watch src/ build/
這裡src是目錄，你可以自己定義，操作完就可以單獨引用js進行操作了。
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
