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>