                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /React.JS
                        
                        /React入門(mén)

最新版本的react代碼，親測(cè)可用

<!DOCTYPE?html>
<html>
	<head>
		<meta?charset="utf-8"?/>
		<title></title>
		<script?type="text/javascript"?src="js/react.js"></script>
		<script?type="text/javascript"?src="js/react-dom.js"></script>
?		<script?src="js/browser.min.js"></script>
	</head>
	<body>
		<div?id="container"></div>
		<script?type="text/babel">
			var?TestClickComponent?=?React.createClass({
				handleClick:function(event){
					var?tipE?=?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.handleClick}>顯示|隱藏</button><span?ref='tip'>測(cè)試點(diǎn)擊顯示隱藏</span>
						</div>
					);
				}
			});
			
			var?TestInputComponent?=?React.createClass({
				getInitialState:?function()?{
		??????????return?{inputContent:?''};
		????????},
				changeHandler:function(event){
			????????
					this.setState({
						inputContent:?event.target.value
					});
					
					event.preventDefault();
					event.stopPropagation();
				},
				render:function(){
					return?(
						<div>
							<input?type="text"?onChange={this.changeHandler}/><span?ref='tip'>{this.state.inputContent}</span>
						</div>
					);
				}
			});
			
			ReactDOM.render(
				<div>
					<TestClickComponent/>
					<br?/><br?/><br?/>
					<TestInputComponent/>
				</div>,
				document.getElementById('container')
			);
		</script>
	</body>
</html>