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. 单选框input:radio

      单选框 CreateTime--2017年5月15日11:40:04 Author:Marydon 四.单选框 (一)语法 <input type="radio"/> ...

  2. java注解，通过反射解析注解，模仿hibernate，获取sql语句。

    常用注解: 自定义注解,标准格式: 1,target:注解作用域 2,Retention:声明周期 运行子类继承,但是子类继承只能作用到类注解,字段注解,是继承不了的. 使用注解:通过下面这种方式,为 ...

  3. javascript 新知识

     document.compatMode 属性 BackCompat: Standards-compliant mode is not switched on. (Quirks Mode)  标准模式 ...

  4. java的重写、重载、覆盖的差别

    多态性  通过继承,一个类能够用作多种类型:能够用作它自己的类型.不论什么基类型,或者在实现接口时用作不论什么接口类型.这称为多态性  重载  每一个类型成员都有一个唯一的签名.方法签名由方法名称和一 ...

  5. （二）hibernate进阶

    1.hibernate.cfg.xml常用配置以上节代码为例 <session-factory> <property name="connection.username&q ...

  6. 计算机必知必会：进程process与线程thread 进程定义为一个正在运行的程序的实例

    http://www.nowamagic.net/librarys/veda/detail/1741进程和线程这对概念的理解也是很难的,至今网络上可查的资料对其的理解出入都挺大,在不同的操作系统中,如 ...

  7. 扩展GeoServer数据源

    今天我们来讲讲怎么扩展GeoServer(简称GS)的数据源.大家都知道,GS支持多种数据源,而且都提供了友好的界面供操作.下面我们就来简单介绍一下,如何把自定义的数据源增加到GS中,让我们可以在统一 ...

  8. hibernate中对象集合的保存

    一.在java web设计中经常使用对象进行操作,在hibernate中对象集合的保存(一对多) 1需要进行如下步骤: 1) 设计数据表关系 2)引入jar包,需要注意引入数据库connector 3 ...

  9. FTPHelper-封装FTP的相关操作

    using System; using System.IO; using System.Net; using System.Text; namespace Whir.Software.DataSync ...

  10. 简洁经常使用权限系统的设计与实现(一):构造权限菜单树的N(N&gt;=4)种方法

    权限系统.Web开发常见标准子系统之中的一个.结合自己的一些思考和实践,从本篇開始权限系统的设计与实现之路. 近期,重构了项目的权限菜单构造过程,向前端返回json格式的权限树. 这一篇.仅仅是大致介 ...