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. Python类，特殊方法， __getitem__，__len__， __delitem__

    特殊函数一般以__methodname__的形式命名,如:__init__(构造方法), __getitem__. __setitem__(subscriptable所需method), __deli ...

  2. 理解HTTP/304响应

    理解HTTP/304响应 原文:http://www.telerik.com/automated-testing-tools/blog/eric-lawrence/12-11-06/understan ...

  3. gdb调试运行程序带参数（调用动态链接库），debug过程记录

    library多线程file1.gdb (运行程序名称) 例如 gdb cbenchmark 2.设置运行参数 set args -c 1 -n 1 -F ./libaliww.so -l 1 3.如 ...

  4. Unity3D游戏开发之SQLite让数据库开发更简单

    各位朋友大家好.欢迎大家关注我的博客,我是秦元培,我是博客地址是http://blog.csdn.net/qinyuanpei.在经历了一段时间的忙碌后,博主最终有时间来研究新的东西啦,今天博客向和大 ...

  5. C++设计模式实现--职责链(Chain of Responsibility)模式

    一. 概述 职责链模式: 使多个对象都有机会处理请求.从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 二. 举个样例 员工要求加薪 ...

  6. Quartz 2D中CGContextSaveGState与UIGraphicsPushContext

    CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context是图形上下文 ...

  7. MySQL replace into 用法

    讨人喜欢的 MySQL replace into 用法(insert into 的增强版) 在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在: 2. 如果不存在,则插入:3.如果 ...

  8. ecshop的数据库getRow、getAll、getOne区别

    ECShop没有使用一些开源的数据库操作类,比如adodb或者PEAR,而是封装了自己的实现.这样做的好处是实现非常轻量,大大减小了分发包的文件大小.另外,当网站需要做memcached缓存时,也可以 ...

  9. Mysql主从同步(1)-主从/主主环境部署梳理

    转 :https://www.cnblogs.com/kevingrace/p/6256603.html

  10. php 不等待返回的实现方法（异步调用）

    PHP异步执行的常用方式常见的有以下几种,可以根据各自优缺点进行选择: 1.客户端页面采用AJAX技术请求服务器优点:最简单,也最快,就是在返回给客户端的HTML代码中,嵌入AJAX调用,或者,嵌入一 ...