NO.1 ReactDom.render
ReactDom.render是React最基本的用法，用于将模板转化为HTML语言，并插入指定的DOM节点。
ReactDom.render(
<Name />,
document.getElementById('app')
);
上面代码的含义是将Name这个组件插入ID为app的元素中。
NO.2 JSX语法
将HTML语言直接写入带JS语言之中，这就是JSX语法
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
JSX的语法规则是如果遇到HTML的标签，就用HTML的规则解析，如果遇到代码块，就用JS的规则解析。
JSX允许直接在模板中插入JS变量，如果变量是一个数组，则会展开这个数组的所有成员查看
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
NO.3 组件（component）
新建一个name.js,把他封装成为一个组件，内容如下：
'use strict';
import React from "react";
class Name extends React.Component {
render () {
return (
<div>
hello~
</div>
);
}
}
export { Name as default };
Name就是一个组件类，模板插入<Name />，会自动生成Name的一个实例，有三点必须注意：
1.所有组件中必须有自己的render方法，用于输出组件；
2.组件类的第一个字母必须大写，否则会报错；
3.组件只能包含一个顶层标签，否则会报错；例如，如果将return里面的内容改成:
return (
<div>
hello~
</div>
<div>
youngi~
</div>
);
然后webpack会返回报错信息:
Adjacent JSX elements must be wrapped in an enclosing tag (11:4)
组件的用法和原生的HTML的用法一致，可以加入任意属性，比如<Name name="youngi"/>，有一点值得注意的是，class和for这两个属性应该写为className和htmlFor
ReactDom.render(
<Name name="youngi" />,
document.getElementById('app')
);
那么在组件中，想要获取这个属性就可以用this.props.name读取：
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
NO.4 this.props.children
这个是个特例，这个代表的意思不是去找this.props的children属性，而是去找这个组件的所有子节点
这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
NO.5 PropTypes
这个属性是组件类的属性，而不是组件的属性，这个PropTypes可以用来验证从组件传来的属性是否合法。例如：
import React from 'react';
import ReactDom from 'react-dom';
import Name from './name';
var name = 123
ReactDom.render(
<Name name= {name} />,
document.getElementById('app')
);
如上代码显示，Name组件的name属性的类型为number类型，而不是字符串，那么在组件类中，对这个属性进行验证：
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
Name.propTypes = { name: React.PropTypes.string.isRequired };
进行验证后，验证不通过的话，会在控制台上报错
Invalid prop `name` of type `number` supplied to `Name`, expected `string`.
NO.6 defaultProps 设置组件的默认值
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
Name.defaultProps = { name: "youngi" };
