react.js是核心库，react-dom.js提供与DOM相关功能，Browser是将JSX语法转化为js语法
ReactDom.render用于将模板转为HTML语言，并插入指定DOM节点，传两个参数，(object:object,DOM:object)
JSX的语法
html直接写在js中，不加任何引号
js语法写在花括号{ }中
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
在JSX中不能使用if slse
react使用className和htmlFor代替class和for
JSX表现为对象
Babel编译JSX在React.createElement()调用的时候。
下面两个例子是相似的
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
关于组件，组件类的首字母必须大写，否则会报错，组件类只能包干一个顶层标签，即最外层标签只能有一个
（JSX使用大小写的约定来区分本地组件的类和HTML标签）
向组件传递参数，可以使用this.props对象，对象的属性与组件的属性一一对应，
props属性可以用来组件之间传值。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);
但是有一个例外就是this.props.children，表示组件的所有子节点
this.props.children的值
如果组件没有子节点，值为undefined；一个子节点，数据类型是object；如果多个子节点，数据类型是array
react提供了React.Children来遍历子节点而不用担心this.props.children的数据类型
React State
通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。
只需更新组件的state，根据新的state重新渲染用户界面（不要操作DOM）
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
onClick等事件，on之后第一个字母是大写的，小写的事件将不生效
State 和 Props
state和props可以组合使用，可以在父组件中设置state，并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "jjj",
site: "http://www.baidu.com"
};
},
clickfun:function (){
this.setState({name:(this.state.name=="jjj"?"aaa":"jjj")});
console.log(this);
},
render: function() {
return (
<div onClick={this.clickfun}>
<p onClick={this.clickfun}>子元素，点击事件生效</p>
<Name name={this.state.name} onClick={this.clickfun}/>
<Link site={this.state.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
示例中，绑定在顶层元素和子元素p上的事件生效，绑定在子组件Name上的事件不生效，应该是子组件无法获取到父组件上的clickfun函数，因为传值是使用props
