<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<!-- 原本的 react package 被拆分為 react 及 react-dom 兩個 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 這些 API，而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。 -->
<script src="./js/browser.min.js"></script>
<!-- 使浏覽器支援babel，你可以使用ECMAscript2015編碼(javascript下一代标準) .js、.jsx、.es和.es6 -->
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let ChangeValue = React.createClass({
//ceateClass建立的類，首字母必須大寫 例如 HelloMessage
//let是ECMA6的聲明變量，用它所聲明的變量， 隻在let指令所在的代碼塊内有效。
getInitialState(){
//getInitialState 是系統固定方法，不能變更
//用于設定 this.state 内的初始屬性
return {value : 'hello!'};
},
handleChange(event){
//this.setState({})用于設定 this.state的屬性
this.setState({value : event.target.value});
},
render(){
//擷取input标簽 的值，需要使用onChange方法 , 需要使用小駝峰寫法
let value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>
{value}
</p>
</div>
);
}
});
ReactDOM.render(
<ChangeValue />,
document.getElementById('ex1')
)
</script>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)