ES6
Familiarity with React lifecycle / concepts assumed
.jsx with webpack
JSX Harmony in WebStorm
Airbnb conventions

Stateless Functional Components

A stateless component exposes props (if at all) and not state

A functional component merely exposes render()

A functional component is an ES6 function

'use strict';

import React from 'react';

export const StatelessFunctionalComponent = (props) => {
    return (
        <p>I'm a Stateless Functional Component!</p>
    )
};


Lifecycle Components

A lifecycle component exposes props and state

A lifecycle component exposes the full React lifecycle

ES5 createClass() in ES6

'use strict';

import React from 'react';

export const LifecycleES5ES6Component = React.createClass({

    mixins: [],

    statics: {},

    propTypes: {},

    defaultProps: {},

    getInitialState() {
    },

    componentWillMount() {
    },

    componentDidMount() {
    },

    componentWillReceiveProps(nextProps) {
    },

    shouldComponentUpdate(nextProps, nextState) {
    },

    componentWillUpdate(nextProps, nextState) {
    },

    componentDidUpdate(prevProps, prevState) {
    },

    componentWillUnmount() {
    },

    render() {
        return (
            <p>I'm a Lifecycle Component!</p>
        )
    }
});

(Each lifecycle method is optional)

ES6 Approach

'use strict';

import React from 'react';

export class LifecycleES6Component extends React.Component{

    constructor(props) {
        super(props);
    }

    statics: {}

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }

    render() {
        return (
            <p>I'm a Lifecycle Component!</p>
        )
    }
}

(Each lifecycle method is optional)

More Resources

here
here
here
and here