jslnriot · March 26, 2017 02:07
diff --git a/react-lifecycle-methods.js b/react-lifecycle-methods.js
 <html>
 <head>
 	<title></title>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 	<script src="https://fb.me/react-0.14.0.js"></script>
 	<script src="https://fb.me/react-dom-0.14.0.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
 </head>
 <body>
 	<div id="container"></div>

 	<script type="text/babel">
 		var MyComponent = React.createClass({
 			getDefaultProps: function(){
 				console.log('Invoking the getDefaultProps method');
 				return{
 					myProp:"Foo"
 				};
 			},
 			getInitialState: function(){
 				console.log('Invoking the getInitialState method');
 				return null;
 			},
 			componentWillMount: function(){
 				console.log('Invoking the componentWillMount method');
 			},
 			componentDidMount: function(){
 				console.log('Invoking the componentDidMount method');
 			},
 			render: function(){
 				console.log('Invoking render');
 				return(
 						<div>
 							<h1>{this.props.myProp}</h1>
 							<button onClick={this.changeProp}>Change Property</button>
 							<button onClick={this.removeHandler}>Unmount</button>
 						</div>
 					)
 			},
 			ComponentWillReceiveProps: function(){
 				console.log('Invoking the ComponentWillReceiveProps method');
 			},
 			shouldComponentUpdate: function(){
 				console.log('Invoking the shouldComponentUpdate method');
 				return true;
 			},
 			ComponentWillUpdate: function(){
 				console.log('Invoking the ComponentWillUpdate method');
 			},
 			ComponentDidUpdate: function(){
 				console.log('Invoking the ComponentDidUpdate method');
 			},
 			ComponentWillUnmount: function(){
 				console.log('Invoking the ComponentWillUnmount method');
 			},
 			changeProp: function(){
 				this.setProps({myProp: "Bar"});
 			},
 			removeHandler: function(){
 				ReactDOM.unmountComponentAtNode(document.getElementById('container'));
 			}
 		});

 		ReactDOM.render(
 				<MyComponent />,
 				document.getElementById('container')
 			);
 	</script>
 </body>
 </html>
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://fb.me/react-0.14.0.js"></script>
	<script src="https://fb.me/react-dom-0.14.0.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
	</head>
	<body>
	<div id="container"></div>

	<script type="text/babel">
	var MyComponent = React.createClass({
	getDefaultProps: function(){
	console.log('Invoking the getDefaultProps method');
	return{
	myProp:"Foo"
	};
	},
	getInitialState: function(){
	console.log('Invoking the getInitialState method');
	return null;
	},
	componentWillMount: function(){
	console.log('Invoking the componentWillMount method');
	},
	componentDidMount: function(){
	console.log('Invoking the componentDidMount method');
	},
	render: function(){
	console.log('Invoking render');
	return(
	<div>
	<h1>{this.props.myProp}</h1>
	<button onClick={this.changeProp}>Change Property</button>
	<button onClick={this.removeHandler}>Unmount</button>
	</div>
	)
	},
	ComponentWillReceiveProps: function(){
	console.log('Invoking the ComponentWillReceiveProps method');
	},
	shouldComponentUpdate: function(){
	console.log('Invoking the shouldComponentUpdate method');
	return true;
	},
	ComponentWillUpdate: function(){
	console.log('Invoking the ComponentWillUpdate method');
	},
	ComponentDidUpdate: function(){
	console.log('Invoking the ComponentDidUpdate method');
	},
	ComponentWillUnmount: function(){
	console.log('Invoking the ComponentWillUnmount method');
	},
	changeProp: function(){
	this.setProps({myProp: "Bar"});
	},
	removeHandler: function(){
	ReactDOM.unmountComponentAtNode(document.getElementById('container'));
	}
	});

	ReactDOM.render(
	<MyComponent />,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>