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