JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
CSS
a {
color: #0074d9;
text-decoration: underline;
cursor: pointer;
}
span {
color: #3d9970;
}
JavaScript 1.7
/** @jsx React.DOM */
var AddAccount = React.createClass({
handleRegistration: function() {
this.props.updateAccount(true);
},
render: function() {
return <a onClick={this.handleRegistration}>Create my account</a>;
}
});
var AccountAdded = React.createClass({
render: function() {
return <span>Account exists now</span>;
}
});
var RegisterAccount = React.createClass({
getInitialState: function() {
return {
hasAccount: false
};
},
updateAccountStatus: function(status) {
this.setState({
hasAccount: status
});
},
render: function() {
return (
<div>
{this.state.hasAccount ? <AccountAdded /> : <AddAccount updateAccount={this.updateAccountStatus} />}
</div>
);
}
});
React.renderComponent(<RegisterAccount />, document.body);