React 创建自定义控件

发布时间：2020-12-15 04:50:03 所属栏目：百科来源：网络整理

导读：React是Facebook的内部项目，当时facebook对自己市面上所有的javascript MVC都不满意，于是就自己创建了一个新的框架，发现还挺好用，于是就开源了，这就是React。 React简直是颠覆了以往的编程习惯，以前一贯是主张UI和逻辑分离，然后react却背道而驰，将UI

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!