What good is Babel “stage-0” preset anyway?

Binding this has always been something clumsy and annoying in JS in general and in React in particular:

  constructor(props) {
this.state = {isToggleOn: true};
    // This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);

stage-0 let you forget that unsightly .bind syntax and write these neat things.

  1. static defaultProps = { } You can freely assign values using = (equal sign).
  2. this is reachable from within onClick just fine.
static defaultProps = {
foo: ‘FOO’
onClick = (e) => {

This is webpack config set up for stage-0. First install plugins (if not yet). -D is a shortcut for --save-dev, i is a shortcut for install:

// one by one
$ npm i -D babel-loader
$ npm i -D babel-preset-stage-0
$ npm i -D babel-preset-env
$ npm i -D babel-preset-react
// or all at at once
$ npm i -D babel-loader babel-preset-stage-0 babel-preset-env babel-preset-react

Then add this in your webpack.config.js config (I prefer complete loader syntax, you can use shortcuts if you like, Webpack has them):

module: {
rules: [
/* .js */
resource: {
test: /\.js$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'webpack')
use: [{
loader: 'babel-loader',
options: {
presets: ["env", "stage-0", "react"],
code: true,
comments: true,
cacheDirectory: true,
babelrc: false,

That’s it.