React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了
一、HTML的模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
</script>
</html>
上面的代碼要注意的有兩點(diǎn)：
一、最后的script標(biāo)簽的type屬性為text/babel。這是因?yàn)镽eact獨(dú)有的JSX語法。和JavaScript不兼容。凡是使用到JSX的地方，都要加上 type="text/babel"
二、上面的代碼引用了三個(gè)庫。react.js、react-dom.js、browser.js,他們引用的順序不能改變。其中，react.js 是React的核心庫，react-dom.js是提供DOM相關(guān)的功能，browser.js的作用是將JSX語法轉(zhuǎn)為JavaScript語法。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點(diǎn)。render的方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是要寫入的模板，第二個(gè)參數(shù)是要插入的節(jié)點(diǎn)。
ReactDOM.render(
<h1>hello world</h1>,
document.getElementById('app');
)
注意： 第一個(gè)參數(shù)的頂層標(biāo)簽只能有一個(gè)，什么意思呢？就是 不可以寫成：
<h1>hello world</h1> <div>我是div</div>
上面這種樣子的
上面代碼的意思是將一個(gè)h1標(biāo)簽插入id名為app節(jié)點(diǎn)，運(yùn)行的結(jié)果如下：
三、JSX語法
上一節(jié)的代碼，HTML語法直接寫在JavaScript語言中，不加引號(hào)，這就是JSX語法，它允許HTML與JavaScript的混寫
var str = '我是字符串';
ReactDOM.render(
<h1{str}</h1>,
document.getElementById("app")
);
上面的代碼體現(xiàn)了jsx的基本語法規(guī)則：遇到HTML標(biāo)簽（以標(biāo)簽開頭），就用HTML規(guī)則解析；遇到代碼塊（以{}開頭），就用JavaScript規(guī)則解析。上面代碼的運(yùn)行結(jié)果如下：
JSX可以遍歷數(shù)組，不過用的是map方法代碼如下：
var arr = ['張三','李四','王五'];
ReactDOM.render(
<div>
{
arr.map(function(v,k){
return <p key={k}>你好,{v}</p>;
})
}
</div>,
document.getElementById('app')
)
效果如下：
上面的代碼有一個(gè)要注意的點(diǎn)：
就是return的標(biāo)簽要要加上key值，用來標(biāo)識(shí)唯一。
不然會(huì)報(bào)警告：
JSX 允許直接在模板插入 JavaScript 變量。如果這個(gè)變量是一個(gè)數(shù)組，則會(huì)展開這個(gè)數(shù)組的所有成員
var arr = [
<h1 key='1'> 你好世界 </h1>,
<h1 key='2'> 你好朋友 </h1>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('app')
)
四、組件 Components
React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標(biāo)簽一樣，在網(wǎng)頁中插入這個(gè)組件。React.createClass 方法就用于生成一個(gè)組件類
var Hello = React.createClass({
render:function(){
return <h1>我是hello 組件,姓名是{this.props.name}</h1>
}
});
ReactDOM.render(
<Hello name='張三'/>, //這里單雙標(biāo)簽都行
document.getElementById('app');
)
組件的另外一種寫法：
class Hello extends React.Component{
render(){
return <div>我是hello 組件,姓名是{this.props.name}</div>;
}
}
ReactDOM.render(
<Hello name='張三'/>, //這里單雙標(biāo)簽都行
document.getElementById('app');
)
效果如下：
上面的代碼中：變量 Hello 就是一個(gè)組件類。模板插入 <Hello/> 時(shí)，會(huì)自動(dòng)生成** Hello**的一個(gè)實(shí)例。所有的組件都必須有自己的render方法，用于輸出組件。
注意：組件的第一個(gè)字母必須大寫，否則會(huì)報(bào)錯(cuò)，比如：Hello 不能寫成hello。另外，組件類智能包括有一個(gè)頂層標(biāo)簽，否則會(huì)報(bào)錯(cuò)。
組件的用法和原生的HTML標(biāo)簽完全一致，可以加入任意屬性。比如：<Hello name='張三' />,就是Hello 組件加入一個(gè)name屬性，值為張三。組件的屬性可以在組件類的this.props 對(duì)象上獲取，比如name屬性可以通過 this.props.name 讀取。
添加組件屬性，有一個(gè)地方需要注意，就是class屬性要寫成className，for屬性要寫成htmlFor，這是因?yàn)閏lass和for是JavaScript的保留字
五、this.props.children
this.props對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)。
var Hello = React.createClass({
render:function(){
return <h1> 生前何必久睡，死后必定長(zhǎng)眠{React.Children.map(this.props.children,function(v){return <div>{v}</div>})}</h1>;
}
});
ReactDOM.render(
<Hello>
<span>天王蓋地虎</span>
<span>寶塔鎮(zhèn)河妖</span>
</Hello>,
document.getElementById("app")
)
效果如下：
