react 学习笔记（一） 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
 var CommentBox = React.createClass({
       render: function(){
        var Comments =[];
        for(var ii=0;ii<10;ii++){
          Comments.push(
            <Comment key={'sub'+ii} />
          )
        }

         return (
              <div>
                <h1>{this.props.name}也是很有意思啊</h1>
               {Comments}
              </div>
          )
      }
    });

    var Comment = React.createClass({
       clickMe: function() {
         alert('hello world');
       },
       render: function(){
         return (
            <button onClick={this.clickMe}>
            Hello, world!
          </button>
          )
      }
    });
 
    ReactDOM.render(
       <CommentBox name="React"/>,
      document.getElementById('app')
    );
</script>
</body>
</html>

 

posted @ 2017-05-04 04:03  董晓瑞  阅读(145)  评论(0)    收藏  举报