標籤：
和AngularJS相比，上手React簡單到讓人震驚。
在引入React庫之後，開發API就通過React對象暴露出來了。我們要做的、能做的，就是：
在虛擬DOM上建立元素，然後將它們渲染到真實DOM上。
在範例程式碼中使用了React對象的兩個方法：
參數type用來指定要建立的元素類型，可以是一個字串或一個React組件類型。當使用 字串時，這個參數應當是標準的HTML標籤名稱，比如：p、div、canvas等等。
參數props是可選的JSON對象，用來指定元素的附加屬性，比如樣式、CSS類等等。 我們在樣本中簡單的設定為null。
從第三個參數children開始的所有參數，都被認為是這個元素的子項目。考慮到 虛擬DOM好歹也是DOM，容易理解React需要通過這些子項目參數，讓我們可以構造虛擬DOM樹：
這個時候上述的方法只是一個虛擬dom，怎麼吧這個虛擬Dom渲染到真實的Dom上，我們需要調用render這個方法，這個方法裡面有三個參數（element,container,callback）
參數element是我們使用createElement()方法建立的React元素，注意，不是HTML元素！
參數container是真實DOM中的HTML元素，作為渲染的目標容器，它的內容將被render()方法 的執行改變。
callback參數是可選的函數，當渲染完成或更新後被執行，通常我們不用它。(這個方法一般我們不會調用)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello React!</title><!--1.引入React庫--><script src="js/react.min.js"></script><style>p{font:italic bold 50px verdana;}</style></head><body><!--2.在真實DOM上定義容器--><div id="content"></div><script>// 第一個參數就是普通的html元素，也可以是React組件。第二個參數可以是json資料，第三個參數就是這個元素的子項目//var el2 = React.createElement("p",null,"HELLO FXR");//3.在虛擬DOM上建立p元素//var el = React.createElement("p",null,"Hello React!");var el2 = React.createElement("table",null,React.createElement("tr",null,"ID"),React.createElement("tr",null,"NAME"),React.createElement("tr",null,"SEX"),React.createElement("br",null,""),React.createElement("tr",null,"1"),React.createElement("tr",null,"airycode"),React.createElement("tr",null,"男"));//4.將虛擬DOM上的p元素渲染到真實DOM上的#content容器//React.render(el,document.querySelector("#content"));React.render(el2,document.querySelector("#content"));</script></body></html>
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
