React是Facebook的内部项目，当时facebook对自己市面上全部的javascript MVC都不惬意，于是就自己创建了一个新的框架。发现还挺好用。于是就开源了，这就是React。

React简直是颠覆了以往的编程习惯，曾经一贯是主张UI和逻辑分离，然后react却背道而驰，将UI和逻辑有机的结合起来。简直胆大，然而确实有种美感

首先React一个突出的功能是代码重用，为什么呢，由于它某种意义上是在创建自己定义控件，这在Html里算是个突破了。话不多说以下就来演示一下主要的使用方法。

1. 首先我们须要去React官网下载React框架，Download Starter Kit 0.13.3

2. 将下载下来的文件导入project中。在这里我仅仅导入了两个文件

3. 新建一个写有控件的jsx文件。使用react框架的js文件都是以jsx命名的。在这里将其命名为login.jsx,并写入下面代码

var UserLogin = React.createClass({

	getDefaultProps:function(){

		return {

			labelUsername:  "username",

			labelPassword:  "password",

		};

	},

	render: function(){

		return <div style={{marginTop: 20, marginLeft: 20}}>

					<div>

						<label>{this.props.labelUsername}</label>

						<input type="text" style={{marginLeft: 20}}/>

					</div>

					<div style={{marginTop: 10}}>

						<label>{this.props.labelPassword}</label>

						<input type="text" style={{marginLeft: 36}}/>

					</div>

			   </div>;

	},

});

4. 新建一个html文件test.html，并加入例如以下代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title id="title">Test</title>

	<script type="text/javascript" src="react.js"></script>

	<script type="text/javascript" src="JSXTransformer.js"></script>

	<script type="text/jsx" src="login.jsx"></script>

</head>

<body>

	<div id="moduleLogin"></div>

	<script type="text/jsx">

        React.render(

            <div>

            	<UserLogin/>

            </div>,

            document.getElementById('moduleLogin')

        );

	</script>

</body>

</html>



OK，一个简单的演示样例创建完毕了，执行后效果例如以下

源码下载页：http://download.csdn.net/detail/leyyang/8989083

React 创建自己定义控件的更多相关文章

  1. android学习七（创建自己定义控件）

    前面学习的是android的基本控件和布局的使用,可是主要的控件和布局有时候并不能实现复杂的布局.我们来看下各种控件和布局的关系. 可见全部的控件都是直接或者间接的继承自View的,全部的布局都是直接 ...

  2. 【Android】自己定义控件——仿天猫Indicator

    今天来说说类似天猫的Banner中的小圆点是怎么做的(图中绿圈部分) 在学习自己定义控件之前,我用的是很二的方法,直接在布局中放入多个ImageView,然后代码中依据Pager切换来改变图片.这样的 ...

  3. Android自己定义控件系列二：自己定义开关button（一）

    这一次我们将会实现一个完整纯粹的自己定义控件,而不是像之前的组合控件一样.拿系统的控件来实现.计划分为三部分:自己定义控件的基本部分,自己定义控件的触摸事件的处理和自己定义控件的自己定义属性: 以下就 ...

  4. Android自己定义控件：进度条的四种实现方式

    前三种实现方式代码出自: http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/ (源代码下载)http://down ...

  5. 关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false

    关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false 我们在 Unity 中通过 UI 菜单创建的各种控件,比如 Text, Image 等, ...

  6. Android自己定义控件

    今天我们来讲一下 Android中自己定义控件的介绍,在Android中, 我们一般写xml都是用的是单个的控件来完毕的 ,但是.往往在一些项目中.单个控件有时是满足不了的.故此我们能够自己定义控件 ...

  7. android 自己定义控件

    Android自己定义View实现非常easy 继承View,重写构造函数.onDraw.(onMeasure)等函数. 假设自己定义的View须要有自己定义的属性.须要在values下建立attrs ...

  8. duilib中加入自己定义控件之后怎么可以在xml文件里配置使用

    加入自己定义控件可能有两种不同的情况: 1.  在duilib库中加入的自己定义控件. 2.  在我们的应用程序中自己重写了一个控件. 以下開始解说不同的情况下怎么才干支持在xml文件配置控件: 1. ...

  9. Android自己定义控件系列案例【五】

    案例效果: 案例分析: 在开发银行相关client的时候或者开发在线支付相关client的时候常常要求用户绑定银行卡,当中银行卡号一般须要空格分隔显示.最常见的就是每4位数以空格进行分隔.以方便用户实 ...

随机推荐

  1. SyntaxError: Non-UTF-8 code starting with '\xc5' in file t.py on line 3,but no encoding declared;see http://python.org/dev/peps/pep-0263/ for details

    解决方案是: 在程序最上面加上:# coding=gbk 这样程序就可以正常运行了.

  2. 【Linux】df命令

    用途 df命令主要用于检查Linux服务器的文件系统的磁盘空间占用情况 全称 df的全称为:Disk Free 参数 -a :全部文件系统列表 -h :方便阅读显示 -H :等于"-h&qu ...

  3. 【微信支付】公众号、商户基础配置和流程（包括设置支付授权目录、测试支付目录和白名单、JS接口安全域名、授权回调域名等）

    一.使用场景以及说明 使用场景:商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 说明:1.用户打开图文消息或者扫描二维码,在微信内置浏览器打开网 ...

  4. javascript通用函数库

    /* -------------- 函数检索 -------------- trim函数:                         trim() lTrim() rTrim() 校验字符串是否 ...

  5. java语言国际化--ResouceBundle、struts

    一.Java国际化 我们使用java.lang.Locale来构造Java国际化的情境. java.lang.Locale代表特定的地理.政治和文化.需要Locale来执行其任务的操作叫语言环境敏感的 ...

  6. HttpPutFormContentFilter 和 ContextLoaderListener 讲解

    1 ContextLoaderListener 继承自ContextLoader,并且实现ServletContextListener接口. 肯定得实现这个接口了,不然怎么作为Servlet的监听器呢 ...

  7. Experience on Namenode backup and restore --- checkpoint

    Hadoop version: Hadoop 2.2.0.2.0.6.0-0009 Well, We can do this by building Secondary Namenode, Check ...

  8. 2015 HDU 多校联赛 5317 RGCDQ 筛法求解

    2015 HDU 多校联赛 5317 RGCDQ 筛法求解 题目  http://acm.hdu.edu.cn/showproblem.php? pid=5317 本题的数据量非常大,測试样例多.数据 ...

  9. PHP 生成唯一的激活码

    <? php /** * 生成永远唯一的激活码 * @return string */ function create_guid($namespace = null) { static $gui ...

  10. java中null和""的区别

    问题一: null和""的区别 String s=null; s.trim()就会抛出为空的exception String s=""; s.trim()就不会 ...