react-lifecycle-mounting-unmounting.jsx

import React from "react";
import { render } from "react-dom";

const ParentComponent = React.createClass({
  getDefaultProps: function() {
    console.log("Step 1 (invoked once) => GetDefaultProps");
  },
  getInitialState: function() {
    console.log("Step 2 (invoked once) => GetInitialState");
    return { text: "" };
  },
  componentWillMount: function() {
    console.log("Step 3 (invoked once) => ComponentWillMount");
  },
  render: function() {
    console.log("Step 4 (invoked multiple times) => Render");
    return <div>I got rendered!</div>;
  },
  componentDidMount: function() {
    console.log("Step 5 (invoked once) => ComponentDidMount");
  },
  componentWillUnmount: function() {
    console.log("Step 6 (invoked once) => ComponentWillUnmount");
  }
});

render(
  <ParentComponent />,
  document.getElementById("root")
);