JSX语法
JSX 的基本语法规则
遇到HTML标签（以 < 开头），就用HTML规则解析；遇到代码块JavaScript（以 { 开头），就用JavaScript规则解析，比如
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
React的组件以大写字母开头，原生的HTML标签以小写字母开头。
你可以通过React.createElement来创建一个树。第一个参数是标签，第二个参数是一个属性对象，第三个是子节点。
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);
js作为属性值和子节点才需要用大括号{}括起来，因为JSX最终会转换成JS输出，所以表达式只能用简单行内运算符如三母运算符，而不能使用if else
//属性表达式
// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
//子节点表达式
// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
样式
style后传入一个js的对象而不是css字符串，最外层的{}表示是js，内层的{}表示为对象
<span style={{color:'red'}}></span>
事件
React组件的事件和属性都是驼峰的形式，比如：
<!-- 原html写法 -->
<form onsubmit="xxx"></form>
<!-- react写法 -->
render: function(){
return
<form onSubmit="xxx"></form>
}
Refs
我们利用 ref 属性给子组件命名，通过this.refs引用真实的DOM节点。
var CommentForm = React.createClass({
handleSubmit: function(e) {
this.refs.author.value = '';
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
</form>
);
}
});
变量
react变量似乎必须要加var，存疑?
数据流
React中数据是沿着组件树通过props传递，从上到下（最外层到最内层）单向流动的。
哪些组件应该有state
常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过props传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。
