React By Example: Part 3

It is tough to use React without ES2015.

This article is part of a series (starting with React By Example: Part 1) of articles that, through a number of progressively more complicated examples, explores the React JavaScript library. The examples are available as a GitHub repository.

One particularly nice aspect of developing with React is that it heavily depends on JavaScript; as such you become a much better JavaScript developer. We will explore several key features of modern JavaScript (ES2015) that are commonly used in React.

note: As indicated earlier CRA (with both the development and production builds) converts the files in the src folder (written in ES2015) into browser-ready ES5 output.

Variables

With ES2015, we replace the use of var with const or let.

const: Used when the variable will not be re-assigned.

let: Used when the variable will be re-assigned.

In most ES2015 code, const is used much more often than let. One common use of let, however, is for loops.

for (let i = 0; i <= 10; i += 1) {
  window.console.log(i);
}

Working from our last images example we update the JavaScript files as such:

updates to src/index.js

const generateName = require('sillyname');
const hello = require('./hello');
require('./index.css');
const icon = require('./icon.png');
const name = generateName();
const counterEl = document.getElementById('counter');
const incrementEl = document.getElementById('increment');
const iconEl = document.getElementById('icon');
...

Arrow Functions

Instead of using the typical ES5 anonymous function,

function(x, y) {
  window.console.log(x);
  window.console.log(y);
}

We use an arrow function:

(x, y) => {
  window.console.log(x);
  window.console.log(y);
}

note: In addition to the shorter notation, arrow function are simpler than regular functions (mostly beneficial in more advanced JavaScript scenarios).

Updating our example:

updates to src/index.js

...
incrementEl.addEventListener('click', ()  => {
  counterEl.innerHTML = (parseInt(counterEl.innerHTML, 10) + 1).toString();
});
...

In the case where an arrow function only has a single statement, you can further abbreviate it by removing the curly braces.

updates to src/index.js

...
incrementEl.addEventListener('click', () => counterEl.innerHTML
  = (parseInt(counterEl.innerHTML, 10) + 1).toString()
);
...

updates to src/hello/index.js

module.exports = () => window.console.log('hello world');

note: You may have noticed already; if you mistype something (and create broken JavaScript) and save the file, CRA will report there error in the browser, in the browser’s console, and in the window running the yarn start command. This is because CRA has a linting tool in its build process. There are other ways of performing linting, e.g., in your editor, that are more convenient and more strict; but this is outside the scope of this series.

Import/Export

ES2015 replaces the require and modules.export functionality with the import and export syntax.

updated src/index.js

import generateName from 'sillyname';
import hello from './hello';
import './index.css';
import icon from './icon.png';
...

updated src/hello/index.js

export default () => window.console.log('hello world');

Destructuring

First, in addition to the default export, we can name exports as such:

updates to src/hello/index.js

export const a = 'apple';
export const b = 'banana';
export default () => window.console.log('hello world');

The named exports are accessible as properties on the imported item, e.g., hello.a. This, however, is a little weird as hello is a function in our example.

ES2015 adds the destructuring syntax that maps properties to variables; used along with the import command we get the following.

updates to src/index.js

import generateName from 'sillyname';
import hello, { a, b } from './hello';
...
iconEl.src = icon;
window.console.log(a);
window.console.log(b);

The Next Part

In the next part, React by Example: Part 4 , we will finally begin to introduce React concepts.