Learning React Native

Appendix A. ES6 Syntax

Some of the code samples in this book use what’s known as ES6 syntax. If you’re not familiar with ES6 syntax, don’t worry—it’s a pretty straightforward translation from the JavaScript you might be accustomed to.

ES6 refers to ECMAScript 6, also known as “Harmony,” the forthcoming version of ECMAScript. JavaScript is an implementation of ECMAScript. There’s plenty of interesting history behind these naming conventions, but what you need to know is: ES6 is the “new” version of JavaScript, and extends the existing specification with some helpful new features.

React Native uses Babel, the JavaScript compiler, to transform our JavaScript and JSX code. One of Babel’s features is its ability to compile ES6 syntax into ES5-compliant JavaScript, so we can use ES6 syntax throughout our React codebase.

Destructuring

Destructuring assignments provide us with a convenient shorthand for extracting data from objects.

Take this ES5-compliant snippet:

var myObj = {a: 1, b: 2};
var a = myObj.a;
var b = myObj.b;

We can use destructuring to do this more succinctly:

var {a, b} = {a: 1, b: 2};

You’ll often see this used with require statements. When we require React, we’re actually getting out an object. We could name components using the syntax, as shown in Example A-1.

Example A-1. Importing the <View> component without destructuring

var React = require('react-native');
var View = React.View

But it’s much nicer to use destructuring, as shown in Example A-2.

Example A-2. ...