Upgrading Babel and ESLint to use React Advanced Language Features

Upgrading Babel and ESLint

Upgrading Babel and ESLint to use React Advanced Language Features

by John Vincent


Posted on June 1, 2018


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"
	]
}
Styling Material-UI components using Styled-ComponentsSpell Checking Markdown Documents