说实话，我是被innerHTML等方式搞的受不了了才开始研究模板引擎的。。。。。。。。
现在市面上有许多的模板框架，像EasyTemplate，Angular什么的真的很多，为了选择一个适合自己的框架，我也是煞费苦心啊。
Angular确实是一个跨时代的产品，但是我是真的不适应她的语法，总觉得自己写的很别扭，无意之中发现了React，发现这货很是对我的胃口啊。好了，废话不多说，直接上料。
1.安装
React官网,我自己的开发环境是windos，只说一说地址就好了。
2.helloWorld
好吧，这是惯例QAQ
在这之前，我们看看目录结构
下面是React的HTML模板
<!DOCTYPE html>
<html>
<head>
<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var name = "World";
React.render(
<p>hello {name}</p>,
document.getElementById("example")
);
</script>
</body>
</html>
以上的代码就是一个最简单的React应用了，其中react.js是React的基本文件，JSXTransformer.js是一个JSX语法翻译器（我是这么叫的。。。）或者叫做解析器（JSX是一个javascript语法糖，有兴趣的自行百度）。这两个文件必须先行引入，因为必须将我们系的JSX翻译成源生的JavaScript。特别提示：在讲JSX翻译成JS的时候特别的费时，建议在上线之前直接翻译。
以上的代码，是HTML和JavaScript混合在一起的写法，当然React也支持原生的JS语法，如下
<!DOCTYPE html>
<html>
<head>
<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var p = React.createElement('p', null, 'hello World');
React.render(p, document.getElementById('example'));
</script>
</body>
</html>
个人比较推荐JSX的写法，因为看起来比较爽，写起来简单而且并不需要那么多的回调。。。。
组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类，如下
JS代码
/**
* reactJS 组件类
*/
var H = React.createClass({
render: function () {
return <p className="className">{this.props.name} hello world</p>;
}
});
React.render(
<H name="ReactJS" />,
document.getElementById("example")
);
HTML代码：
<!DOCTYPE html>
<html>
<head>
<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx" src="test.js"> </script>
</body>
</html>
在写组件的过程中，我发现组件的命名首字母必须大写，我不知道这是什么原因，求哪位大神指导一些，不胜感激。。
在构建模板的时候，class和for属性必须写成className和htmlFor，因为class和for是JavaScript的保留字。
下面，来一发时间注册。React的时间注册类似于原生的onclick等方式
/**
* reactJS 组件类
*/
var H = React.createClass({
click: function () {
alert("click")
},
over: function () {
alert("over")
},
render: function () {
var c = "click",
o = "over";
return (
<div>
<p onClick={this.click}>{c}</p>
<p onMouseOver={this.over}>{o}</p>
</div>
);
}
});
React.render(
<H name="ReactJS" />,
document.getElementById("example")
);
在注册完成之后，查看DOM节点，发现依旧使用的是addEventListener方式。
支持行内样式书写，就是直接在dom的style后面赋值即可
var divStyle = {
color: 'white',
backgroundColor: 'red',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
React.render(
<div style={divStyle}>Hello World!</div>
, document.getElementById("example"));
关于if else，首先我以为它可以这样。。。
/**
* reactJS 组件类
*/
var H = React.createClass({
render: function () {
var d = false;
return (
<div>
if (d) {
<p>123</p>
} else {
<p>321</p>
}
</div>
);
}
});
React.render(
<H name="ReactJS" />,
document.getElementById("example")
);
然而这一切并没有卵用！
看看官方文档。。。人家是这么写的。
var loginButton;
if (loggedIn) {
loginButton = <LogoutButton />;
} else {
loginButton = <LoginButton />;
}
return (
<nav>
<Home />
{loginButton}
</nav>
)
我自己试了试
/**
* reactJS 组件类
*/
var H = React.createClass({
render: function () {
var d = false;
var val;
if (d) {
val = <div><p>123</p></div>;
} else {
val = <div><p>321</p></div>;
}
return val;
}
});
React.render(
<H name="ReactJS" />,
document.getElementById("example")
);
这个还是有卵用的。
看样子哈，这个JSX中XML语法内是不可以夹杂javascript语法的，不知道对不对，我再查查看。。。。
在官方文档中，这个也是不允许的
// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>
// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
在这里要么使用3元表达式，要么老老实实的拆成两段写。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。