zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    WinForm窗体传值 总结
    SQLServer遍历数据库所有表及统计表数据总数
    GridView合并行代码
    日期转换成字符串
    flex与js交互浅析
    九,query task
    八,graphics
    十,Find and Identity
    转移批令
    db dw dd 和 dup
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6776417.html
Copyright © 2011-2022 走看看