When I was introducing myself to React, it was useful to figure out all the parts of a React Component. There was a decent list functions at Facebook's React docs site under Component Lifecycle, but not one that stubbed it out for you, much less for es6.

So without a lot more blather, here's a component shell, ready for you to fill in. I think I've got the couple of places where you need a trivial implementation for the component to work (like returning true for shouldComponentUpdate -- that & calling super() in the constructor might be it), but if not, let me know and I'll fix it.

The comments are mostly taken from the same docs page I've linked above (and the url's included in the constructor comment).

import React from 'react';

export default class ContactsGrid extends React.Component {
    constructor(props) {
        super(props);
        // https://facebook.github.io/react/docs/react-component.html#constructor
        // It's okay to initialize state based on props if you know 
        // what you're doing.
        // Quick note: With React.createClass(), you have to provide a 
        // separate getInitialState method that returns the initial state
        // this.state = {
        //     propName: props.propName
        // };
    };

    render() {
        return (
            <div className="note-className-not-simply-class">
                <h1>Prop count: {Object.keys(this.props).length}</h1>;
            </div>
        );
    }

    //============================================================================
    // This is the only lifecycle hook called on server rendering.
    // Generally, we recommend using the constructor() instead.
    //
    // NOTE: This is now UNSAFE_componentWillMount()
    // https://reactjs.org/docs/react-component.html#unsafe_componentwillmount
    //============================================================================
    UNSAFE_componentWillMount() {
        console.log("componentName: componentWillMount -- no touch");
    }

    //============================================================================
    // componentDidMount() is invoked immediately after a component is
    // mounted. Initialization that requires DOM nodes should go here. If
    // you need to load data from a remote endpoint, this is a good place
    // to instantiate the network request. Setting state in this method
    // will trigger a re-rendering.
    //============================================================================
    componentDidMount() {
        console.log("componentName: componentDidMount");
    }

    //============================================================================
    // componentWillReceiveProps() is invoked before a mounted component
    // receives new props. If you need to update the state in response to
    // prop changes (for example, to reset it), you may compare this.props
    // and nextProps and perform state transitions using this.setState()
    // in this method.
    //
    // Note that React may call this method even if the props have not
    // changed, so make sure to compare the current and next values if you
    // only want to handle changes.
    //
    // React doesn't call componentWillReceiveProps with initial props
    // during mounting.
    // 
    // NOTE: DEPRECATED!
    // now called UNSAFE_componentWillReceiveProps(nextProps)
    //
    // https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
    // It is recommended that you use the static getDerivedStateFromProps 
    // lifecycle instead of UNSAFE_componentWillReceiveProps.    
    //============================================================================
    UNSAFE_componentWillReceiveProps(nextProps) {
        console.log("componentName: componentWillReceiveProps");
    }

    //============================================================================
    // getDerivedStateFromProps is invoked after a component is instantiated as 
    // well as when it receives new props. It should return an object to update 
    // state, or null to indicate that the new props do not require any state 
    // updates.
    // 
    // Note that if a parent component causes your component to re-render, this 
    // method will be called even if props have not changed. You may want to 
    // compare new and previous values if you only want to handle changes.
    //============================================================================
    getDerivedStateFromProps(nextProps, prevState) {
        console.log("This is the \"safe\" replacement for componentWillReceiveProps.");
    }

    //============================================================================
    // Use shouldComponentUpdate() to let React know if a component's output
    // is not affected by the current change in state or props. The default
    // behavior is to re-render on every state change, and in the vast
    // majority of cases you should rely on the default behavior.
    //
    // This method is not called for the initial render or when forceUpdate()
    // is used.
    //============================================================================
    shouldComponentUpdate(nextProps, nextState) {
        console.log("componentName: shouldComponentUpdate");
        return true;
    }

    //============================================================================
    // componentWillUpdate() is invoked immediately before rendering when new
    // props or state are being received. Use this as an opportunity to
    // perform preparation before an update occurs. This method is not called
    // for the initial render.
    // 
    // NOTE: Deprecated. If you need to update state in response to props 
    // changes, use getDerivedStateFromProps() instead.
    //============================================================================
    UNSAFE_componentWillUpdate(nextProps, nextState) {
        console.log("componentName: componentWillUpdate");
    }

    //============================================================================
    // Note that if shouldComponentUpdate is false, this isn't (currently) fired.
    //
    // componentDidUpdate() is invoked immediately after updating occurs. This
    // method is not called for the initial render.
    //
    // Use this as an opportunity to operate on the DOM when the component has
    // been updated. This is also a good place to do network requests as long
    // as you compare the current props to previous props (e.g. a network
    // request may not be necessary if the props have not changed).
    //============================================================================
    componentDidUpdate(prevProps, prevState) {
        console.log("componentName: componentDidUpdate");
    }

    //============================================================================
    // componentWillUnmount() is invoked immediately before a component is
    // unmounted and destroyed. Perform any necessary cleanup in this method,
    // such as invalidating timers, canceling network requests, or cleaning up
    // any DOM elements that were created in componentDidMount
    //============================================================================
    componentWillUnmount() {
        console.log("componentName: componentWillUnmount");
    }

    //============================================================================
    // Performs a shallow merge of nextState into current state. This is the
    // primary method you use to trigger UI updates from event handlers and
    // server request callbacks.
    //
    // It's also possible to pass a function with the signature function(state,
    // props) => newState. This enqueues an atomic update that consults the
    // previous value of state and props before setting any values.
    //
    // Generally we recommend using componentDidUpdate() [rather than the
    // `callback` parameter] for such logic instead.
    //
    // NOTE: setState() does not immediately mutate this.state... There is no
    // guarantee of synchronous operation of calls to setState and calls may be
    // batched for performance gains.
    //============================================================================
    setState(nextState, callback) {
        console.log("componentName: setState");
    }

    //============================================================================
    // By default, when your component's state or props change, your component
    // will re-render. If your render() method depends on some other data, you
    // can tell React that the component needs re-rendering by calling
    // forceUpdate().
    //
    // Normally you should try to avoid all uses of forceUpdate() and only
    // read from this.props and this.state in render().
    //============================================================================
    forceUpdate() {
        console.log("componentName: forceUpdate");
    }

}

Labels: javascript, noteToSelf, react