React 是一個用於構建[用戶界面]的 JAVASCRIPT 庫，t主要用於構建UI，很多人認為 React 是 MVC 中的 V（視圖）。
React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
二、React有哪些 特點？
● 1.聲明式設計 −React采用聲明范式，可以輕松描述應用。
● 2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。--虛擬DOM結構
● 3.靈活 −React可以與已知的庫或框架很好地配合。
● 4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
● 5.組件 − 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
● 6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單
三、簡單的解釋幾個概念：
① 虛擬DOM（Virtual DOM）機制：對於每一個組件，React會在內存中構建一個相對應的DOM樹，
基於React開發時所有的DOM構造都是通過虛擬DOM進行，每當組件的狀態發生變化時，React都會重新構建整個DOM數據。
然后將當前的整個DOM樹和上一次的DOM樹進行對比，得出DOM結構變化的部分(Patchs)，然后將這些Patchs再更新到
真實DOM中。
優點：避免了當頁面數據發生變化時，DOM也被全部更新一遍並進行重新渲染。
整個過程都是在內存中進行，減少了不必要的性能開銷，因此是非常高效的。
② JSX語法：
定義：JSX=JavaScript XML，是一種在React組件內部構建標簽的類XML語法。
React在不使用JSX的情況下一樣可以工作，但是使用JSX可以提高組件的可讀性，增強JS語義，結構清晰，抽象程度高，代碼模塊化。
特點：
1、元素名首字母大寫
2、符合嵌套規則
3、可以寫入求值表達式
4、駝峰式命名
5、不能使用javascript原生函數的一些關鍵詞，如for和class。需要替換成htmlFor和className
6、HTML語言直接寫在 JavaScript 語言之中，不加任何引號，它允許 HTML 與 JavaScript 的混寫.。
優點：
1、JSX 執行更快。
2、它是類型安全的，在編譯過程中就能發現錯誤。
3、使用 JSX 編寫模板更加簡單快速。
③ JSX 的基本語法規則：
遇到 HTML 標簽（以 < 開頭），就用 HTML 規則解析；
遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析；
四、 React.js/Angular.js/Vue.js的對比
1、數據流(數據綁定)
① Angular 使用雙向綁定即：界面的操作能實時反映到數據，數據的變更能實時展現到界面。
② Vue 也支持雙向綁定，默認為單向綁定，數據從父組件單向傳給子組件。
③ React推崇的是函數式編程和單向數據流
即給定原始界面（或數據），施加一個變化，就能推導出另外一個狀態（界面或者數據的更新）。
2、視圖渲染
① AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入
(NG框架是在DOM加載完成之后, 才開始起作用的)
② React 的渲染建立在 Virtual DOM 上，一種在內存中描述 DOM 樹狀態的數據結構。
當狀態發生變化時，React 重新渲染 Virtual DOM，比較計算之后給真實 DOM 打補丁。
③ Vue.js 不使用 Virtual DOM 而是使用真實 DOM 作為模板，數據綁定到真實節點。
3、模塊化與組件化
① Angular 依賴注入來解決模塊之間的依賴問題
② Vue.js 指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數據邏輯操作。
③ React構建於組件之上，重要屬性props,state。一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應的 HTML 結構。
4、語法與代碼風格
①Angular 2 依然保留以 HTML 為中心。Angular 2 將 “JS” 嵌入 HTML。
② Vue.js Vue 也是以 HTML 為中心，將 “JS” 嵌入 HTML，但是進階之后推薦的是使用 webpack + vue-loader 的單文件組件格式。
③ React 推薦的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進 JavaScript
二、React.js的模板語法
一、文件導入
<script src="js/react.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/react-dom.js"></script>
這里需要注意的是這三個文件必須首先加載！並且react.j文件要放在最前面進行導入！ react.js是react.js的核心庫。 react-dom.js提供與DOM相關的功能。而 browser.js是將JSX語法轉化為JAVASCRIPT語法。
二、模板語法
之后創建script標簽，我們的核心JSX語法就寫在標簽內部：
這里需要注意的地方是：<script> 標簽的 type 屬性為 text/babel 。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
tips: 在react 0.14前，瀏覽器端實現對jsx的編譯依賴jsxtransformer.js 在react 0.14后，這個依賴的庫改為browser.js。 頁面script標簽的type也由text/jsx改為text/babel。
接下來我們寫一個簡單的小案例，利用React.js打印輸出語句，代碼如下：
<script type="text/babel">
/*一、基本結構：
ReactDOM.render() 是react中的最基本的方法，作用是將模板轉為HTML語言，並將其插入到DOM節點中。
*/
ReactDOM.render(//render:渲染的意思
<h1>你好，React!</h1>,
//必須使用JavaScript原生的getElementByID方法，不能使用jQuery來選取DOM節點；
document.getElementById("example1")
)
</script>
使用上面語句就可以打印輸出語句“你好，React!”，這就實現了簡單的案例。
接下來我們介紹一下，React.js中的CSS樣式書寫方式，與原生分離式寫法有很大不同：
① React 推薦使用內聯樣式！(使用小駝峰法則)
② React 會在指定元素數字后自動添加 px 。
<script type="text/babel">
var myStyle ={ //傳入一個樣式數組
fontSize: 100,
color: 'red'
};
var testStyle ={
width:800,
heigth:500,
backgroundColor:"yellow"
};
ReactDOM.render(
<div style = {testStyle}>
<h1 style = {myStyle}>這段文字使用了內聯樣式</h1>
</div>,
document.getElementById('example')
)
</script>
顯示效果如下：
接下來我們在模板插入 JavaScript 變量，以數組為例，看一下會是什么效果?
<script type="text/babel">
var arr = [
<h1 key="1">這是數組元素1</h1>,
<h2 key="2">這是數組元素2</h2>,
<h3 key="3">這是數組元素3</h3>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example")
)
</script>
代碼的運行結果如下：
以上我們可以看到JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組，則會展開這個數組的所有成員。
一、什么是組件？
組件化思想在React.js中很重要，eact 允許將代碼封裝成組件，然后像插入普通 HTML標簽一樣，在網頁中插入這個組件。
二、組件的創建以及輸出
創建：
var HelloMessage = React.createClass({ render:function (){ return } }) 輸出：使用偽標簽 實例化組件類並輸出信息 <HelloMessage />
下面我們創建一個組件來實現一個簡單的功能：
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>這是一個自定義組件---{this.props.name}---{this.props.age}</h1>
// <p>這是個測試標簽</p>;
}
});
//輸出組件
ReactDOM.render(
<HelloMessage name = "這是組件的name屬性！" age = "這是組件的age屬性！"/>,
//在調用組件的時候，如果想要多次調用組件，也需要給組件設置一個根標簽
<div>
<HelloMessage name="這是組件的name屬性！" />
<HelloMessage age="這是組件的age屬性！" />
</div>，
document.getElementById('example')
);
</script>
上面代碼運行結果如下：
在上述代碼中，如果我們將 <p>這是個測試標簽</p> 放開控制台會報錯如下：
原因是因為組件類只能包含一個頂層標簽(根標簽)，可以嵌套標簽例如我們可以將上述組件類寫成如下格式：
var HelloMessage = React.createClass({ render: function() { return <h1> 這是一個自定義組件---{this.props.name}---{this.props.age} <p>這是個測試標簽</p> </h1> } });
運行時就不會再報錯，結果如下所示：
在聲明與調用組件的時候我們需要注意以下幾點：
注意：
① 自定義的 React組件類名以大寫字母開頭，使用大駝峰法則命名！
② 所有的組件都必須擁有自己的render！
③ 組件類只能包含一個頂層標簽(根標簽)，可以嵌套標簽！
④ 組件可以任意加入屬性，其屬性屬可以在組件類的 this.props.對象上獲取。(組件的所有子節點)
Tips: 在添加屬性時，
class 屬性需要寫成 className ，
for 屬性需要寫成 htmlFor ，
這是因為 class 和 for 是 JavaScript 的保留字
復合組件：創建多個組件來合成一個組件，即把父組件的不同功能點進行分離
<script type="text/babel">
var BaseModule = React.createClass({
render:function(){
return(
<div>
<Module title={this.props.title} />
{/* <h2>作品:{this.props.title}</h2>*/}
<p>作者:{this.props.author}</p>
</div>
)
}
});
var Module = React.createClass({
render:function(){
return(
<h2>{this.props.title}</h2>
)
}
});
ReactDOM.render(
<BaseModule title="圍城" author="錢鍾書" />,
document.getElementById('container')
);
</script>
上述復合組件運行結果如下：
好了。第一篇React的介紹就先這么多了，通過這些實例我們也大致了解了React所謂混寫的概念以及其便捷性，和Vue等框架孰優孰劣現在還不能太早下定論，在以后的幾篇文章里我們將會更深一步的了解下它們的異同再做比較。