zoukankan      html  css  js  c++  java
  • 第一个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>
    

      

  • 相关阅读:
    宝贝,对不起
    转帖]四川人逆境中的幽默(整理)
    见闻大量急救车急速行驶有感
    5月16日当代第一IT诗人代腾飞17XIE在线访谈(转)
    陈风莲(帮别人名字作诗)
    愉快且卓有成效:培养你与人相处的能力
    夜半再次遭遇地震
    请允许我像亲人一样去爱你
    DiscoveryService.getRemoteAdvertisements是否会获得本地通告?
    windowClosed事件不响应
  • 原文地址:https://www.cnblogs.com/shamgod/p/5049710.html
Copyright © 2011-2022 走看看