React 创建自己定义控件
2024-08-26 01:21:34
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
最新文章
- Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId
- C语言中的强符号与弱符号
- Mono Fragment之间转换
- Mysql 查看连接数,状态
- sp_help 快速查看表结构、视图信息
- JavaScript常用代码
- 51nod1022 石子归并 V2
- 03_JqueryAjax_异步请求Servlet
- HTML中的a标签实现点击下载
- 51nod_1677:treecnt
- 获取sd卡的总大小和可用大小
- 虚拟机下 solr7.1 cloud 集群搭建 (手动解压和官方脚本两种方式)
- Oracle知识梳理(三)操作篇:SQL基础操作汇总
- 使用埃拉托色尼筛选法(the Sieve of Eratosthenes)在一定范围内求素数及反素数(Emirp)
- CoAP、MQTT、RESTful协议区别
- FastAdmin 的上传代码在哪里?
- SED单行脚本快速参考(Unix 流编辑器)
- 分享一个android debug模式,出现 waiting for debugger把界面卡住,取巧的解决办法
- Spark笔记之使用UDAF(User Defined Aggregate Function)
- 20170706wdVBA正则表达式提取题目
热门文章
- 转:不在同一个服务器上的数据库之间的数据操作(oracle/sql server的对比)
- ant design pro(二)布局
- windows C:\documents and settings拒绝访问
- [Done]java.sql.SQLException: Connection is read-only. Queries leading to data modification are not allowed
- 站点CSS样式不起作用,或仅仅有一部分起作用?随手记
- moment
- ASP.NET MVC之Html.RenderAction(无操作方法 传参数)
- 11g RAC 加节点 之 手动加入vip 资源
- spring中ApplicationContext
- MySQL存储过程使用实例详解