React property validation is extremely useful when you want to ensure that users of your component adhere to your API.

When invalid properties are supplied, warnings appear within the browsers development console to alert you as to what was expected and what was supplied.

By default PropType validation supports JS primitives like array, bool, func, number, object and string as well as supporting custom validation via helpers like, instanceOf, oneOf, oneOfType, arrayOf, objectOf or even completely bespoke validation functions.

How do I get this to work with ES6/7?

When I first tried to use React property validation I kept receiving Babel compile errors because I didn't realise that the syntax required was experimental ES7. Once I figured this out, I was able to make the necessary updates to my project, described below:

1. gulp.js

Update your build system to support es7.classProperties:

gulp.task('build', function() {  
    return browserify({
        entries: [paths.ENTRY_POINT],
        transform: [babelify.configure({
            optional: ['es7.classProperties']
        }), reactify, envify]
    })
    .bundle()
    .pipe(source(paths.OUT))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.DEST_SRC));
});

2. package.json

Optionally update your test script to support Stage 0 ES7 features:

"scripts": {
    "test": "BABEL_JEST_STAGE=0 jest"
}

3. .eslintrc

Optionally update your linter to enforce the use of PropTypes:

{
  "rules": {
    "react/jsx-sort-prop-types": [1],
    "react/prop-types": [1]
  }
}

4. example.js

You're now ready to create your components using the ES7 class property syntax:

import React from 'react';

export default class Example extends React.Component {  
    static propTypes = {
        bar: React.PropTypes.string.isRequired,
        fn: React.PropTypes.func.isRequired
    }

    _handleClick(e) {
        e.preventDefault();
        this.props.fn(this.props.bar);
    }

    render() {
        return (
            <button onClick={this._handleClick.bind(this)}>
                Click me!
            </button>
        );
    }
}

Have fun!