firstDemo.html
<!DOCTYPE html>
<html >
<head>
<script src="es5-shim.min.js"></script>
<script src="es5-sham.min.js"></script>
<script src="console-polyfill.js"></script>
<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="content" ></div>
<script type="text/jsx">
//React.render(<h1>Hello,World</h1>,document.getElementById("content"));
var ExampleApplication = React.createClass({
getInitialState: function(){
return {img: "image1.jpg"};
},componentDidMount: function(){
var $this = this;
setInterval(function() {
$this.setState({
img: $this.state.img == "image1.jpg" ? "image2.jpg" :"image1.jpg"
});
},1000);
},render: function() {
return <img width="500" height="400" src={this.state.img} />;
}
});
React.render(
<ExampleApplication/>,document.getElementById('content')
);
</script>
</body>
</html>
运行效果：两张图张在页面不停进行切换
完整工程见：firstDemo.rar，官方react-0.13.2.zip包中的实例是很好的学习资料。