助你了解react的小demo

React是个啥

          React 是一个用于构建用户界面的 JAVASCRIPT 库。

          React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

          React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

          React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React 特点

        1.声明式设计 −React采用声明范式,可以轻松描述应用。

        2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

        3.灵活 −React可以与已知的库或框架很好地配合。

        4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

        5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

        6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

React demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React-Template</title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/react.min.js"></script>
    <script src="../js/react-dom.min.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
	<div id="container"></div>
<script type="text/babel">
    
    var Board = React.createClass({
    	
    	getInitialState :function(){
    		return ({
    			comments:["Hello Everybody","Hello Everybody","Welcome to Jredu","这是一个react小项目"]
    		});
    	},
    	updateComment: function(newText,i){
//  		console.log(newText);
            var arr=this.state.comments;
            arr[i] = newText;
            this.setState({comments : arr});
    	},
    	removeComment: function(i){
            var arr = this.state.comments;
    		arr.splice(i,1);
    		this.setState({comments : arr});
    	},
    	add:function(text){
    		var arr = this.state.comments;
        	arr.push(text);
        	//更新我们的状态
            this.setState({comments : arr});
    	},
    	eachComment:function(text,i){
    		return(
		   	   	<Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>{text}</Comment>
    		);
    	},
    	
    	render : function(){
    		return (
    			<div>
    			    <button onClick={this.add.bind(null,"文本对象")} className="button-info create">Add New</button>
	    			<div className = "board">
	    			   {
	    			      	this.state.comments.map(this.eachComment)
	    			   }
	    			</div>
    			</div>
    		);
    	}
    });
    
	var Comment = React.createClass({
		getInitialState : function(){
			return ({
				editing:false
			});
		},
		edit: function(){
//			alert("Editing comment");
            this.setState({editing:true});
		},
		save:function(){
			var val = this.refs.newText.value;
//			console.log("拿到的值"+val);
            this.props.updateCommentText(val,this.props.index);
			this.setState({editing:false});
		},
		remove: function(){
//			 alert("removing comment!");
              this.props.deleteFromBoard(this.props.index);
		},
		
		renderNoraml: function(){
			return (
				<div className="commentContainer">
					<div>{this.props.children}</div>
					<button onClick={this.edit} className="button-primary">edit</button>
					<button onClick={this.remove} className="button-danger">remove</button>
				</div>
			);
		},
		renderForm: function(){
			return (
				<div className="commentContainer">
					<textarea ref="newText" defaultValue={this.props.children}></textarea>
					<button onClick={this.save} className="button-success">save</button>
				</div>
			);
		},
		render:function(){
			
			if (this.state.editing) {
				return this.renderForm();
			} else{
				return this.renderNoraml();
			}
		}
	});
	
	ReactDOM.render(
		<Board />,
		document.getElementById('container')
	);
</script>
</body>
</html>
)

 显示效果

原文地址:https://www.cnblogs.com/liuqiang1109/p/7788381.html