`
</head>
<body>
<div id="area" ></div>
<script type="text/babel">
var HelloWorld = React.createClass({
propTypes:{
name: React.PropTypes.string,
isPerson: React.PropTypes.bool
},
getDefaultProps: function(){
return{
name:'scott'
}
},
render:function(){
var greeting ="world";
if(this.props.isPerson){
greeting =(<Person name={this.props.name}} />)
}
return(
<<span> hello <greeting} </span>
)
}
});
var Person = React.createClass({
propTypes:{
name: React.PropTypes.string.isRequired
},
getDefaultProps: function(){
return{
name:'scott'
}
},
render:function(){
return(
<<span> {this.props.name}</span>
)
}
});
ReactDOM.render(
<HelloWorld name=‘Tim' isPerson={true} />,
document.getElementById('area'),
);
</script>
</body>
`