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. 西邮linux兴趣小组2014纳新免试题（三）

    [第三关] 题目 http://sortsth.sinaapp.com/ 分析 查看网页源码,得知题目让找出6种排序算法,每次刷新或提交序列都变化. 15种算法清单: CountingSort     ...

  2. Java随机数的使用

    在java中实现随机数的类有两种,分别是和java.util.Math 和 java.util.Random 第一种:java.lang.Math.random() Math.random()方法创建 ...

  3. textarea文本域值中含有大量\t\n问题

    最近在发现了一个问题,很是头疼,textarea值中有大量的制表符,尝试了很多办法,最终找到了解决办法,希望能帮到同样有此困扰的你. <textarea> <c:out value= ...

  4. C#的"?"修饰符和"??"运算符

    一.  ?  可空类型修饰符 “?”用来修饰为空的值类型,在加上“?”修饰符后,值类型也可以为空了,如: public int? CommandTimeout { get; }: var prop = ...

  5. SSH端口转发详解及实例

    一.SSH端口转发简介 SSH会自动加密和解密所有SSH客户端与服务端之间的网络数据.但是,SSH还能够将其他TCP端口的网络数据通SSH链接来转发,并且自动提供了相应的加密及解密服务.这一过程也被叫 ...

  6. Hive 存储类型 StoreType

    file_format: : SEQUENCEFILE | TEXTFILE -- (Default, depending on hive.default.fileformat configurati ...

  7. （译）通过 HTML、JS 和 Electron 创建你的第一个桌面应用

    原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...

  8. bzoj3997组合数学（求最长反链的dp）

    组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...

  9. dubbo负载均衡策略及对应源码分析

    在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用.我们还可以扩展自己的负责均衡策略,前提是你已经从一个小白变成了大牛,嘻嘻 1.Random LoadBalance 1 ...

  10. 【JAVA零基础入门系列】Day4 变量与常量

    这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...