<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
在这里添加你的代码
*/
class Hello extends React.Component {
constructor() {
super();
this.state = {
message: '我是张艳波',
user: {
firstName: 'yanbo',
lastName: 'zhang'
}
};
this.updateMessage = this.updateMessage.bind(this);
};
updateMessage() {
this.setState({
message: 'my friend (from changed state)'
})
}
formatName(user) {
return user.firstName + ' ' + user.lastName
}
render() {
return (
<div>
<h1>hello {this.state.message}</h1>
<h4>{this.formatName(this.state.user)}</h4>
<button onClick={this.updateMessage}>Click me!!</button>
</div>
)
}
}
ReactDOM.render(
<Hello message="zhangyanbo"/ >,
document.getElementById("root")
);
</script>
</body>
</html>
