簡單按鈕點擊事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
<!-- 區別就在於 babel 支持將按照ES6寫的代碼轉成ES5格式的代碼，
以便讓其能在現代瀏覽器上正常運行，用jsx， 只能用ES5的語法。 -->
<script type="text/babel">
var HelloMessage=React.createClass({
handClick:function(event){
<!-- 獲取真實DOM ReactDOM.findDOMNode函數 -->
var tipE=ReactDOM.findDOMNode(this.refs.tip)
if(tipE.style.display==="none"){
tipE.style.display="inline"
}else{
tipE.style.display="none"
}
<!-- 將停止事件的傳播 -->
event.stopPropagation()
<!-- 阻止元素發生默認的行為 -->
event.preventDefault()
},
render: function(){
return (
<div>
<button onClick={this.handClick}>顯示|隱藏</button>
<span ref="tip">測試點擊</span>
</div>
)
}
});
<!-- ReactDom是React的一部分。ReactDOM是React和DOM之間的粘合劑，
一般用來定義單一的組件，或者結合ReactDOM.findDOMNode（）來使用。
更重要的是ReactDOM包已經允許開發者刪除React包添加的非必要的代碼，
並將其移動到一個更合適的存儲庫。 -->
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
輸入框的綁定簡單實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
var HelloMessage=React.createClass({
getInitialState:function(){
return {
contentText:''
}
},
changContent:function(event){
this.setState({
contentText: event.target.value
})
event.stopPropagation()
event.preventDefault()
},
render: function(){
return (
<form>
<input type="text" placeholder="說點什么吧" onChange={this.changContent} />
<p>{this.state.contentText}</p>
</form>
)
},
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>