React 创建自定义控件

最新推荐文章于 2024-06-08 12:33:18 发布

SamYoc

最新推荐文章于 2024-06-08 12:33:18 发布

阅读量7.6k

点赞数 1

分类专栏： React JavaScript Web 文章标签： React JavaScript Html

本文链接：https://blog.csdn.net/LeyYang/article/details/47414913

版权

Web 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

React

4 篇文章 0 订阅

订阅专栏

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

SamYoc

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React 创建自定义控件

React是Facebook的内部项目，当时facebook对自己市面上所有的javascript MVC都不满意，于是就自己创建了一个新的框架，发现还挺好用，于是就开源了，这就是React。React简直是颠覆了以往的编程习惯，以前一贯是主张UI和逻辑分离，然后react却背道而驰，将UI和逻辑有机的结合起来，简直胆大，然而确实有种美感首先React一个突出的功能是代码重用，为什
复制链接

扫一扫

专栏目录