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. windows bat文件运行中文乱码

      windows bat文件运行中文乱码 CreationTime--2018年7月17日08点51分 Author:Marydon 1.情景展示 运行bat文件,里面的中文提示显示乱码 2.问题剖 ...

  2. 【Linux】用户权限设置，配合FTP访问

    转载自: http://blog.csdn.net/fengeh/article/details/16819563 领导需求,需要创建用户,并允许其增删改,却又要求其只能在自己的访问目录内,不能去别的 ...

  3. C#USB录像视频拍照-代码

    论坛帖:http://bbs.csdn.net/topics/390536016 using System; using System.Collections.Generic; using Syste ...

  4. MFC显示GIF动画图片

    本帖则将讨论如何在MFC的对话框里显示GIF动画图片.一些关于传统控件的美化方法正在研究当中会陆续发帖的. 这是本帖用到的一个VS2008例程.  附件  GifPicture.rar (138.1 ...

  5. DevExpress中GridControl列转义的实现方法

    /// <summary> /// CustomColumnDisplayText Helper /// </summary> /// <param name=" ...

  6. Swift 的 pod 第三方库

    #HTTPpod 'Alamofire' #Elegant HTTP Networking in Swiftpod 'SwiftHTTP' #Thin wrapper around NSURLSess ...

  7. iOS中Storyboard使用要点记录

    摘要: Storyboard的使用与原本单个xib文件的使用还是有些不同的,于习惯上会有些出入.在这里记下遇到的要点. 1.将第一个ViewController用设置成NavigationContro ...

  8. [Jobdu] 题目1139：最大子矩阵

    题目描述: 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩阵.比如,如下4 * 4的矩阵 0 -2 -7 09 2 -6 2-4 1 -4 ...

  9. centos中安装openjdk

    openjdk的java环境还是简单好用,至于其他的,现在又用不到,为啥要费事安装它们? 步骤: 1.yum search java | grep jdk [root@noi ~]# yum sear ...

  10. 计算机图形学（一） 视频显示设备_1_CRT原理

    第 1 章 图形系统概述        如今.计算机图形学的作用与应用已经得到了广泛承认.大量的图形硬件和软件系统已经应用 到了差点儿全部的领域.通用计算机甚至很多手持计算器也已经普遍具备 二维及三维 ...