第一个React实例

前端之家收集整理的这篇文章主要介绍了第一个React实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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包中的实例是很好的学习资料。

猜你在找的React相关文章