React是一個由Facebook于2013年5月開源的庫，采用MVC模式。而React它最初只是Facebook的一個內部項目使用的框架，由于它的設計思想獨特，性能出眾，代碼邏輯簡單，可以說優于市面上流行的基他javaScript MVC框架，因此，越來越多的人開始關注并使用React,從而也使得React變成了時下最熱門的前端框架。 由它衍生的React Native項目當前也變得火熱起來，一時間使得從事Android與IOS開發的同學擔心自己在不久的將來可能會丟了飯碗，因為React Native是一種用寫Web App的方式去寫Native App。那樣同一組人就只需要寫一次界面，就可以運行在Android,IOS,PC等各個端。
由于React是一個庫，得先進行依賴，React的依賴有3種，
一種是直接下載解壓使用：
你可以在官網 http://reactjs.cn/react/downloads.html 下載最新版。然后解壓到指定目錄下，并 在< script src=”“/>引用路徑里面指定react.js,react-dom.js的路徑。
一種是使用內容分發網絡(CDN)：
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script><script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>注： 上面使用的是.min文件，即壓縮文件，這個是生產環境的，開發者看不到源碼。 當然，便于調試，我們可以使用未經壓縮的文件，比如：
<script src="https://npmcdn.com/[email protected]/dist/react.js"></script><script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>上面的react.js與react-dom.js兩者是必須要的。其中react.js是React的核心庫，react-dom.js提供與DOM操作相關的功能。除此之外我們還會引入browser.js庫：用于將JSX語法轉化為Javascript語法。
另一種就是用npm命令來安裝React:
$ npm install react -g --save$ npm install react-dom -g --save全局安裝React,–save是將包添加至package.json文件（*這個文件是調用npm init 命令自動生成的）
組件式開發的模型以及它的概念，這里不再贅述。在JavaScript中，對模塊化或組件式開發，目前非常流行的一個庫是require.js。它有以下優點：
可以實現js文件的異步加載，避免了網頁因加載過多的js文件而失去響應；用于管理模塊之間的依賴性，便于代碼的編寫和維護。如果想要依賴某個模塊時，只需調用require()方法即可，返回這個組件的對象。如：
//注意，定義的這個ComponentName組件名首字母必須大寫。var ComponentName = require('../common/js/Test.js');組件式開發的核心思想是，一個組件為一個js文件。 在React里面，可以通過React.createClass({})方法來創建一個組件，這個方法里面{}實現一系列的接口，其中render:function(){};接口是必須實現的。當需要關注React的生命周期時，其與各生命周期相關的接口就得實現。比如：
//sate狀態初始化getInitialState:function(){ return { open:false, online:true };},//當state狀態改變時調用componentDidUpdate:function(){ //todo },//組件掛載完畢時調用componentDidMount:function(){ //todo},//render是必須要實現的方法//當調用React.render(<組件/>,document.getElementById('Root'))方法時，該方法就會被回調render:function(){ return ( <div>測試渲染</div> );}同時，在這個組件里面，自己也可以封裝一些方法，在render里面來調用。
組件作為一個對象，也可以理解成一個DOM節點，因為它最終在渲染的時候也會加入到HTML文檔中，但它又不是真正的DOM節點，而是一種數據結構，只有在組件被掛載到DOM以后，才會變成真正的DOM節點，因此，組件也被稱為虛擬DOM。
同時組件作為一個對象，它有自己的生命周期，而其生命周期可以分成三個狀態： - Mounting:已經插入了真實的DOM - Updating:正在被重新渲染 - Unmounting:已經移出真實的DOM
除了Unmounting狀態只有一種處理函數外，其它每個狀態都有兩種處理函數，will函數在進入狀態之前調用，did函數在進入狀態后調用。比如： - componentWillMount():將要掛載組件； - componentDidMount(): 組件掛載成功；
此外，React還提供兩種特殊的處理函數： - componentWillReceivePRops(object nextProps):已掛載成功的組件在收到新的參數時回調 - shouldComponentUpdate(object nextProps,object nextState):當組件需要重新渲染時回調。
組件即對象，因此，組件有相應的屬性，我們可通過this.props來獲取當前組件對象的指定屬性。
var HelloClass = React.creatClass({ render:function(){ return ( //讀取組件的屬性，這個名字是隨便取的。 <h1>隨便取的屬性名：<font color='red'>{this.props.sunny}</font></h1> ); }});React.render(<HelloClass sunny="我是sunny"/>,document.body);如圖：
像其它編程語言一樣，有時我們需要指定變量的類型。而在React里面，由于組件的屬性可以接受字符串、對象、函數等任意值。這時，為了對使用者進行約束，我們也可以指定屬性的類型，這時就要用到PropTypes,eg:
var PropesTest = React.createClass({ //定義兩個屬性,在引用該組件時，如果用到這兩個屬性，則值的類型必須符合給定的類型， //否則會報錯。 propTypes:{ name:React.PropTypes.string.isRequired, content:React.PropTypes.string.isRequired, }, render:function(){ return ( <h1>名字：{this.props.name}+"/n內容："+{this.props.content}</h1> ); }});//情況一：React.render(<PropesTest name=1111 content="內容"/>,document.getElementById("example"));//情況二：React.render(<PropesTest name="我是**" content="哈哈"/>,document.getElementById("example"));結果如下：
情況一：
情況二：
新聞熱點
疑難解答
