<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../../build/react-with-addons.js"></script> <script src="../../build/JSXTransformer.js"></script> </head> <body> <div id="demo"></div> <hr> <div id="app"></div> <div id="likeBtn"></div> <script type="text/jsx"> /** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function () { return <div>Hello, {this.props.name}</div>; } }); React.renderComponent(<HelloMessage name="Jack"/>, document.getElementById('demo')); </script> <script type="text/jsx"> /** @jsx React.DOM */ var App = React.createClass({ componentDidMount: function () { console.log(this.props.children); }, render: function () { return <div><span></span></div> } }); React.renderComponent(<App></App>, document.getElementById('app')); </script> <script type="text/jsx"> /** @jsx React.DOM */ var LikeButton = React.createClass({ getInitialState: function () { return { liked: false }; }, handleClick: function (event) { this.setState({ liked: !this.state.liked }); }, handleMouseEnter: function () { console.log(this); }, render: function () { var text = this.state.liked ? 'like' : 'unlike'; return ( <p onClick= {this.handleClick} > You {text} Click to toggle </p> ); } }); React.renderComponent(<LikeButton />, document.getElementById('likeBtn')); </script> </body> </html>