NO.1 ReactDom.render
ReactDom.render是React最基本的用法溜畅，用于將模板轉(zhuǎn)化為HTML語言寒屯，并插入指定的DOM節(jié)點弯囊。
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的語法規(guī)則是如果遇到HTML的標(biāo)簽蚌铜，就用HTML的規(guī)則解析，如果遇到代碼塊嫩海，就用JS的規(guī)則解析冬殃。
JSX允許直接在模板中插入JS變量，如果變量是一個數(shù)組叁怪，則會展開這個數(shù)組的所有成員查看
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
NO.3 組件（component）
新建一個name.js,把他封裝成為一個組件审葬，內(nèi)容如下：
'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.組件只能包含一個頂層標(biāo)簽混驰，否則會報錯攀隔；例如皂贩，如果將return里面的內(nèi)容改成:
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這兩個屬性應(yīng)該寫為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屬性映皆，而是去找這個組件的所有子節(jié)點
這里需要注意挤聘， this.props.children 的值有三種可能：如果當(dāng)前組件沒有子節(jié)點，它就是 undefined ;如果有一個子節(jié)點捅彻，數(shù)據(jù)類型是 object 组去；如果有多個子節(jié)點，數(shù)據(jù)類型就是 array 步淹。所以从隆，處理 this.props.children 的時候要小心。
React 提供一個工具方法 React.Children 來處理 this.props.children 缭裆。我們可以用 React.Children.map 來遍歷子節(jié)點键闺，而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 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類型购桑，而不是字符串畅铭，那么在組件類中氏淑，對這個屬性進(jìn)行驗證：
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
Name.propTypes = { name: React.PropTypes.string.isRequired };
進(jìn)行驗證后，驗證不通過的話硕噩，會在控制臺上報錯
Invalid prop `name` of type `number` supplied to `Name`, expected `string`.
NO.6 defaultProps 設(shè)置組件的默認(rèn)值
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
Name.defaultProps = { name: "youngi" };
