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" };
