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. 内核对象 windows操作系统

    问题: 什么是内核对象? 答:内核对象实际上时由内核分配的一块内存,而且只能由内核来访问.它时一个数据结构,成员包含有关于该对象的信息.一些成员对于所有对象类型都是一样的,比如对象名称.安全描述.使用 ...

  2. Java编程 “提高性能” 应尽力做到

    除了新增机器内存外,还应该好好review一下我们的代码,有很多代码编写过于随意化,这些不好的习惯或对程序语言的不了解是应该好好打压打压了. 下面是参考网络资源总结的一些在Java编程中尽可能要做到的 ...

  3. JS -- The Scope Chain 作用域链

    The Scope Chain JavaScript is a lexically scoped language: the scope of a variable can be thought of ...

  4. Spark sql ---JSON

    介绍Spark SQL的JSON支持,这是我们在Databricks中开发的一个功能,可以在Spark中更容易查询和创建JSON数据.随着网络和移动应用程序的普及,JSON已经成为Web服务API以及 ...

  5. http://codeforces.com/contest/535/problem/C

    C. Tavas and Karafs time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. python中with学习

    python中with是非常强大的一个管理器,我个人的理解就是,我们可以通过在我们的类里面自定义enter(self)和exit(self,err_type,err_value,err_tb)这两个内 ...

  7. Elasticsearch 数据搜索

    ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的REST API.本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用.虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的 ...

  8. Fix “Could not flush the DNS Resolver Cache: Function failed during execution” When Flushing DNS

    ipconfig /flushdns It is possible that you’re getting an error message “Could not flush the DNS Reso ...

  9. Linux基础命令讲解（二）

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

  10. NSOperation与GCD的如何选择？

    iOS开发的多线程实现方式,大概包括C的原始方式.NSThread方式.GCD.NSOperation的方式. 其中用的最多的应该是GCD和NSOperation的方式,很多第三方库都是使用了这两种方 ...