React 创建自己定义控件
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 创建自己定义控件的更多相关文章
- android学习七（创建自己定义控件）
前面学习的是android的基本控件和布局的使用,可是主要的控件和布局有时候并不能实现复杂的布局.我们来看下各种控件和布局的关系. 可见全部的控件都是直接或者间接的继承自View的,全部的布局都是直接 ...
- 【Android】自己定义控件——仿天猫Indicator
今天来说说类似天猫的Banner中的小圆点是怎么做的(图中绿圈部分) 在学习自己定义控件之前,我用的是很二的方法,直接在布局中放入多个ImageView,然后代码中依据Pager切换来改变图片.这样的 ...
- Android自己定义控件系列二：自己定义开关button（一）
这一次我们将会实现一个完整纯粹的自己定义控件,而不是像之前的组合控件一样.拿系统的控件来实现.计划分为三部分:自己定义控件的基本部分,自己定义控件的触摸事件的处理和自己定义控件的自己定义属性: 以下就 ...
- Android自己定义控件：进度条的四种实现方式
前三种实现方式代码出自: http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/ (源代码下载)http://down ...
- 关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false
关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false 我们在 Unity 中通过 UI 菜单创建的各种控件,比如 Text, Image 等, ...
- Android自己定义控件
今天我们来讲一下 Android中自己定义控件的介绍,在Android中, 我们一般写xml都是用的是单个的控件来完毕的 ,但是.往往在一些项目中.单个控件有时是满足不了的.故此我们能够自己定义控件 ...
- android 自己定义控件
Android自己定义View实现非常easy 继承View,重写构造函数.onDraw.(onMeasure)等函数. 假设自己定义的View须要有自己定义的属性.须要在values下建立attrs ...
- duilib中加入自己定义控件之后怎么可以在xml文件里配置使用
加入自己定义控件可能有两种不同的情况: 1. 在duilib库中加入的自己定义控件. 2. 在我们的应用程序中自己重写了一个控件. 以下開始解说不同的情况下怎么才干支持在xml文件配置控件: 1. ...
- Android自己定义控件系列案例【五】
案例效果: 案例分析: 在开发银行相关client的时候或者开发在线支付相关client的时候常常要求用户绑定银行卡,当中银行卡号一般须要空格分隔显示.最常见的就是每4位数以空格进行分隔.以方便用户实 ...
随机推荐
- JS 运算、判断优化
1.二级制操作优于Math 如: //函数向下取整 console.log(Math.floor(8.9)); //二进制向下取整 console.log(8.9>>0); 2.慎用|| ...
- [Exception JavaWeb 1] - javax.el.PropertyNotFoundException: Property 'id' not found on ..........
好久不写Web应用了,今天碰到这个问题的时候,还一时半会没反应过来.实体类在jsp无法找对应的值. 最后发现是实体bean的属性的开头字母不能与次字母不能大写+小写或小写+大写,最后改成小写+小写就好 ...
- 【Oracle】在win10上安装Oracle客户端报错：[INS-13001]环境不满足最低要求
环境:win10 64bit 客户端工具: 安装的时候报错: 解决方案: 在\client\stage\cvu目录下找到如下两个文件: 编辑这两个文件,在文件中分别添加如下内容 <OPERATI ...
- php 缓冲区总结
我们先来看一段代码. <?php for ($i=10; $i>0; $i--) { echo $i; flush(); sleep(1); } ?> 按照php手册里的说法 该函数 ...
- ubuntu——Kconfig、.config、Makefile的关系
原文地址:http://blog.csdn.net/estate66/article/details/5886816 ,本人对此文有改进. 当我们编写完一个驱动后,我们要把它以模块形式编译或者直接编译 ...
- 转载：【Linux+windows】PHP5.5安装PHPRedis扩展
首先,你必须安装了 Redis服务器,然后才能安装php-redis扩展,就像先安装mysql,然后再将php-mysql扩展安装并引入(区别是:php-redis扩展插件php没有自带,php-my ...
- C#指南，重温基础，展望远方！（12）C#特性
C# 程序中的类型.成员和其他实体支持使用修饰符来控制其行为的某些方面. 例如,方法的可访问性是由 public.protected.internal 和 private 修饰符控制. C# 整合了这 ...
- maple minimax函数
numapprox[minimax] - minimax rational approximation Calling Sequence minimax(f, x=a..b, [m, n], w, ...
- 用注册表更改DNS的代码分享
用注册表更改DNS,1秒切换完毕,快速又方便,不用麻烦的去等待了,支持远程路劲运行 最进我这里DNS老是间歇性掉,很不稳定,广州地区,如果你的DNS经常需要更换,试试这个批处理, 论坛很多人发过了更改 ...
- 二叉排序树及其C代码
1.二叉排序树的定义 二叉排序树(Binary Sort Tree)又称二叉查找(搜索)树(Binary Search Tree).其定义为:二叉排序树或者是空树, 或者是满足例如以下性质的二叉树 ...