React cheatsheet: ES5 vs ES6

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

Dec 30, 2016 · 1 min read

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.


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


Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade