1.html模版
引入react.js,react-dom.js,browser.min.js
注意：script标签的type属性为text/babel（因为react独有的jsx语法，和js不兼容；使用jsx语法的地方都要加type=“text/babel”）。
react.js:react核心库
react-dom.js ：提供与dom相关的功能
browser.js :将jsx语法转为js语法，最好放在服务器。
$babel src --out-dir build
将src下的js进行语法转换，转码后放在build子目录中。
2.ReactDOM.render(),用于将模版转化为html，并插入到制定节点的DOM 中。
ReactDOM.render(<h1>hello</h1>);
document.getElementById('example');
将h1标题插入example节点
3. JSX语法
html直接写在js中，不需要加任何符号----jsx语法。
var name = ['aa','bb','cc'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>hello ,{name}</div>
});
}
</div>,
);
遇见html以中<开头，代码块以{开头。
jsx允许在模版插入js变量。
4.组件
react允许将代码封装成组件，然后在网页中插入组件。
生成组件类的方法：React.createClass.
var HelloMessage = React.createClass({
render:function(){
return <h1>hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="lily"/>
document.getElementById('example');
);
注意：1.所有组件类必须有render方法，用于输出组件，组件类第一个字母必须大写。
组件类指南包含一个顶层标签。
2.class属性需要写成className,for属性需要写成htmlFor ,因为class和for是JavaScript保留字。
5.this.props.children
this.props对象的属性和组件属性一一对应，除了this.props.children属性。
它表示组件的所有子节点。
this.props.children 的值有三种可能：
（1）当前组件没有子节点，它就是undefined。
（2）有一个子节点，数据类型object。
（3）有多个子节点，数据类型 array。
React提供了一个工具方法React.Children来处理this.props.children，可以使用React.Children.map来遍历子节点。
var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );
6.PropTypes
组件类的PropTypes属性，用来验证组件市里的属性是否符合要求
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
var data = 'string';
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
更多的PropTypes设置，可以查看官方文档。
getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
7.获取真实DOM节点
组件不是真正的DOM,react的操作通常是在虚拟的节点上，只有插入文档后才变成真正的DOM了，极大的提高了网页性能。
那么，如果从组件中获取真正的DOM节点，需要使用ref属性。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);