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. java获取MP3的播放长度

    在开发一个web项目时,需要获取MP3的播放长度.上网找了一些方法,最后找到了一个可以用的java包jaudiotagger-2.2.3.jar,java包网址http://www.jthink.ne ...

  2. 变量的声明和定义以及extern的用法

    变量的声明和定义以及extern的用法                                          变量的声明不同于变量的定义,这一点往往容易让人混淆. l         变量 ...

  3. Integer的自动拆箱

    public class Test2{ public static void main(String[] args){ Integer a=1; Integer b=2; Integer c=3; I ...

  4. P1045

    问题 A: P1045 时间限制: 1 Sec  内存限制: 128 MB提交: 145  解决: 127[提交][状态][讨论版] 题目描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加 ...

  5. C#进阶之AOP

    一.AOP概念(转自) AOP(Aspect-Oriented Programming,面向切面的编程),它是可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技 ...

  6. zoj3211dream city dp 斜率

    Dream City Time Limit: 1 Second      Memory Limit:32768 KB JAVAMAN is visiting Dream City and he see ...

  7. SQL查询和删除重复字段的内容

    --例如: id NAME VALUE 1 a pp 2 a pp 3 b iii 4 b pp 5 b pp 6 c pp 7 c pp 8 c iii --id是主键 --要求得到这样的结果 id ...

  8. WPF 快捷方式

    http://www.cnblogs.com/gnielee/archive/2010/07/16/wpf-custom-hotkey-command.html

  9. c# 接口实用

    学习接口,还是记下来吧,不然以后忘记,这个东西也不是常用. interface Interface1 {  } 接口中不能有字段, 只能声明方法.

  10. dotweb框架之旅 [二] - 常用对象-App(dotweb)

    dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...