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.
    //============================================================================
    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.
    //============================================================================
    componentWillReceiveProps(nextProps) {
        console.log("componentName: 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() {
        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.
    //============================================================================
    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: , ,