React (ii) Realization of bidirectional data flow

<div id="app"></div>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<! -- an extension of introducing react -- >
<script src="bower_components/react/react-with-addons.min.js"></script>
<script src="lib/babel-core/browser.min.js"></script>
<script type="text/babel">
var EasyForm = React.createClass({
//Introducing mixins
mixins: [React.addons.LinkedStateMixin],
getInitialState: function () {
Return {
message: ‘react is awesome‘,
isReactAwesome: true
}
}
render: function () {
Return (
<div>
<h1>I want to say: {this. State. Message}</h1>
<h2>Is react easy to use? {this. State. Isreactawesome? '"very easy to use! ':' general... '}</h2>
<input type="text" valueLink={this.linkState(‘message‘)}/>
<br/>
<input type="checkbox" checkedLink={this.linkState(‘isReactAwesome‘)}/>
<br/>
<SubComp {...this.props}/><!--spread-->
</div>
);
}
};
var SubComp = React.createClass({
render: function () {
Return (
<div>
<h3>This is a subcomponent</h3>
<SubSubComp {...this.props}/>
</div>
)
}
};
var SubSubComp = React.createClass({
render: function () {
Return (
<div>
<p>What do you want to say? </p>
<input type="text" valueLink={this.props.messageLink}/>
<p>Do you care less about react? </p>
<input type="checkbox" checkedLink={this.props.likeLink}/>
</div>
)
}
};
ReactDOM.render(
<EasyForm/>,
document.getElementById(‘app‘)
);
</script> 

React (ii) Realization of bidirectional data flow