This article describes how to upgrade Babel and ESLint to allow React environment to support advanced language features, for example fat arrow class methods.

General

Preset-env

Class properties transform

Fat arrow class methods.

handleClick = (evt) => {
  ...
}

Object rest spread transform

Transform rest properties for object destructuring assignment and spread properties for object literals

Rest Properties

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Spread Properties

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

Upgrade

npm install babel-eslint --save-dev

npm i babel-plugin-transform-class-properties --save-dev
npm i babel-plugin-transform-object-rest-spread --save-dev

.eslintrc

"parser": "babel-eslint"

.babelrc

{
	"presets": ["env", "react"],
	"plugins": [
		"transform-object-rest-spread",
		"transform-class-properties"
	]
}