1.依賴的資源：
<script type="text/javascript" src='../asset/react.js'></script>
<script type="text/javascript" src='../asset/react-dom.js'></script>
<script type="text/javascript" src='../asset/JSXTransformer.js'></script> //解析text/jsx語法
<script type="text/javascript" src='../asset/browser.min.js'></script> //解析text/babel語法
2.基本寫法：
html：<div id='demo1'></div>
JS：
ReactDOM.render(
<h1>Hello, I.m demo1!</h1>,
document.getElementById('demo1')
);
3.定義組件式寫法createClass（！組件名稱開頭字母必定要大寫）
html：<div id='demo2'></div>
JS：
var Demo2Box=React.createClass({
render:function(){
return(
<div className="demo2Box">
hello,I.m demo2
</div>
);
}
});
ReactDOM.render(
<Demo2Box />,
document.getElementById('demo2')
);
4.React.createElement使用，參數（ ReactElement element, [object props], [children ...]）
基本用法： React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')
html：<div id='demo3'></div>
JS：
var Demo3Box=React.createClass({
render:function(){
return(
React.createElement('div',{className:'demo3Box'},
"hello,I.m demo3"
)
)
}
});
ReactDOM.render(
React.createElement(Demo3Box,null),
document.getElementById('demo3')
);
5.引用多個組件的寫法：
html：<div id='demo4'></div>
JS：
var Demo4List=React.createClass({
render:function(){
return (
<div className="demo4List">
"hello,I.m demo4List"
</div>
);
}
});
var Demo4Form=React.createClass({
render:function(){
return (
<div className="demo4Form">
"hello,I.m demo4Form"
</div>
);
}
});
var Demo4Box=React.createClass({
render:function(){
return (
<div className="demo4Box">
<h1>demo4Box</h1>
<Demo4List />
<Demo4Form />
</div>
);
}
});
ReactDOM.render(
<Demo4Box />,
document.getElementById('demo4')
);
6.this.props[屬性名]獲得組件的屬性。（用於獲取外面傳入的參數或者回調方法）
特例：this.props.children：表示組件的全部子節點（！沒有子節點時就是undefined，若是有一個子節點，數據類型是Object，多個節點時，數據類型就是array。）
外部data，內部經過props遍歷：
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var Demo5Box=React.createClass({
render:function(){
var commentNodes=this.props.data.map(function(comment) {
return (
<li author={comment.author} key={comment.id}>
{comment.text}
</li>
);
});
return(
<ul className="comment">
{commentNodes}
</ul>
)
}
});
ReactDOM.render(
<Demo5Box data={data} />,
document.getElementById('demo5')
);
使用props.children及React.Children：
7.this.state屬性對象，能夠改變。（好比用戶輸入、服務器請求、時間變化等）
getInitialState定義初始變量，這個對象能夠經過this.state屬性讀取。
this.setState方法是修改狀態值。
html:<div id='demo6'></div>
JS:
var Demo6Box=React.createClass({
getInitialState:function(){
return {liked:false}
},
handleClick:function(){
this.setState({liked:!this.state.liked});
},
render:function(){
var text=this.state.liked?'like':'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this,click to toggle.
</p>
)
}
});
ReactDOM.render(
<Demo6Box />,
document.getElementById('demo6')
);
8.組件的propTypes屬性，用於驗證傳入的參數是否符合要求。
組件的 getDefaultProps方法，用來設置組件傳入參數的默認值。
html:<div id='demo7'></div>
JS:
/*demo7*/
var title='title';
var bool=true;
var count=10;
var arr=[1,2,3];
var obj={'a':1};
var callback=function(){
console.log('dddddd');
};
var content="dsfsdffdd";
var Demo7Box=React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,
bool:React.PropTypes.bool.isRequired,
count:React.PropTypes.number.isRequired,
arr:React.PropTypes.array.isRequired,
obj:React.PropTypes.object,
callback:React.PropTypes.func.isRequired,
content:React.PropTypes.any.isRequired
},
getDefaultProps:function(){
return{
contentDefault:'sdsfsfdsaafdsfds'
}
},
render:function(){
return (
<div>
<h2>{this.props.title}</h2>
<h2>{this.props.bool}</h2>
<h2>{this.props.count}</h2>
<h2>{this.props.arr}</h2>
<h2>{this.props.obj.a}</h2>
<h2>{this.props.callback()}</h2>
<h2>{this.props.content}</h2>
<h2>{this.props.contentDefault}</h2>
</div>
)
}
});
ReactDOM.render(
<Demo7Box title={title} bool={bool} count={count} arr={arr} obj={obj} callback={callback} content={content} />,
document.getElementById('demo7')
);
9.this.refs:從組件中獲取真實DOM的節點。
html：<div id='demo8'></div>
JS：
/*demo8*/
var Demo8Box=React.createClass({
handleClick:function(){
this.refs.myInput.focus();
},
render:function(){
return (
<div>
<input type='text' ref='myInput' />
<input type='button' value='getFocus' onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<Demo8Box />,
document.getElementById('demo8')
);
10.組件的生命週期的處理函數。
組件的生命週期分紅三個狀態： Mounting：已插入真實 DOM 、Updating：正在被從新渲染 、Unmounting：已移出真實 DOM。
React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用，三種狀態共計五種處理函數。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 還提供兩種特殊狀態的處理函數。
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用。
html:<div id='demo9'></div>
JS:
/*demo9*/
var Demo9Box=React.createClass({
getInitialState:function(){
return {
num:100
}
},
componentDidMount:function(){
var num=this.state.num;
this.timer=setInterval(function(){
if(num<=0){
this.setState({num:100})
}
else{
this.setState({num:num-1})
}
}.bind(this),1000)
},
render:function(){
return (
<div>
{this.state.num}
</div>
)
}
});
ReactDOM.render(
<Demo9Box />,
document.getElementById('demo9')
);
