ES6 for React Developers

When I started my travel with React Native I noticed that my skills in Javascript were totally obsoleted. As Full-Stack Ruby on Rails developer, the Javascript that I've been doing for years was very basic and focused in the use of jQuery mainly for the Frontend and some CoffeeScript. So understanding the modern JS was crucial to can be proficient writing and understanding React.

First, looking at ES6 I could see that it's a big change with respect to the "old JS" bringing a lot of new features that make JavaScript an amazing language much more expressive and readable.

These are the ES6 features that every React developer must know:

Better variable declaration

No more var to declare variables avoiding issues with global scopes.

Use:

const when you are not going to update its value.
let when you want to update its value.

Also, const and let only can be declared once in the same scope and they are block scoped.

To fast check, go to JS Console and try to update a variable declared with const:

const something = 'cool';
something = 'Nop';

=> Uncaught TypeError: Assignment to constant variable.

String literals

Present in other languages it allows us interpolation in strings:

// Old
const language = 'Javascript';
language + ' is great';

// New
`${language} is great`;

Other advantages:

Avoid escape when special characters
New lines are preserved

const multiline = `
This is a multiline message

Thanks to the new feature String Literals

Happy coding,
${language}
`;

Arrow functions

Very similar to CoffeeScript this new syntax brings several benefits:

More consise, no more function keyword
Implicit return
Automatic binding to context, so no more this


const multiply = function(a, b) {
  return a * b
}

// same
const multiply = (a, b) => a * b;

Deconstructing

It allows us to extract variables from arrays and objects with a simpler syntax:

const languages = ['Javascript', 'Ruby', 'Golang'];
const [one, two, three] = languages;

const user = {
  name: 'John',
  lastName: 'Doe',
  contact: {
    email: '[email protected]'
  }
}

const { name, lastName, contact: { email } } = user;

You will see this case a lot at the top of React Components to extract values from props:

const { title, subtitle } = props;

Rest & Spead operator

It allows us to expand elements:

const languages = ['Javascript', 'Ruby', 'Golang'];
const newArr = ['Rust', ...languages];

Also, commonly used to modify a Redux store:

state.items.map(expense =>
  expense.id === payload.id
    ? {
      ...expense,
      title: payload.title,
      amount: payload.amount,
      }
    : expense
)

Shorthand syntax

It makes objects more concise.

const user = (name, email) => {
  return {
    name: name,
    email: email,
    timestamp: Date.now()
  }
}

// same with shorthand
const user = (name, email) => {
  return {
    name,
    email,
    timestamp: Date.now()
  }
}

These are only a few of the new features included in ES6 but IMO the most relevant to work with React.