我们运用UI最基本的事就是用来展示数据。React使得展示数据变得简朴，而且当数据转变时，React能自动坚持UI的更新。
最先
建立一个简朴的Demo：
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<div id="example"></div>
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>
</body>
</html>
今后一切代码示例的HTML都是用上面的代码，只关注JavaScript的编写。
#app.js
var HelloWorld = React.createClass({
render: function () {
return (
<p>
Hello,<input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function () {
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
React.createClass
用来建立一个组件类，前面也说了，编写React代码重要就是构建通用的组件。
React.render
将React的模板转化为HTML，并插进去到相应的DOM构造中。
功用
我们也许相识到这段代码的功用，纵然之前完整没有打仗过React。实在就是每隔500毫秒将下面这个构造：
<p>
Hello,<input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
插进去到下面的构造中：
<div id="example"></div>
翻开浏览器看看结果：发明时刻一向在变化，而input框，不管我们怎样操纵，一向坚持原样稳定。
这就奇怪了，根据我们固有的主意，应当是每隔500毫秒，从新替代div当中的内容啊，为啥时刻一向在变，而输入框一向稳定呢？
这就是React的奇异之处了。
相应式更新
上面的例子中，我们只是建立了个组件，并将它插进去DOM中，并没有写别的代码。而奇异的结果都是React帮我们完成的。
除非有必要，不然React是不会直接去操纵DOM的。React运用了内部的假造DOM，当数据发作转变，先在假造DOM中盘算变化，末了将更改的部份反应到实在的DOM中。我们晓得，频仍操纵DOM价值是高贵的，它会致使页面重复repaint。React宣称本身很快，恰是基于此。
回过头来看看上面的例子，为啥子input稳定，而时刻一向在变化？input相对于这个组件来讲，是它的属性，而且没有嵌入动态的数据。而在React的设定中，属性是不可变的。稍稍转变下JavaScript代码，再来看下结果：
#app.js
var HelloWorld = React.createClass({
render: function () {
return (
<p>
Hello,<input type="text" placeholder="Your name here" value={this.props.date.toTimeString()}/>!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function () {
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
组件相似于函数
React的组件很简明。能够把它看做有着props和state状况而且能够返回HTML构造的函数。由于组件很简明，所以很轻易就能够看出它在干什么。
React组件的render要领中，返回的构造只能有一个根节点。
#准确的
var HelloWorld = React.createClass({
render: function () {
return (
<div>
<div></div>
</div>
);
}
});
#毛病的
var HelloWorld = React.createClass({
render: function () {
return (
<div></div>
<div></div>
);
}
});
JSX语法概述
仔细的人会发明，我们编写的JavaScript代码中，一切的模板内容都没有加引号。这类JavaScript和HTML混写的体式格局就是所谓的JSX语法了，React首创。
这类语法浏览器是不识别的，引入我们编写的JavaScript文件的时刻须要指定type范例为text/jsx，同时还要须要引入JSXTransformer.js将JSX语法转化为真正的JavaScript代码。固然了，这个转化历程是须要消费时刻的。
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>
React的作者以为，组件应当同关注星散，而不是同模板和展示逻辑星散。构造化标记和天生构造化标记的代码是严密关联的，另外，展示逻辑平常都很庞杂，运用模板言语会使展示变得笨重。
React处理这个题目的体式格局就是：直接经由过程JavaScript代码天生HTML和组件树，如许的话，你就能够运用JavaScript富丰的表达力去构建UI。为了使这个历程变得更简朴，React建立了相似HTML的语法去构建节点树，也就是JSX了。
JSX语法是可选的，也就是说你也能够不运用，直接写JavaScript代码。看个对照例子：
#JSX语法
React.render(
<div className="c-list">content</div>,
document.getElementById('example')
);
#plain JavaScript
React.render(
React.createElement('div', {className: 'c-list'}, 'content'),
document.getElementById('example')
);
如许简朴的例子，我们都能感觉到JSX越发的语义化，更别说庞杂的组件了。所以强烈建议运用JSX。
前面说到JS的引入
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>
天生环境则不能这么干，由于JSX的转化是须要时刻的。线上的代码应当是直接可执行的，我们应当在离线环境下提早转化，这里就要运用到东西了。
参考资料：
Displaying Data
