1、什么是React？
React是一個用於構建用戶界面的JavaScript庫。主要用於構建UI，很多人認為Reatc是MVC中的V（視圖）。
React起源於Facebook的內部項目，用來架構Instrgram的網站（ins，一款圖片分享的社交軟件），並與2013年5月份開源。
React擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
2、React的特點？
（1）聲明式設計
（2）高效：通過對DOM的模擬，最大限度的減少與DOM的交互。
（3）靈活：可以與已知的框架或庫很好的配合。
（4）JSX：是js語法的擴展，不一定使用，但建議用。
（5）組件：構建組件，使代碼更容易得到復用，能夠很好地應用在大項目的開發中。
（6）單向響應的數據流：React實現了單向響應的數據流，從而減少了重復代碼，這也是解釋了它為什么比傳統數據綁定更簡單。
3、React的html的必備模板
<!DOCTYPE html> <html> <head> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body> </html>
(1) script 標簽的 type 屬性為 text/babel 。因為 React 獨有的 JSX 語法，跟 JavaScript 不兼容。
凡是使用 JSX 的地方，都要加上 type="text/babel" 。
(2) 三個庫： react.min.js 、react-dom.min.js 和 Browser.min.js ，它們必須首先加載。
react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，
Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
4、React JSX 的優點以及常見用法
React使用JSX來代替常規的javascript語法，看起來很像xml的javascript的語法擴展。
JSX優點:（1）JSX執行更快，因為它對編譯js代碼進行了優化（2）它是類型安全的，在編譯過程中就能發現錯誤（3）使用jsx編譯模板更加簡潔快速。
使用JSX：
（1）代碼中嵌套多個html標簽，需要使用一個div元素包裹它們，實例中的p標簽使用了自定義屬性：data-前綴 。
ReactDOM.render(
<div>
<h1>菜鳥教程</h1>
<h2>歡迎學習 React</h2>
<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
</div> ,
document.getElementById('example')
)；
（2）JSX表達式
ReactDOM.render(
<h1>{1+1*4}</h1>,
document.getElementById('example')
)；
（3）樣式
React 推薦使用內聯樣式。我們可以使用 camelCase 語法（駱駝命名法，除第一個單詞外的其他首字母大寫）來設置內聯樣式.
React 會在指定元素數字后自動添加 px 。
var myStyle = { fontSize: 100, color: '#F00' }; ReactDOM.render( <h1 style = {myStyle}>菜鳥教程</h1>, document.getElementById('example') );
（4）注釋
注釋需要寫在花括號中:(外加div包裹)
ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*注釋...*/} </div>, document.getElementById('example') );
（5）數組
JSX 允許在模板中插入數組，數組會自動展開所有成員：
var arr = [ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2> ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
（6）HTML 標簽 vs React 組件
React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。
要渲染 HTML 標簽，只需在 JSX 里使用小寫字母的標簽名。
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example'));
React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標簽。
由於JSX 就是JavaScript，一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代，ReactDOM使用className和htmlFor來做對應的屬性。
5、React State(狀態)
React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。
React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。
以下實例中創建了 LikeButton 組件，getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。
當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。
參考文獻：
阮一峰React入門實例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React解決了前端開發中的哪些痛點？ https://www.zhihu.com/question/39825457?sort=created
React.js 初學者應該知道的9件事 http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know