react
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
官网：
https://facebook.github.io/react/
入门教程：
http://reactjs.cn/react/docs/getting-started-zh-CN.html
React 特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React 第一个实例：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>
运行：http://www.runoob.com/try/try.php?filename=try_react_hw
解析：
实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js
React 的核心库
react-dom.min.js
提供与 DOM 相关的功能
babel.min.js
Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
一个稍微复杂的例子
<!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 免费电子书 免费epub电子书 电子书大全 电子书下载 光剑免费图书馆 全球免费开放的电子图书馆 東海陳光劍的博客">
<!--<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' 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>陈光剑的个人网站 - 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.baidu.com/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.jianshu.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! 现在时间是:' + new Date(),
type: BootstrapDialog.TYPE_DEFAULT,
closable: false,
cssClass: 'dialog_mar',
buttons: [{
label: '确认',
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]
)
渲染一个 ReactElement 到 DOM 中，放在 container 指定的 DOM 元素下，返回一个到该组件的引用。
如果 ReactElement 之前就被渲染到了 container 中，该函数将会更新此 ReactElement，仅改变需要改变的 DOM 节点以展示最新的 React 组件。
如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后调用。
注意：
React.render() 替换传入的容器节点内容。在将来，或许可能插入组件到已存在的 DOM 节点中，但不覆盖已有的子节点。