jeffling/reactLifecycle.html

## reactLifecycle.html
<!DOCTYPE html>

<html>
<head>
  <script charset="utf-8" src="/scripts/react-with-addons.js" type="text/javascript"></script>
  <script charset="utf-8" src="/scripts/coffee-script.js" type="text/javascript"></script>
</head>

<body>
  <script type="text/coffeescript">
    # Define the Hello component
    {div} = React.DOM
    Hello = React.createClass
      displayName: 'Hello'
      render: ->
        console.log 'render'
        div null, "Hello #{@props.name}"
      getInitialState: ->
        console.log 'getInitialState'
        null # this function expects a return value
      getDefaultProps: ->
        console.log 'getDefaultProps'
        null
      # use for all initial stuff, remember to clean up on unmount
      componentWillMount: ->
        console.log 'componentWillMount'
      componentDidMount: ->
        console.log 'componentDidMount'
      componentWillReceiveProps: (nextProps) ->
        console.log "componentWillReceiveProps #{JSON.stringify nextProps}"
      shouldComponentUpdate: (nextProps, nextState) ->
        console.log "shouldComponentUpdate #{JSON.stringify nextProps}, #{JSON.stringify nextState}"
        true
      componentWillUpdate: (nextProps, nextState) ->
        console.log "componentWillUpdate #{JSON.stringify nextProps}, #{JSON.stringify nextState}"
      componentDidUpdate: (prevProps, prevState) ->
        console.log "componentDidUpdate #{JSON.stringify prevProps}, #{JSON.stringify prevState}"
      componentWillUnmount: ->
        console.log "componentWillUnmount"

    # Render the Hello component into the DOM
    console.log '-- RenderComponent:'
    component = React.renderComponent Hello(name: 'World'), document.body
    console.log '-- setprops:'
    component.setProps name: 'World'
    console.log '-- replaceProps:'
    component.replaceProps name: 'World'
    console.log '-- setState:'
    component.setState name: 'World'
    console.log '-- replaceState:'
    component.replaceState name: 'World'
    console.log '-- Force Update:'
    component.forceUpdate()
    console.log '-- Unmount Components'
    React.unmountComponentAtNode document.body
  </script>
</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<script charset="utf-8" src="/scripts/react-with-addons.js" type="text/javascript"></script>
	<script charset="utf-8" src="/scripts/coffee-script.js" type="text/javascript"></script>
	</head>

	<body>
	<script type="text/coffeescript">
	# Define the Hello component
	{div} = React.DOM
	Hello = React.createClass
	displayName: 'Hello'
	render: ->
	console.log 'render'
	div null, "Hello #{@props.name}"
	getInitialState: ->
	console.log 'getInitialState'
	null # this function expects a return value
	getDefaultProps: ->
	console.log 'getDefaultProps'
	null
	# use for all initial stuff, remember to clean up on unmount
	componentWillMount: ->
	console.log 'componentWillMount'
	componentDidMount: ->
	console.log 'componentDidMount'
	componentWillReceiveProps: (nextProps) ->
	console.log "componentWillReceiveProps #{JSON.stringify nextProps}"
	shouldComponentUpdate: (nextProps, nextState) ->
	console.log "shouldComponentUpdate #{JSON.stringify nextProps}, #{JSON.stringify nextState}"
	true
	componentWillUpdate: (nextProps, nextState) ->
	console.log "componentWillUpdate #{JSON.stringify nextProps}, #{JSON.stringify nextState}"
	componentDidUpdate: (prevProps, prevState) ->
	console.log "componentDidUpdate #{JSON.stringify prevProps}, #{JSON.stringify prevState}"
	componentWillUnmount: ->
	console.log "componentWillUnmount"

	# Render the Hello component into the DOM
	console.log '-- RenderComponent:'
	component = React.renderComponent Hello(name: 'World'), document.body
	console.log '-- setprops:'
	component.setProps name: 'World'
	console.log '-- replaceProps:'
	component.replaceProps name: 'World'
	console.log '-- setState:'
	component.setState name: 'World'
	console.log '-- replaceState:'
	component.replaceState name: 'World'
	console.log '-- Force Update:'
	component.forceUpdate()
	console.log '-- Unmount Components'
	React.unmountComponentAtNode document.body
	</script>
	</body>
	</html>