React cheatsheet: ES5 vs ES6

The differences between ES5 and ES6 syntax when writing a React application.

require vs import

Importing a member:

Importing the default and member:

Documentation on import.

exports vs export

Named exports:

Documentation on export.

React component

Or create a function if it’s just a stateless functional component:

React props

Prop types:

Default props:

React state

Initial state:

React methods

Lifecycle methods:

Internal methods:

In order to access the component’s context in the ES6 approach, the method must be bound to this:

React context

Documentation on React context.

Babel

If you’re transpiling your code with Babel (not all browsers understand ES6), make sure to add the ES2015 preset.