在這個網址中，有對react學習資料的彙總。
觀看ReactJS中文基礎視頻教程中關於react的教程，做了如下筆記。
React是由工作在Facebook的優秀程序員開發出來的用於開發用戶交互界面的JS庫，React帶來了很多新的東西如組件化、JSX、虛擬DOM等。其提供的虛擬DOM使得我們渲染組件呈現非常之快，讓我們從頻繁操作DOM的繁重工作之中解脫。瞭解React的人都知道，它做的工作更多偏重於MVC中的V層，結合其它如Flux等一起，你可以非常容易構建強大的應用。
ReactJS官網地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
1. 初識ReactJS
react是一個用於創建可複用，可聚合web組件的js庫。
React用來創建顯示組件，創建好後會按照設計顯示，當組件上面的數據發生改變會使用一種有效的方法來自動更新這些數據。
React框架中使用了ES6的一些用法，這時就需要一些工具去讓瀏覽器支持ES6的一些功能，如Bable，japm，webpack。
爲什麼要用react：
- 組件化，而不是寫一大堆HTML
JS邏輯與HTML標籤緊密相連並且極易理解
angularJS組件示例和reactJS組件示例對比：
//angular
app.directive('messageBox',function(){
return{
restrict:'E',
template:'<div>\
<h1 ng-click="alert()">你好世界！</h1>\
<p>每次都是hello world，你丫煩不煩</p>\
</div>',
link:function($scope){
$scope.alert=function(){
alert('沒事幹嘛點我？');
}
}
}
});
//react
var MessageBox=React.createClass({
alert:function(){
alert('沒事點我幹嘛？');
},
render:function(){
return(
<div>
<h1 onClick={this.alert()}">你好世界！</h1>
<p>每次都是hello world，你丫煩不煩</p>
</div>
);
}
});- 單向數據流
數據一旦更新，就直接重新渲染整個app
一般情況下，管理UI的狀態並不簡單，主要：
->修改DOM樹
->修改數據
->接收用戶的輸入
->異步API數據請求
react和傳統的服務器端渲染相似
傳統方式：
->瀏覽器請求頁面
->服務器請求數據庫將數據傳給模板
->模板渲染頁面
react的渲染方式：
->用戶輸入
->從API獲取數據
->將數據傳給頂層組件
->react將每個組件渲染出來
react的這種方法不再有：
->魔法般的雙向數據綁定
->數據模型的骯髒檢查（dirty checking）
->確切的DOM操作
這樣做的好處有什麼：
->每個組件是幹啥的，很直觀
->結果更可以預測
->組件之間的關係更清晰
一個react組件可以理解成一個獨立的函數，它可以接受參數（props），可複用，可以傳遞，返回結果（渲染組件）
- 虛擬DOM樹
在每次更新時：react重建DOM樹，然後找到與上個版本的DOM的差異，然後計算出罪行的DOM並更新操作，最後從操作隊列中批量地執行DOM跟新操作。
它可以在node.js中運行（服務器端）
->服務器與客戶端公用邏輯（lsomorphic javascript）
->SEO友好，便於生成緩存的單頁應用
->直接渲染特定頁面而不用渲染整個app
什麼是JSX？
其實就是JavaScript的XML語法擴展。它採用你所熟悉&易理解的語法來定義DOM樹。
http://www.runoob.com/react/react-jsx.html在這個網址中簡單介紹了JSX。
示例：
var HelloWold=React.createClass({
render:function(){
return <p>Hello {this.props.name}</p>;
}
});
React.render(
<HelloWorld name="John"/>,
document.getElementById("app")
);