菜鸟学堂在线工具

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟学堂 React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    var Content = React.createClass({
      render: function() {
        return  <div>
                  <button onClick = {this.props.updateStateProp}>点我</button>
                  <h4>{this.props.myDataProp}</h4>
               </div>
      }
    });
    var HelloMessage = React.createClass({
      getInitialState: function() {
        return {value: 'Hello edu.jb51.net!'};
      },
      handleChange: function(event) {
        this.setState({value: '菜鸟学堂'})
      },
      render: function() {
        var value = this.state.value;
        return <div>
                <Content myDataProp = {value} 
                  updateStateProp = {this.handleChange}></Content>
               </div>;
      }
    });
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('example')
    );
    </script>
</body>
</html>

运行结果 在线运行