1、使用
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
最后一個(gè)<script>的type屬性為text/babel，這樣可以在其中應(yīng)用jsx語(yǔ)法。
2、JSX語(yǔ)法
遇到<開頭就用HTML規(guī)則解析；遇到{開頭，就用javascript解析。
3、組件
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);`
HelloMessage就是一個(gè)組件類，組件類必須以大寫字母開頭，必須有自己的
render方法，用于輸出組件，還必須只能包含一個(gè)頂層標(biāo)簽。組件類可以在使用時(shí)可以加入任意屬性，其加入的屬性可以在組件類內(nèi)部的this.props對(duì)象上獲取到。
-
this.props.children屬性。它表示組件的所有子節(jié)點(diǎn)
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 );
如果當(dāng)前組件沒(méi)有子節(jié)點(diǎn)，this.props.children就是undefined;如果有子節(jié)點(diǎn)，數(shù)據(jù)類型就是object;如果有多個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型就是array。React提供了一個(gè)方法React.Children直接處理this.props.children。
-
PropTypes屬性，驗(yàn)證組件實(shí)例的屬性是否符合要求。在組件類中定義屬性:
propsTypes: { title:React.PropTypes.string.isRequired }
如上定義這樣的屬性后，在使用組件時(shí)，就必須在組件上加入一個(gè)title屬性，且其類型時(shí)字符串類型，才能通過(guò)驗(yàn)證。 getDefaultProps方法用來(lái)設(shè)置組件屬性的默認(rèn)值。
4、獲取真實(shí)DOM節(jié)點(diǎn)
組件并不是節(jié)點(diǎn)，知識(shí)一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬DOM。只有插入文檔之后，才會(huì)變成真實(shí)的DOM。根據(jù)React的設(shè)計(jì)，所有DOM變動(dòng)，都會(huì)在虛擬DOM上發(fā)生，然后在將實(shí)際發(fā)生的變動(dòng)反應(yīng)在真實(shí)的DOM上，這種算法就做DOM diff
要從組件獲取真實(shí)的DOM節(jié)點(diǎn)，這是就需要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')
);
this.refs.[refName]就會(huì)返回這個(gè)真實(shí)的DOM節(jié)點(diǎn)。
5、this.state
組件類中getInitialState方法用于定義初始狀態(tài)，這個(gè)對(duì)象可以通過(guò)this.state屬性讀取，同時(shí)this.setState方法可以修改狀態(tài)值，修改狀態(tài)值會(huì)自動(dòng)調(diào)用render方法渲染組件
寫一個(gè)簡(jiǎn)單的表單：
var Input = React.createClass({
getInitialState: function(){//設(shè)置初始值
return {value:'Hello!'};
},
handleChange: function(evt){
this.setState({value: evt.target.value})
},
render: function(){
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>,document.body)
