React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫劫狠。
React主要用于構(gòu)建UI劲弦，很多人認(rèn)為 React 是 MVC 中的 V（視圖）昭躺。
React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站企巢，并于 2013 年 5 月開源。
React 擁有較高的性能丑念，代碼邏輯非常簡單涡戳，越來越多的人已開始關(guān)注和使用它。
官網(wǎng)：
https://facebook.github.io/react/
入門教程：
http://reactjs.cn/react/docs/getting-started-zh-CN.html
React 特點(diǎn)
1.聲明式設(shè)計(jì) ?React采用聲明范式渠欺，可以輕松描述應(yīng)用妹蔽。
2.高效 ?React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互挠将。
3.靈活 ?React可以與已知的庫或框架很好地配合胳岂。
4.JSX ? JSX 是 JavaScript 語法的擴(kuò)展。React 開發(fā)不一定使用 JSX 舔稀，但我們建議使用它乳丰。
5.組件 ? 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用内贮，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中产园。
6.單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼夜郁，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單什燕。
React 第一個(gè)實(shí)例：Hello,World!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
運(yùn)行：http://www.runoob.com/try/try.php?filename=try_react_hw
解析：
實(shí)例中我們引入了三個(gè)庫： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js
React 的核心庫
react-dom.min.js
提供與 DOM 相關(guān)的功能
babel.min.js
Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼竞端，這樣我們就能在目前不支持 ES6 瀏覽器上執(zhí)行 React 代碼屎即。Babel 內(nèi)嵌了對(duì) JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個(gè)全新的水平事富。
一個(gè)稍微復(fù)雜的例子
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="東海陳光劍 光劍博客 Free Ebook 免費(fèi)電子書 免費(fèi)epub電子書 電子書大全 電子書下載 光劍免費(fèi)圖書館 全球免費(fèi)開放的電子圖書館 東海陳光劍的博客">
<!--<link rel='stylesheet' type='text/css'>-->
<link href='../public/css/font.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../public/css/style.css" media="screen" type="text/css">
<link rel="stylesheet" href="../public/css/print.css" media="print" type="text/css">
<link rel="shortcut icon" href="../favicon.ico">
<title>陳光劍的個(gè)人網(wǎng)站 - Jason Chen's Personal Website</title>
<!-- jQuery 2.2.3 -->
<script src="../public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../public/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../public/bootstrap/css/bootstrap.min.css">
<!-- BootstrapDialog -->
<link href="../public/components/bootstrap3-dialog/bootstrap-dialog.min.css" rel="stylesheet" type="text/css"/>
<script src="../public/components/bootstrap3-dialog/bootstrap-dialog.min.js"></script>
<!-- React -->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script type="text/babel" src="../public/js/sidebar.js"></script>
<script type="text/babel" src="../public/js/header.js"></script>
<script src="../public/js/jason.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://#/hm.js?bb529e2f4fa35aeb3b07ca2e09b4ef7c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div id="header"></div>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<div id="helloWorld2"></div>
<div style="padding: 2em; text-align: center;font-size: 2em"><a
href="http://www.reibang.com/p/3a9f916d930d" target="_blank">React極簡教程:Hello,World</a></div>
<div id="helloWorld"></div>
</section>
<div id="sidebar"></div>
</div>
</div>
<script type="text/javascript">
function sayHelloWorld() {
BootstrapDialog.show({
title: 'React Demo',
message: 'Hello,World! 現(xiàn)在時(shí)間是:' + new Date(),
type: BootstrapDialog.TYPE_DEFAULT,
closable: false,
cssClass: 'dialog_mar',
buttons: [{
label: '確認(rèn)',
cssClass: 'con_btn',
action: function (dialogRef) {
dialogRef.close();
location.reload();
}
}, {
label: '取消',
action: function (dialogRef) {
dialogRef.close();
}
}]
});
}
</script>
<script type="text/babel">
var HelloWorld = React.createClass({
getInitialState: function () {
return {};
},
sayHello: function () {
// alert('Hello,World!');
sayHelloWorld();
},
render: function () {
var helloWorldStyle = {
textAlign: 'center',
padding: '4em'
};
var btnStyle = {
padding: '1.5em',
fontSize: '1.5em'
};
return (
<div style={helloWorldStyle}>
<button onClick={this.sayHello} style={btnStyle}>說: Hello,World!</button>
</div>
);
}
});
ReactDOM.render(<HelloWorld/>, document.getElementById('helloWorld'));
// var helloWorld2=ReactDOM.render(<h1>Hello,World!</h1>, document.getElementById("helloWorld2"));
var HelloWorld2 = React.createClass({
render: function () {
var helloWorld2Style={
textAlign: 'center'
};
return (<h1 style={helloWorld2Style}>Hello,World!</h1>);
}
});
ReactDOM.render(<HelloWorld2/>,document.getElementById("helloWorld2"));
</script>
</body>
</html>
React.render
ReactComponent render(
ReactElement element,
DOMElement container,
[function callback]
)
渲染一個(gè) ReactElement 到 DOM 中技俐，放在 container 指定的 DOM 元素下，返回一個(gè)到該組件的引用统台。
如果 ReactElement 之前就被渲染到了 container 中雕擂，該函數(shù)將會(huì)更新此 ReactElement，僅改變需要改變的 DOM 節(jié)點(diǎn)以展示最新的 React 組件贱勃。
如果提供了可選的回調(diào)函數(shù)井赌，則該函數(shù)將會(huì)在組件渲染或者更新之后調(diào)用。
注意：
React.render() 替換傳入的容器節(jié)點(diǎn)內(nèi)容贵扰。在將來族展，或許可能插入組件到已存在的 DOM 節(jié)點(diǎn)中，但不覆蓋已有的子節(jié)點(diǎn)拔鹰。
