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>

)

　显示效果

助你了解react的小demo的更多相关文章

  1. React问答小demo

    在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...

  2. MobX+react使用小demo

    第一次接触mobx,网上找了很多例子,写此主要总结一下create-react-app + mobx入门 create-react-app myreact cd myreact npm install ...

  3. 学习react，动手实现一个小demo（仿知乎问答）

    学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...

  4. React Native八大Demo

    参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水. ...

  5. 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo

    简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...

  6. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  7. Nancy之基于Nancy.Hosting.Self的小Demo

    继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...

  8. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  9. Nancy之基于Self Hosting的补充小Demo

    前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...

随机推荐

  1. EOutOfResources字符异常

    近日,用Delphi编程时,遇到一个莫名其妙的异常:EOutOfResources,这是一个可以重复再现的异常.开始以为是程序中创建的对象太多,导致占用了过多的资源,引起了这个异常.于是在代码中将许多 ...

  2. WINDOWS XP中用命令行管理用户 net user命令

    net user <username> [password or *] [/add] [options] [/domain] net user <username] /delete ...

  3. bzoj3624（铺黑白路）（并查集维护）

    题意网上自己随便找,绝对是找的到的. 题解:(白边表示鹅卵石路,黑边表示水泥路)这道题的解法,先考虑将黑边所有都先连起来,组成一个又一个的联通块,然后用白边去连, 如果可以联通的话,就用白边去代替黑边 ...

  4. Dubbo服务集群、服务启动依赖检查

    一.什么叫Dubbo服务集群 指把同一个服务部署到多台机器,然后通过Dubbo服务集群的容错配置实现一台机器的服务挂掉之后自动切换到另外的一台机器 二.Dubbo服务集群容错配置--集群容错模式 标签 ...

  5. Ubuntu 16安装GPU版本tensorflow

    pre { direction: ltr; color: rgb(0, 0, 0) } pre.western { font-family: "Liberation Mono", ...

  6. Vim的基本使用（一）

    本文为原创文章,转载请标明出处 目录 1.移动光标 2.屏幕滚动 3.模式查找 4.位置标记 5.删除文本 6.撤销与重做 7.插入文本 8.复制与移动 9.修改文本 10.写入与退出 1. 移动光标 ...

  7. FPGA在其他领域的应用(二)

    计算机和存储领域: 计算机技术和存储技术发展迅猛.如今,云计算正在实现对传统 IT 功能和全新功能的整合.例如,许多大型数据中心目前正在同时提供传统的 IT 服务以及新型的数据分析服务. 因此,这些大 ...

  8. 将本地代码上传到github

    准备工作上传本地代码到github 准备工作 在github上创建自己的Repository. 安装git,centos的git安装教程. 上传本地代码到github git init git add ...

  9. hiveQL求差集

    hive sql求差集的方法 1.什么是差集 set1 - set2,即去掉set1中存在于set2中的数据. 2.hive中计算差集的方法,基本是使用左外链接. 直接上代码 select * fro ...

  10. Linux基础命令讲解（一）

    Linux命令基本格式: 命令 [参数] [路径文件] 方括号内容可省略 查看命令帮助手段: 1 man 命令名(man 还可以获取配置文件,函数的帮助) 2 命令 --help 3 help 命令( ...