第一个React程序HelloWorld

一、程序步骤

1.用React.createClass生成组件

2.调用React.render把组件渲染到页面中，dom的操作由react自动完成

二、代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src="./react-0.13.2/build/react.js"></script>
    <script src="./react-0.13.2/build/JSXTransformer.js"></script>
	<script type="text/jsx">
		var HelloWorld = React.createClass({
			render: function(){
				return <p>你好React</p>;
			}
		});
		React.render(<HelloWorld></HelloWorld>, document.body);
	</script>
</body>

</html>

　　运行结果：

 

运行后的源代码：

<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var HelloWorld = React.createClass({
        displayName: "HelloWorld",
        render: function() {
            return React.createElement("p", null, "你好React");
        }
    });
    React.render(React.createElement(HelloWorld, null), document.body);

    //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbIklubGluZSBKU1ggc2NyaXB0Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsSUFBSSxnQ0FBZ0MsMEJBQUE7R0FDbkMsTUFBTSxFQUFFLFVBQVU7SUFDakIsT0FBTyxvQkFBQSxHQUFFLEVBQUEsSUFBQyxFQUFBLFNBQVcsQ0FBQSxDQUFDO0lBQ3RCO0dBQ0QsQ0FBQyxDQUFDO0VBQ0gsS0FBSyxDQUFDLE1BQU0sQ0FBQyxvQkFBQyxVQUFVLEVBQUEsSUFBYyxDQUFBLEVBQUUsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXG5cdFx0dmFyIEhlbGxvV29ybGQgPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG5cdFx0XHRyZW5kZXI6IGZ1bmN0aW9uKCl7XG5cdFx0XHRcdHJldHVybiA8cD7kvaDlpb1SZWFjdDwvcD47XG5cdFx0XHR9XG5cdFx0fSk7XG5cdFx0UmVhY3QucmVuZGVyKDxIZWxsb1dvcmxkPjwvSGVsbG9Xb3JsZD4sIGRvY3VtZW50LmJvZHkpO1xuXHQiXX0=
    </script>
</head>

<body>
    <p data-reactid=".0">你好React</p>
</body>

</html>

　　

posted @ 2015-12-15 22:09  shamgod  阅读(1766)  评论(0)    收藏  举报
haha