react_basic(2)

//react组件

<div id="example"></div>

    <script type="text/babel">  

    var HelloMessage = React.createClass({    // React.createClass  方法用于生成一个组件类  HelloMessage 。自定义的 React 类名以大写字母开头
      render:function(){
        return (<p>hello {this.props.name}</p>);
      }
    })

    ReactDOM.render(
        <div>
          <HelloMessage name="mmm" />
        </div>,
        document.getElementById('example')     //输出hello mmm 

      );

    </script>

//复合组件

<script type="text/babel"> 

    var HelloMessage = React.createClass({
      render:function(){
        return (<div>
            <NameMessage name={this.props.name}/>  //NameMessage 
            <LinkMessage link={this.props.link}/>            //LinkMessage 
        </div>);
      }
    })
     var NameMessage = React.createClass({
      render:function(){
        return (<p>hello {this.props.name}</p>);
      }
    })
    var LinkMessage = React.createClass({
      render:function(){
        return (<a href={this.props.link}>{this.props.link}</a>);
      }
    })

    ReactDOM.render(
        <div>
          <HelloMessage name="mmm" link="www.baidu.com"/>     //输出： hello mmm   www.baidu.com
        </div>,
        document.getElementById('example')
      );