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

  • 相关阅读:
    PythonStudy——数据类型总结 Data type summary
    PythonStudy——可变与不可变 Variable and immutable
    PythonStudy——列表操作 List operatio
    PythonStudy——列表的常用操作 List of common operations
    PythonStudy——列表类型 List type
    PythonStudy——字符串扩展方法 String extension method
    PythonStudy——字符串重要方法 String important method
    AWT,Swing,RCP 开发
    JQuery插件机制
    最新知识网站
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6776417.html
Copyright © 2011-2022 走看看