React.js component mounting unmounting
Hello React - component lifecycle - mounting and unmounting.
author(s):
Ryan Vice
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="view"/>
Babel + JSX
var HelloMessage = React.createClass({
componentWillMount: function() {
console.log('componentWillMount');
},
componentDidMount: function() {
console.log('componentDidMount');
},
componentWillUnmount: function() {
debugger;
console.log('componentWillUnmount');
},
render: function() {
console.log('render');
return <h2>{this.props.message}</h2>;
}
});
var Button = React.createClass({
render: function() {
return <button onClick={this.props.onClick}>{this.props.children}</button>
}
});
var GlyphIcon = React.createClass({
render: function() {
return <span className={'glyphicon glyphicon-' + this.props.icon}></span>
}
});
var TextBox = React.createClass({
getInitialState: function() {
return { isEditing: false, text: this.props.label }
},
update: function() {
var value = React.findDOMNode(this.refs.messageTextBox).value;
this.setState(
{
isEditing: false
});
this.props.update(value);
},
edit: function() {
this.setState({ isEditing: true});
},
render: function() {
return (
<div>
{this.props.label}<br/>
<input type='text' ref='messageTextBox' disabled={!this.state.isEditing}/>
{
this.state.isEditing ?
<Button onClick={this.update}><GlyphIcon icon='ok'/> Update</Button>
:
<Button onClick={this.edit}><GlyphIcon icon='pencil'/> Edit</Button>
}
</div>
);
}
});
var HelloReact = React.createClass({
getInitialState: function () {
return { firstName: '', lastName: ''}
},
update: function(key, value) {
var newState = {};
newState[key] = value;
this.setState(newState);
},
reload: function() {
...