React 创建自定义控件

前端之家收集整理的这篇文章主要介绍了React 创建自定义控件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React是Facebook的内部项目,当时facebook对自己市面上所有的javascript MVC都不满意,于是就自己创建了一个新的框架,发现还挺好用,于是就开源了,这就是React。


React简直是颠覆了以往的编程习惯,以前一贯是主张UI和逻辑分离,然后react却背道而驰,将UI和逻辑有机的结合起来,简直胆大,然而确实有种美感

首先React一个突出的功能代码重用,为什么呢,因为它某种意义上是在创建自定义控件,这在Html里算是个突破了。话不多说下面就来演示一下基本的用法

1. 首先我们需要去React官网下载React框架,Download Starter Kit 0.13.3

2. 将下载下来的文件导入工程中,在这里我只导入了两个文件

3. 新建一个写有控件的jsx文件,使用react框架的js文件都是以jsx命名的,在这里将其命名为login.jsx,并写入以下代码

var UserLogin = React.createClass({
	getDefaultProps:function(){
		return {
			labelUsername:  "用户名",labelPassword:  "密码",};
	},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

猜你在找的React相关文章